1.ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现

2.let命令

let命令的基本用法:ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

    {
        var a = 10;
        let b = 1;
    }
    console.log(a);  //10
    console.log(b);  //报错

for循环有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

    for (let i = 0; i < 3; i++) {
        let i = 'abc';
        console.log(i);
    }
    //abc
    //abc
    //abc

上面代码正确运行，输出了3次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

let不存在变量提升

    console.log(foo);  //undefined
    var foo = 2;
    console.log(bar);  //报错
    let bar = 2;

暂时性死区

    var tmp = 123;
    if (true) {
        tmp = 'abc'; //报错
        let tmp;
    }

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

if (true) {
        tmp = 'abc';
        console.log(tmp);  //报错
        let tmp;
        console.log(tmp);  //undefined
        tmp = 123;
        console.log(tmp);  //123
    }

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

    //报错
    function fn() {
        let a = 10;
        var a = 1;
    }

    //报错
    function fn() {
        let a = 10;
        let a = 1;
    }

因此，不能在函数内部重新声明参数。

    function fn(arg) {
        let arg; //报错
    }

    function fn(arg) {
    ｛
        let arg；//不报错
    ｝
    }

3.块级作用域

• 为什么需要块级作用域？

  ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

  第一种场景，内层变量可能会覆盖外层变量。

  function fn() {
      console.log(tmp);
      if (false) {
          var tmp = 'hello world';
      }
  }
  fn();  //undefined
  

  上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

  第二种场景，用来计数的循环变量泄露为全局变量。

  var str = 'hello';
  for (var i = 0; i < str.length; i++) {
      console.log(str[i]);
  }
  console.log(i);
  

  上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

• 块级作用域和函数声明

  ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

  但是注意在浏览器的ES6环境中，块级作用域内声明的函数，行为类似于var声明的变量。

  function f() {
      console.log('outer');
  }
  
  (function () {
      if (false) {
          function f() {
              console.log('inside');
          }
      }
      f(); 
  }())
  

  在es5中结果是inside，因为在if内声明的函数f会被提升到函数头部；在es6中结果是outer，因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是在符合es6的浏览器中会报错。实际上执行的代码是

  function f() {
      console.log('outer');
  }
  
  (function () {
      var f;
      if (false) {
          function f() {
              console.log('inside');
          }
      }
      f();//报错：f不是一个函数
  }())
  

  所以考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

  //函数声明语句
  {
      let a = 'smm';
  
      function f() {
          return a;
      }
  }
  //函数表达式
  {
      let a = 'smm';
      let f = function () {
          return a;
      }
  }
  

4.const命令

• 基本用法

  const声明一个只读的常量。一旦声明，常量的值就不能改变。改变常量的值会报错。

  const PI = 3.1415;
  PI  //3.1415
  PI = 3;  //报错
  

  const一旦声明变量，就必须立即初始化，不能留到以后赋值。对于const来说，只声明不赋值，就会报错。

  const foo;   //报错
  

  其余的与let相同，1.只在声明所在的块级作用域内有效。2.const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。3.const声明的常量，也与let一样不可重复声明。

5.数组的结构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

以前，为变量赋值，只能直接指定值。

    let a = 1;
    let b = 2;
    let c = 3;

ES6 允许写成下面这样。

let [a,b,c] = [1,2,3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

    let [foo, [[bar]], baz] = [1, [[2]], 3];
    foo;  //1
    bar;  //2
    baz;  //3

    let [, , third] = ['foo', 'bar', 'baz'];
    third;  //baz

    let [x, , y] = [1, 2, 3];
    x;  //1
    y;  //3

    let [head, ...tail] = [1, 2, 3, 4];
    head; //1
    tail; //[2,3,4]

    let [x, y, ...z] = ['a'];
    x; //'a'
    y; //undefined
    z; //[]

如果解构不成功，变量的值就等于undefined。

    let [foo] = [];
    let [bar, foo] = [1];

以上两种情况都属于解构不成功，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] =1;
    let[foo] =false;
    let[foo] =NaN;
    let[foo] =undefined;
    let[foo] =null;
    let[foo] ={};

上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备Iterator接口（前五个表达式），要么本身就不具备Iterator接口（最后一个表达式）。

默认值

解构赋值允许指定默认值。

    let [foo = true] = [];
    foo;  //true

    let [x, y = 'b'] = ['a'];  //x = 'a',y = 'b'
    let [x, y = 'b'] = ['a',undefined];  //x = 'a',y = 'b'

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员只有严格等于undefined，默认值才会生效的。看下面例子：

    let [x = 1] = [undefined];
    x;  //1

    let [x = 1] = [null];
    x;  //null

上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

    function f() {
        console.log('aaa');
    }

    let [x = f()] = [1];
    x;  //1

上面代码中，因为x能取到值，所以函数f根本不会执行。

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

    let [x = 1, y = x] = [];    //x = 1; y = 1
    let [x = 1, y = x] = [2];    //x = 2; y = 2
    let [x = 1, y = x] = [1,2];    //x = 1; y = 2
    let [x = y, y = 1] = [];    //报错

上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明。

6.对象的结构赋值

    let {bar, foo} = {foo: 'aaa', bar: 'bbb'};
    foo;  //'aaa'
    bar;  //'bbb'

    let {baz} = {foo: 'aaa', bar: 'bbb'};
    baz;  //undefined

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

    let {foo:baz} = {foo: 'aaa', bar: 'bbb'};
    baz;  //'aaa'
    foo;  // 报错

与数组一样，解构也可以用于嵌套结构的对象。

    let obj = {
        p: [
            'hello',
            {y: 'world'}
        ]
    };
    let {p: [x, {y}]} = obj;
    x;  //hello
    y;  //world

注意，这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样。

    let obj = {
        p: [
            'hello',
            {y: 'world'}
        ]
    };
    let {p,p: [x, {y}]} = obj;
    x;  //hello
    y;  //world
    p;  //['hello',{y:'world'}]

下面再看一个例子：

    const node = {
        loc: {
            start: {
                line: 1,
                column: 5
            }
        }
    };
    let {loc, loc: {start}, loc: {start: {line}}} = node;
    line;  //1
    loc;  //{start : obj}
    start  //{line : 1, column : 5}

上面代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量。

下面是嵌套赋值的例子：

    let obj = {};
    let arr = [];
    ({foo: obj.prop, bar: arr[0]} = {foo: 123, bar: true});
    obj;  //{prop:123}
    arr;  //[true]

上边的例子严格按照对象的解构赋值的内部机制赋值，看起来就是很简单了

对象的解构也可以指定默认值。同样，默认值生效的条件是，对象的属性值严格等于undefined。

    var {x = 3} = {};
    x;  //3

    var {x, y = 5} = {x: 1};
    x;  //1
    y;  //5

    var {x: y = 3} = {};
    y;  //3

    var {x: y = 3} = {x: 5};
    y;  //5

    var {message: msg = 'smm'} = {};
    msg;  //'smm'

再看例子：

    var {x = 3} = {x: undefined};
    x;   //3
    
    var {x = 3} = {x: null};
    x;  //null

上面代码中，如果x属性等于null，就不严格相等于undefined，导致默认值不会生效。

如果解构失败，变量的值等于undefined。

    let {foo} = {bar: 'bar'};
    foo;  //undefined

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

 let {foo: {bar}} = {baz: 'baz'};  //报错

上面代码中，等号左边对象的foo属性，对应一个子对象。该子对象的bar属性，解构时会报错。原因很简单，因为foo这时等于undefined，再取子属性就会报错。

如果要将一个已经声明的变量用于解构赋值，必须非常小心。

    //报错
    let x;
    {x} = {x : 1};

正确的写法是：

    let x;
   （{x} = {x : 1}）;

上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。

7.字符串的结构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

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

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

    let {length: len} = 'hello';
    len;   //5

8.函数参数的结构赋值

    function add([x, y]) {
        return x + y;
    }

    add([1, 2]);  //3

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

下面是另一个例子。

    [[1, 2], [3, 4]].map(([x, y]) => x + y);  //[3,7]

函数参数的解构也可以使用默认值。

    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]

上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

注意，下面的写法会得到不一样的结果。

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

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值。

    [1, undefined, 3].map((x = 'yes') => x);
    // [1,'yes',3]

9.变量的解构赋值的用途

1.交换变量的值

    let x = 1;
    let y = 2;
    [x, y] = [y, x];

2.从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

    //返回一个数组
    function example() {
        return [1, 2, 3];
    }

    let [a, b, c] = example();

    //返回一个对象
    function example() {
        return {
            foo: 1,
            bar: 2
        }
    }

    let {foo, bar} = example();

3.函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。

    //参数是一组有序的值
    function f([x, y, z]) {

    }

    f([1, 2, 3]);

    //参数是一组无序的值
    function f({foo, bar}) {

    }

    f({bar: 1, foo: 2});

4.提取JSON数据
解构赋值对提取JSON对象中的数据，尤其有用。

    let jsonData = {
        id: 42,
        status: 'OK',
        data: [867, 5309]
    };
    let {id, status, data: num} = jsonData;
    console.log(id, status, num);
    //42,'OK',[867,5309]

上面代码可以快速提取 JSON 数据的值。

5.函数参数的默认值

    jQuery.ajax = function (url, {
        async = true,
        beforeSend = function () {},
        cache = true,
        complete = function () {},
        crossDomain = false,
        global = true
    }) {

    }

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

6.遍历Map结构
任何部署了Iterator接口的对象，都可以用for...of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。

    const map = new Map();
    map.set('first', 'hello');
    map.set('second', 'world');
    for (let [key, value] of map) {
        console.log(key + 'is' + value);
    }
    // 'first is hello'
    // ''second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

    //获取键名
    for (let [key] of map) {
     
    }
    //获取键值
    for (let [,value] of map) {

    }

7.输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

    const {SourseMapConsumer, SourseNode} = require('sourse-map');

参考文章阮一峰的ECMAScript 6入门