ES5、ES6、ES7电子教程

ES5电子教程

中文版：http://yanhaijing.com/es5/#58
英文版：https://people-mozilla.org/~jorendorff/es5.1-final.html

ES6电子教程

中文版：http://es6.ruanyifeng.com/
英文版：http://www.ecma-international.org/ecma-262/6.0/#sec-type
ES6的浏览器兼容性问题： https://segmentfault.com/a/1190000005128101

ES7电子教程

英文版：http://www.ecma-international.org/ecma-262/7.0/index.html

名词解析

(1)链接： http://www.jb51.net/article/30719.htm

• 变量提升
  1、查找变量的顺序是：活动对象-->全局对象，一旦找到变量就停止查找
  2、javascrip函数级作用域的影响，即函数会创建新的作用域
  3、变量提升，是把变量提升提到函数的顶部，只提升变量的声明，赋值没提升。

   //场景一

    var x = 1; //x存储在全局对象中
    console.log(x); // 1
    if (true) {
        var x = 2; //x存储在活动对象中
        console.log(x); //2
    }
    console.log(x);// 2     

   //场景一

    var v='Hello World';
    (function(){
        alert(v); 
        var v='I love you';
        alert(v);
    })(); 

  //定义的三个变量

  (function(){
      var a='One';
      var b='Two';
      var c='Three';
  })();
  //实际上是这样子的：
  (function(){
      var a,b,c;
      a='One';
      b='Two';
      c='Three';
  })();

  所以在定义js变量时候，需要把变量放在块级作用域的顶端，先定义变量，以防出现错误。

• 函数提升
  1、函数提升：就是把函数声明提到作用域的顶部
  2、函数有两种表达方式：函数声明方式和函数表达方式
  3、只有函数声明方式才能提升

  //函数声明方式

    function myTest(){
        foo();
        function foo(){
            alert("我来自 foo");
        }
    }
    myTest(); 

 //函数表达方式

    function myTest(){
        foo();
        var foo =function foo(){
            alert("我来自 foo");
        }
    }
    myTest();

• ** 暂时性死区**
  只要一进入当前作用域，所要使用的变量就已经存在，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
• ** let与var区别**
  //不同之处
  1、let声明的变量只在let所在的代码块内有效
  2、var有变量提升，则声明之前使用不会报错；let没有变量提升，声明前使用会报错
  3、let存在暂时性死区，只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响

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

   4、ES6规定，若区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡在声明前就使用这些变量，均报错。
   5、ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误。
   6、let不允许在相同作用域内，重复声明同一个变量

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

   1、避免由于变量提升，内层变量可能会覆盖外层变量；
   2、避免用来计数的循环变量泄露为全局变量；
   3、ES6允许块级作用域的任意嵌套, 外层作用域无法读取内层作用域的变量, 内层作用域可以定义外层作用域的同名变量；

       {{{{{let insane = 'Hello World'}}}}};
       {{{{ {let insane = 'Hello World'} console.log(insane); // 报错}}}};
       {{{{ let insane = 'Hello World'; {let insane = 'Hello World'}}}}};

   4、块级作用域可以替代立即执行的匿名函数的功能
   5、ES5(严格模式)规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明
   6、ES6允许在块级作用域之中声明函数，只在大括号情况下可行，没有大括号会报错；函数声明类似于var，存在函数提升

   注意：环境导致的行为差异太大，应该避免在块级作用域内声明函数。 若需要，也应该写成函数表达式，而不是函数声明语句

• ** 顶层对象及其属性**
  根据不同环境，顶层对象指：
  1、浏览器：window、self对象。有实体含义，即指代浏览器的窗口对象
  2、node: global对象

  ES5中，顶层对象的属性与全局变量等价，这是javascript语言设计的最大败笔之一，原因：

  1、没法在编译时就报出变量未声明的错误，只有运行时才能知道。因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的。

  2、顶层对象到处可读，不利于模块化编程
  3、人为创造全局变量

  ES6中，对顶层对象及其属性做了以下处理：

  1、保留var和function命令，其定义的全局变量依然为顶层对象的属性

  2、let、const、import、class四种命令定义的全局变量不属于顶层对象的属性

  使用this对象获取顶层对象，但具有一定局限性：
  1、全局环境中，this会返回顶层对象。

     但是，Node模块和ES6模块中，this返回的是当前模块。

  2、函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。

     但是，严格模式下，这时this会返回undefined。

  3、不管是严格模式，还是普通模式，new Function('return this')()，总是会返回全局对象。

     但是，如果浏览器用了CSP（Content Security Policy，内容安全政策），那么eval、new Function这些方法都可能无法使用

   在所有情况下，都取到顶层对象的方法：

    //方法一：

    (typeof window !== 'undefined'
       ? window
       : (typeof process === 'object' &&
          typeof require === 'function' &&
          typeof global === 'object')
         ? global
         : this);

    //方法二：
    var getGlobal = function () {
      if (typeof self !== 'undefined') { return self; }
      if (typeof window !== 'undefined') { return window; }
      if (typeof global !== 'undefined') { return global; }
      throw new Error('unable to locate global object');
    };   

• 解构(Destructuring)赋值
  从数组或对象中提取值，按照对应位置，对变量赋值

  解构赋值类型:
  1、数组形式：数据结构具有Iterator接口.
        var:  var [v1, v2, ..., vN ] = array;
        let:   let [v1, v2, ..., vN ] = array;
        const:  const [v1, v2, ..., vN ] = array;
        Set结构:  let [x, y, z] = new Set(["a", "b", "c"]);

        function* fibs() {
          var a = 0;
          var b = 1;
          while (true) {
            yield a;
            [a, b] = [b, a + b];
          }
        }
        var [first, second, third, fourth, fifth, sixth] = fibs();    

       // fibs是一个Generator函数，原生具有Iterator接口。解构赋值会依次从这个接口获取值                            

  2、对象形式：对象解构赋值与数组解构赋值的区别：
      * 数组的元素按次序排序，变量的值与位置有关；左边变量在右边的值可以不赋值
      * 对象的解构赋值，右边的以字段（变量名与变量值）形式存在，与左边变量名的顺序无关; 左边的变量与右边的变量一直，不可缺少
          var { foo, bar } = { foo: "aaa", bar: "bbb" };
          foo // "aaa"
          bar // "bbb"

          var { baz } = { foo: "aaa", bar: "bbb" };
          baz // undefined

• 模式匹配

  “模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

    var [a,b,c]=[1,2,3]; //模式匹配法_变量的批量赋值
    console.log(b);

    //嵌套数组解构
    let [foo,[[fa],fb],fc] = [1,[[2],3],4];
    console.log(fa)

    let [one,,three] = [1,2,"123"];
    console.log(three)

    let [start, ...d]=["999",2,"56","00"];
    console.log(start)

    let [x, y, ...z] = ['a'];
    console.log(x)
    console.log(y) 
    console.log(z)

    let [...arr] = [];
    console.log(arr) //数组

    如果解构不成功，变量的值就等于undefined
    var [fo] = [];  // fo undefined

    var [bar, fo] = [1]; // fo undefined

    // 如果右边不是数组，或者严格地说，不是可遍历的结构，那么会报错：
    let [foo] = 1;
    let [foo] = false;
    let [foo] = NaN;
    let [foo] = undefined;
    let [foo] = null;
    let [foo] = {};

ES5与ES6区别

• 变量声明方式

  ES5：2种方式。var, function
  ES6：6种方式。var, function，let, const, import, class

• 默认值
  ES6允许变量指定默认值。
  var [foo = true] = [];
  foo // true
  [x, y = 'b'] = ['a']; // x='a', y='b'
  [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
  ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的
  var [x = 1] = [undefined];
  x // 1
  var [x = 1] = [null];
  x // null

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

  惰性求值： 如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值
  默认值可以引用解构赋值的其他变量，但是该变量必须已经声明，否则会报错。