es6总结

Posted 2020-10-12

主要包括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