主要包括let const,模板字符串,解构赋值,箭头函数,扩展运算符,Promise,类,import export等
一、let和const
1.let所声明的变量只在let所在的代码块内有效。let相当于es5用一个函数把变量包裹了。
const声明一个只读的常量。一旦声明,常量的值就不能改变。一旦声明就必须立即初始化。
2.const声明的变量也只在所声明的块级作用域内有效。
3.let声明的变量和const声明的常量不会提示,只能在声明后使用。
4..let声明的变量和const声明的常量都不能重复声明。
二、模板字符串
模板字符串用反引号(`)标识。可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
//当作普通字符串
`In JavaScript '\n' is a line-feed.`
//定义多行字符串 空格和缩进会保留
`In JavaScript this is
not legal`
//在字符串中嵌入变量 将变量写在${}中
var name='Tom';
`hello,${name}!`
如果在模板字符串中需要使用反引号,则加反斜杠转义。
如果模板字符串中的变量没有声明则会报错。
三、解构赋值
es6允许按照一定的模式从数组和对象中取值,然后对变量进行赋值,这被称为解构赋值。
1.数组的解构赋值
let [a,b,c]=[1,2,3];
let [foo,[[bar],baz]]=[1,[[2],3]];
let [foo]=[];//解构不成功,foo=undefined
//不完全解构如下
let [x,y]=[1,2,3];//x=1 y=2
let [a,[b],c]=[1,[2,3],4];//a=1 b=2 c=4
如果等号右边不是数组,将会报错
解构赋值允许指定默认值
let [foo=true]=[];//foo=true
let [x,y='b']=['a'];//x='a' y='b'
如果一个数组成员不严格等于undefined则默认值不会生效,null不严格等于undefined
let [x=1]=[undefined];//x=1
let [x=1]=[null];//x=null
默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
2.对象的解构赋值
let {foo,bar}={foo:"aaa",bar:"bbb"};//foo:"aaa" bar:"bbb"
变量必须与属性同名才能取到正确的值
let {foo:baz}={foo:"aaa"};//baz="aaa" foo is not defined
对象的解构赋值的内部机制是先找到同名属性,然后赋值给对应的变量。foo是匹配的模式,baz才是变量,真正被赋值的是baz。
对象的解构也可以指定默认值。默认值生效的条件是对象的属性值严格等于undefined。如果解构失败,变量的值等于undefined。
let{log,sin,cos}=Math;
以上代码将Math对象的对数、正弦、余弦三个方法赋值到对应的变量上,使用方便。
let arr=[1,2,3];
let {0:first,[arr.length-1]:last}=arr;
first//1
last//3
数组的本质是对象,可以对数组进行对象属性的解构。
3.字符串的解构赋值
const [a,b,c,d,e]='hello';
a//'h'
b//'e'
let {lenth:len}='hello';
len//5
4.函数参数的解构赋值
function add([x,y]){
return x+y;
}
add([2,3]);//5
function move1({x=0,y=0}={}){
return [x,y];
}
move({x:3,y:8});//[3,8]
move({x:3});//[3,0]
move({});[0,0]
move();//[0,0]
function move2({x,y}={x:0,y:0}){
return [x,y];
}
move({x:3,y:8});//[3,8]
move({x:3});//[3,undefined]
move({});[undefined,undefined]
move();//[0,0]
四、箭头函数
1.var f=v=>v;
等同于
var f=function(v){
return v;
}
2.如果箭函数不需要参数或需要多个参数,就使用圆括号把参数括起来
var f=()=>5;
var sum=(num1,num2)=>num1+num2;
3.如果箭头函数的代码块部分不止一个语句,要用大括号括起来。
var sum=(num1,num2)=>{num1+num2};
4.如果箭头函数直接返回一个对象,必须在对象外面加上括号。
var getItem=id=>({id:id,name:"Temp"});
5.箭头函数可以与变量解构结合使用。
const full=({first,last})=>first+' '+last;
等同于
function full(person){
return person.first+' '+person.last;
}
6.函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。this的指向是可变的,但在箭头函数中是固定的。箭头函数根本没有自己的this。
不可以当作构造函数,即不能new。
不可以使用arguments对象。
不可以使用yield命令。
箭头函数可以嵌套。
五、扩展运算符
1.扩展运算符是三个点(...),将一个数组转为用逗号分割的参数序列。
function add(x,y){
return x+y;
}
var numbers=[1,2];
add(...numbers);//3
2.可以替代数组的apply方法
Math.max(...[14,3,7]);//14
3.将一个数组添加到另一个数组的尾部
var arr1=[1,2];
var arr2=[3,4];
arr1.push(...arr2);
4.扩展运算符与解构赋值结合时,只能放在参数的最后一位。
5.扩展运算符可以将字符串转换为真正的数组,且能够正确识别32位的Unicode字符
[...'hello']
//['h','e','l','l','o']
六、Promise对象
Promise是异步编程的一种解决方案。
1.对象的状态不受外界影响。有3种状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态。
一旦状态改变就不会再变,任何时候都可以得到这个结果。
2.Promise对象是一个构造函数,用来生成Promise实例。
var promise=new Promise(function(resolve,reject){
//...some code
if(/*异步操作成功*/){
resolve(value);
}
else{
reject(error);
}
});
Promise实例生成后,可用then方法分别指定Resolved状态和Rejected状态的回调函数。
promise.then(function(value){
//success
},function(error){
//failure
});
then方法指定的回调函数将在脚本所有同步任务执行完成后才会执行。
一般不要在then方法中定义Rejected状态的回调函数,而应使用catch方法。
七、类
es6中的class是一个语法糖,它的绝大部分功能es5都可以做到。class写法使对象原型的写法更加清晰,更像面向对象编程的语法。
八、import export
export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
//m.js
var a=1;
var b=2;
export{a,b};
通过该接口可以取到模块内部实时的值。
//n.js
import {a,b} from './m.js';
import命令具有提升效果
import * from './m,js';//整体加载
使用export default命令可以为模块指定默认输出
export default function fun(){
//...
}
import fun from '...';
export和import的复合写法
export {foo,bar} from 'my_module';
const声明的常量只在当前代码块中有效,如果要被多模块共享,可以导出。
//constants.js
export const A=1;
export const B=2;
import * as constants from './constants';
console.log(constants.A);//1