本文共 10304 字，大约阅读时间需要 34 分钟。

ES6新加的几个常用特性

1. 块级作用域 let和const

Let是更新的var，但有新语法，比如块级作用域，在作用域内没有变量提升

Const常量，不可变，单指向一个对象是涉及到按对象应用还是可以改变，一般大写

 

 

2. 箭头函数

不用_this概念  this是定义时的对象

简化回调函数    一个参数省略括号，一句话省略return  

（）=>{}

 

3. Promise

解决异步回调

Let promise =new Promise(function(resolve,reject){//resolve 成功调用//reject  失败调用}）；Promise.then(res=>{}),then=>{}

方法then catch   finally   all  race  resolve  reject  try

 

 

4. 类

严格模式

ES6中加了类的概念，类似Java  但实际上是函数 需要new 但如果像函数调用会报错

首字母大写

没有变量提升

This比原生轻松

继承 extends

子类必须要执行父类的构造函数Super（）

覆盖之后执行最新的，可以先Super，再加入新的东西

静态方法：加static 不会被实例继承，直接通过类调用  静态属性

私有方法，私有属性 #

 

5. 模块

采用严格模式

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀 0 表示八进制数，否则报错

不能删除不可删除的属性，否则报错

不能删除变量delete prop，会报错，只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字（比如protected、static和interface）

 

 

6. Export和import

Export {名称  （变量，函数，类）  as 重命名}     规定模块对外接口

|default 时可以不加{}   无论import还是export

import {

*  名称 as xxx} from '模块'   相对和绝对路径都可以

配合使用

Import的内容不可以改变

export { foo, bar } from 'my_module';

Import（）动态加载

 

7. Proxy

结合reflect使用

 

 

8. 默认参数

函数未传参时使用默认值，

传进来的参数默认已经定义，不可以在内部进行定义

 

9. 模板表达式

反引号+${}

实现多行字符串

 

10. 解构赋值

可以直接对象赋值包括数组

const  {x，y} = this,.props; 

 

11. 定义了新数据类型symbol

独一无二的（原始类型不可以new）

属性Description

方法.for重用   keyFor 返回key值

 

12. Generator

函数名之前加*

解决异步，深度嵌套  async（ES2017）

生成器

配合yield（暂停标志）使用 next（）(下一个内部状态）

function * gen(){    yield 'welcome';    yield 'to';    return '';}let g1=gen();Console.log(g1.next());

 

Yield * function（）执行另一个内部generator函数

 

 

13. 异步操作

Promise

Geneator

Async Await

Async function fn(){Let f1= await readFile(‘data/a.txt’);Condole.log(f1.toString());Let f2= await readFile(‘data/b.txt’);Condole.log(f2.toString());Let f3= await readFile(‘data/c.txt’);Condole.log(f3.toString());

 

 13.1 Promise的立即执行性

var p = new Promise(function(resolve, reject){  console.log("create a promise");  resolve("success");});console.log("after new Promise");p.then(function(value){  console.log(value);});

控制台输出：

"create a promise""after new Promise""success"

Promise对象表示未来某个将要发生的事件，但在创建（new）Promise时，作为Promise参数传入的函数是会被立即执行的，只是其中执行的代码可以是异步代码。有些同学会认为，当Promise对象调用then方法时，Promise接收的函数才会执行，这是错误的。因此，代码中"create a promise"先于"after new Promise"输出。

 13.2 Promise 三种状态

var p1 = new Promise(function(resolve,reject){  resolve(1);});var p2 = new Promise(function(resolve,reject){  setTimeout(function(){    resolve(2);    }, 500);      });var p3 = new Promise(function(resolve,reject){  setTimeout(function(){    reject(3);    }, 500);      });console.log(p1);console.log(p2);console.log(p3);setTimeout(function(){  console.log(p2);}, 1000);setTimeout(function(){  console.log(p3);}, 1000);p1.then(function(value){  console.log(value);});p2.then(function(value){  console.log(value);});p3.catch(function(err){  console.log(err);});

控制台输出：

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 1}Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2}Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 3}

Promise的内部实现是一个状态机。Promise有三种状态：pending，resolved，rejected。当Promise刚创建完成时，处于pending状态；当Promise中的函数参数执行了resolve后，Promise由pending状态变成resolved状态；如果在Promise的函数参数中执行的不是resolve方法，而是reject方法，那么Promise会由pending状态变成rejected状态。

p2、p3刚创建完成时，控制台输出的这两台Promise都处于pending状态，但为什么p1是resolved状态呢？ 这是因为p1 的函数参数中执行的是一段同步代码，Promise刚创建完成，resolve方法就已经被调用了，因而紧跟着的输出显示p1是resolved状态。我们通过两个setTimeout函数，延迟1s后再次输出p2、p3的状态，此时p2、p3已经执行完成，状态分别变成resolved和rejected。

13.3 Promise 状态的不可逆性

var p1 = new Promise(function(resolve, reject){  resolve("success1");  resolve("success2");});var p2 = new Promise(function(resolve, reject){  resolve("success");  reject("reject");});p1.then(function(value){  console.log(value);});p2.then(function(value){  console.log(value);});

控制台输出：

"success1""success"

Promise状态的一旦变成resolved或rejected时，Promise的状态和值就固定下来了，不论你后续再怎么调用resolve或reject方法，都不能改变它的状态和值。因此，p1中resolve("success2")并不能将p1的值更改为success2，p2中reject("reject")也不能将p2的状态由resolved改变为rejected.

13.4  链式调用

var p = new Promise(function(resolve, reject){  resolve(1);});p.then(function(value){               //第一个then  console.log(value);  return value*2;}).then(function(value){              //第二个then  console.log(value);}).then(function(value){              //第三个then  console.log(value);  return Promise.resolve('resolve');}).then(function(value){              //第四个then  console.log(value);  return Promise.reject('reject');}).then(function(value){              //第五个then  console.log('resolve: '+ value);}, function(err){  console.log('reject: ' + err);})

 

控制台输出：

12undefined"resolve""reject: reject"

 

Promise对象的then方法返回一个新的Promise对象，因此可以通过链式调用then方法。then方法接收两个函数作为参数，第一个参数是Promise执行成功时的回调，第二个参数是Promise执行失败时的回调。两个函数只会有一个被调用，函数的返回值将被用作创建then返回的Promise对象。这两个参数的返回值可以是以下三种情况中的一种：

• return 一个同步的值 ，或者 undefined（当没有返回一个有效值时，默认返回undefined），then方法将返回一个resolved状态的Promise对象，Promise对象的值就是这个返回值。
• return 另一个 Promise，then方法将根据这个Promise的状态和值创建一个新的Promise对象返回。
• throw 一个同步异常，then方法将返回一个rejected状态的Promise, 值是该异常。

根据以上分析，代码中第一个then会返回一个值为2（1*2），状态为resolved的Promise对象，于是第二个then输出的值是2。第二个then中没有返回值，因此将返回默认的undefined，于是在第三个then中输出undefined。第三个then和第四个then中分别返回一个状态是resolved的Promise和一个状态是rejected的Promise，依次由第四个then中成功的回调函数和第五个then中失败的回调函数处理。

13.5 Promise then() 回调异步性

var p = new Promise(function(resolve, reject){  resolve("success");});p.then(function(value){  console.log(value);});console.log("which one is called first ?");

控制台输出：

"which one is called first ?""success"

Promise接收的函数参数是同步执行的，但then方法中的回调函数执行则是异步的，因此，"success"会在后面输出。

13.6 Promise 中的异常

var p1 = new Promise( function(resolve,reject){  foo.bar();  resolve( 1 );   });p1.then(  function(value){    console.log('p1 then value: ' + value);  },  function(err){    console.log('p1 then err: ' + err);  }).then(  function(value){    console.log('p1 then then value: '+value);  },  function(err){    console.log('p1 then then err: ' + err);  });var p2 = new Promise(function(resolve,reject){  resolve( 2 );});p2.then(  function(value){    console.log('p2 then value: ' + value);    foo.bar();  },  function(err){    console.log('p2 then err: ' + err);  }).then(  function(value){    console.log('p2 then then value: ' + value);  },  function(err){    console.log('p2 then then err: ' + err);    return 1;  }).then(  function(value){    console.log('p2 then then then value: ' + value);  },  function(err){    console.log('p2 then then then err: ' + err);  });

控制台输出：

p1 then err: ReferenceError: foo is not definedp2 then value: 2p1 then then value: undefinedp2 then then err: ReferenceError: foo is not definedp2 then then then value: 1

Promise中的异常由then参数中第二个回调函数（Promise执行失败的回调）处理，异常信息将作为Promise的值。异常一旦得到处理，then返回的后续Promise对象将恢复正常，并会被Promise执行成功的回调函数处理。另外，需要注意p1、p2 多级then的回调函数是交替执行的 ，这正是由Promise then回调的异步性决定的。

13.7 Promise.resolve()

var p1 = Promise.resolve( 1 );var p2 = Promise.resolve( p1 );var p3 = new Promise(function(resolve, reject){  resolve(1);});var p4 = new Promise(function(resolve, reject){  resolve(p1);});console.log(p1 === p2);console.log(p1 === p3);console.log(p1 === p4);console.log(p3 === p4);p4.then(function(value){  console.log('p4=' + value);});p2.then(function(value){  console.log('p2=' + value);})p1.then(function(value){  console.log('p1=' + value);})

控制台输出：

truefalsefalsefalsep2=1p1=1p4=1

Promise.resolve(...)可以接收一个值或者是一个Promise对象作为参数。当参数是普通值时，它返回一个resolved状态的Promise对象，对象的值就是这个参数；当参数是一个Promise对象时，它直接返回这个Promise参数。因此，p1 === p2。但通过new的方式创建的Promise对象都是一个新的对象，因此后面的三个比较结果都是false。另外，为什么p4的then最先调用，但在控制台上是最后输出结果的呢？因为p4的resolve中接收的参数是一个Promise对象p1，resolve会对p1”拆箱“，获取p1的状态和值，但这个过程是异步的，可参考下一节。

13.8 resolve vs reject

var p1 = new Promise(function(resolve, reject){  resolve(Promise.resolve('resolve'));});var p2 = new Promise(function(resolve, reject){  resolve(Promise.reject('reject'));});var p3 = new Promise(function(resolve, reject){  reject(Promise.resolve('resolve'));});p1.then(  function fulfilled(value){    console.log('fulfilled: ' + value);  },  function rejected(err)    console.log('rejected: ' + err);  });p2.then(  function fulfilled(value){    console.log('fulfilled: ' + value);  },  function rejected(err){    console.log('rejected: ' + err);  });p3.then(  function fulfilled(value){    console.log('fulfilled: ' + value);  },  function rejected(err){    console.log('rejected: ' + err);  });

控制台输出：

p3 rejected: [object Promise]p1 fulfilled: resolvep2 rejected: reject

Promise回调函数中的第一个参数resolve，会对Promise执行"拆箱"动作。即当resolve的参数是一个Promise对象时，resolve会"拆箱"获取这个Promise对象的状态和值，但这个过程是异步的。p1"拆箱"后，获取到Promise对象的状态是resolved，因此fulfilled回调被执行；p2"拆箱"后，获取到Promise对象的状态是rejected，因此rejected回调被执行。但Promise回调函数中的第二个参数reject不具备”拆箱“的能力，reject的参数会直接传递给then方法中的rejected回调。因此，即使p3 reject接收了一个resolved状态的Promise，then方法中被调用的依然是rejected，并且参数就是reject接收到的Promise对象。

14. SET

类似于数组，有序，不能有重复的值，但不报错

Let set = new Set();

方法： add  delete has clear size foreach keys value(let item of krys) entries

key和value是同一个值

weakSet 存储Json  只能储存对象 弱引用（垃圾回收不考虑）

 

 

15. Map

Set（key,value） get(key)  has(key) delete (key) clear

Map的键是对象引用，绑定内存

15. 1 map转换为数组

 const myMap = new Map()     .set(true,7).set({foo:3}, [‘abc’]);

 

15.2 数组转换为Map

new Map([  [true, 7],  [{foo: 3}, ['abc']]])

15.3 Map转对象

function strMapToObj(strMap) {  let obj = Object.create(null);  for (let [k,v] of strMap) {    obj[k] = v;  }  return obj;}const myMap = new Map()  .set('yes', true)  .set('no', false);strMapToObj(myMap)

 

15.4 对象转Map   

function objToStrMap(obj) {  let strMap = new Map();  for (let k of Object.keys(obj)) {    strMap.set(k, obj[k]);  }  return strMap;}objToStrMap({yes: true, no: false})

15.5 Map转Json  

转为对象JSON  

function strMapToJson(strMap) {   return JSON.stringify(strMapToObj(strMap));}let myMap = new Map().set('yes', true).set('no', false);strMapToJson(myMap)

 

 

转为数组Map

function mapToArrayJson(map) {  return JSON.stringify([...map]);}let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);mapToArrayJson(myMap)

 

15.6 JSON转Map

function jsonToStrMap(jsonStr) {  return objToStrMap(JSON.parse(jsonStr));}jsonToStrMap('{"yes": true, "no": false}')

 

特殊

整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。

function jsonToMap(jsonStr) {  return new Map(JSON.parse(jsonStr));}jsonToMap('[[true,7],[{"foo":3},["abc"]]]')

 

 

16. WeakMap

键只能是对象 弱引用不计入垃圾回收