ES6 简单入门

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准。鉴于其新增内容之多，个人总结了部分实用且常用的ES6特性，可以学习用以入门

let/const

let命令用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。const命令用来声明常量，一旦声明，常量的值就不能改变，且声明时必须立即初始化，不能留到以后赋值。这个语法有效地弥补var关键字的缺陷（变量提升，污染全局变量等）

声明	作用域	初始化
let	代码块内	否
const	代码块内	是
var	代码块外也可访问	否

下面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。

{
let x = 0;
var y = 0;
const i; // 未初始化报错
}
console.log(x); // 报错
console.log(y); // 正确的值

模板字符串

如果你也经历过拼接HTML的时候，一个个引号和加号的麻烦过程。那么，模板字符串可以很好解决这个问题，只需要使用反单引号`加上${xxx}就可以直接拼接变量

const template = `<div>
<span>${text}</span>
</div>`

箭头函数

ES6 允许使用箭头（=>）定义函数

const test = ()=> {}

箭头函数对于使用传统function关键字创建的函数有以下特点：

不需要function关键字来创建函数
省略return关键字
继承当前上下文的this关键字

变量的解构赋值方法

数组

let a = 1;let b = 2;let c = 3; 等价于 let [a, b, c] = [1, 2, 3]; 前提是两边的结构要相同，不相同则无法完全解构 let [a = 1] = []; 解构赋值也可指定默认值，当需要解构的值 === undefined 时

对象

let { a, b } = { a: 1, b: 2 }; 和数组结构类似这个常用在获取一个对象的某几个具体的方法上，如 let { log, sin, cos } = Math;

如果想在解构之后换变量名则 var { a: newName } = { a: 'aaa', b: 'bbb' }; 冒号 ":" 表示在 "=" 后面的对象里（不是对象则转化为对象）寻找 ":" 前的对象值赋给 ":" 的变量

字符串

let [a, b, c, d, e] = 'hello';
a="h"    b="e"   c="l"   d="l"   e="o"

函数参数

可用于函数的参数赋值

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

也可以设定默认值

function move({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]

用途

交换变量的值 let x = 1; let y = 2; [x, y] = [y, x];
函数参数的定义，尤其是使用默认值的情况下，就可以减少 var a = x || 0; 这种语句

function test({x, y, z}) { ... }
test({z: 3, y: 2, x: 1});

局部引用模块 const { SourceMapConsumer, SourceNode } = require("source-map");

优化异步代码的Promise

ES6对于异步方案的大杀器，原来传统的异步回调方式随着大WEB时代越来越沉重，出现了回调地狱，编码和观看上极不优雅。

通过创建一个参数为函数Promise对象，函数参数规范是resolve和reject，这两个函数一旦执行，Promise就会从pedding状态转变，并调用至链式回调then或catch中。

new Promise((resolve, reject)=> {
    setTimeout(()=> {
        resolve(111);
    }, 1000);
})
.then(res=> {
    console.log(res);
})
.catch(()=> {})

如果在then或catch中return一个新的Promise，那么就可以实现无限长的链式回调解决回调地狱。

new Promise((resolve, reject)=> {
    setTimeout(()=> {
        resolve();
    }, 1000);
})
.then(()=> {
    return new Promise((resolve, reject)=>{
        resolve(111)
    })
})
.then(res=> {
    console.log(res);
})

除了解决回调问题，还提供了Promise.all和Promise.race的方法，对于并发请求的处理提供了高效的方案。如果比作是田径比赛，all是等全部人都冲过重点才公布成绩，而race则是第一名冲过的瞬间马上公布成绩。

Promise.all()方法接收一个Promise多项数组，最终返回一个Promise对象。当这个数组内的Promise全部从pedding状态改变，那么返回的Promise对象才会被resolve或者reject。意味着我们可以从返回Promise对象中使用then和catch捕捉。

Promise.all([p1,p2,p3]).then(res=> {
    console.log(res);
})

Promise.race()方法同样接收一个Promise多项数组，最终返回一个Promise对象。当这个数组内的Promise一旦有一个从pedding状态改变时，那么返回的Promise对象立马会被resolve或者reject。

Promise.race([p1,p2,p3]).then(res=> {
    console.log(res);
})