es6总结

时间:2024-08-28 14:35:08

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