ES6/ES2015—常用介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

短时间内完全掌握ES6的所有语法并不现实，且现阶段浏览器并不完全支持ES6的语法，需要使用babel等转换或前端垫片。不常用的东西就更增加了记忆难度。教程是阮一峰大神的《ECMAScript
6 入门》；一定要保证知识点都看完，因为后期学习vue、react、angularJS中，会经常涉及到ES6的知识点。

了解下Babel

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看：https://babeljs.io/

先简单快速学习下es6的常用特性和语法：

最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

一：let const

这两个的用途与var类似都是声明变量的，但在实际运用中他俩都有各自的特殊用途。

注：ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。

1：let-为JavaScript新增了块级作用域

例1：

var name = 'zach'

while (true) {

    var name = 'obama'

    console.log(name)  //obama

    break

}

console.log(name)  //obama

使用var两次输出都是obama，这是因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

let name = 'zach'

while (true) {

    let name = 'obama'

    console.log(name)  //obama

    break

}

console.log(name)  //zach

例2：

下面的代码如果使用var，最后输出的是10。

var a = [];

for (var i = 0; i < 10; i++) {

  a[i] = function () {

    console.log(i);

  };

}

a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = [];

for (let i = 0; i < 10; i++) {

  a[i] = function () {

    console.log(i);

  };

}

a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

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

for (let i = 0; i < 3; i++) {

  let i = 'abc';

  console.log(i);

}

// abc

// abc

// abc

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

例3：

再来看一个更常见的例子，了解下如果不用ES6，而用闭包如何解决这个问题。

var clickBoxs = document.querySelectorAll('.clickBox')

for (var i = 0; i < clickBoxs.length; i++){

    clickBoxs[i].onclick = function(){

        console.log(i)

    }

}

我们本来希望的是点击不同的clickBox，显示不同的i，但事实是无论我们点击哪个clickBox，输出的都是5。下面我们来看下，如何用闭包搞定它。

function iteratorFactory(i){

    var onclick = function(e){

        console.log(i)

    }

    return onclick;

}

var clickBoxs = document.querySelectorAll('.clickBox')

for (var i = 0; i < clickBoxs.length; i++){

    clickBoxs[i].onclick = iteratorFactory(i)

}

2：const-一旦声明，常量的值就不能改变

也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变

const PI = 3.1415;

PI // 3.1415

PI = 3;

// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo;

// SyntaxError: Missing initializer in const declaration

上面代码表示，对于const来说，只声明不赋值，就会报错。

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

const声明的常量，也与let一样不可重复声明。

var message = "Hello!";

let age = 25;

// 以下两行都会报错

const message = "Goodbye!";

const age = 30;

注：const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

例1：对象

const foo = {};

// 为 foo 添加一个属性，可以成功

foo.prop = 123;

foo.prop // 123

// 将 foo 指向另一个对象，就会报错

foo = {}; // TypeError: "foo" is read-only

上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

例2：数组

const a = [];

a.push('Hello'); // 可执行

a.length = 0;    // 可执行

a = ['Dave'];    // 报错

上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。

如果真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；

// 严格模式时，该行会报错

foo.prop = 123;

上面代码中，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。

除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {

  Object.freeze(obj);

  Object.keys(obj).forEach( (key, i) => {

    if ( typeof obj[key] === 'object' ) {

      constantize( obj[key] );

    }

  });

};

二：class, extends, super

这三个特性涉及了ES5中最令人头疼的的几个部分：原型、构造函数，继承...有了ES6很好的解决了

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

例1：

class Animal {

    constructor(){

        this.type = 'animal'

    }

    says(say){

        console.log(this.type + ' says ' + say)

    }

}

let animal = new Animal()

animal.says('hello') //animal says hello

例2：

class Cat extends Animal {

    constructor(){

        super()

        this.type = 'cat'

    }

}

let cat = new Cat()

cat.says('hello') //cat says hello

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。
Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

三：arrow function

这个恐怕是ES6最常用的一个新特性了，用它来写function比原来的写法要简洁清晰很多:

例1：

function(i){ return i + 1; } //ES5

(i) => i + 1 //ES6

简直是简单的不像话对吧...

如果方程比较复杂，则需要用{}把代码包起来：

function(x, y) { 

    x++;

    y--;

    return x + y;

}

(x, y) => {x++; y--; return x+y}

除了看上去更简洁以外，arrow function还有一项超级无敌的功能！

例2：

长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。例如：

class Animal {

    constructor(){

        this.type = 'animal'

    }

    says(say){

        setTimeout(function(){

            console.log(this.type + ' says ' + say)

        }, 1000)

    }

}

 var animal = new Animal()

 animal.says('hi')  //undefined says hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：

第一种是将this传给self,再用self来指代this

   says(say){

       var self = this;

       setTimeout(function(){

           console.log(self.type + ' says ' + say)

       }, 1000)

2.第二种方法是用bind(this),即

   says(say){

       setTimeout(function(){

           console.log(this.type + ' says ' + say)

       }.bind(this), 1000)

但现在我们有了箭头函数，就不需要这么麻烦了：

class Animal {

    constructor(){

        this.type = 'animal'

    }

    says(say){

        setTimeout( () => {

            console.log(this.type + ' says ' + say)

        }, 1000)

    }

}

 var animal = new Animal()

 animal.says('hi')  //animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

四：template string

这个东西也是非常有用，当我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库，比如mustache等等。

大家可以先看下面一段代码：

$("#result").append(

  "There are <b>" + basket.count + "</b> " +

  "items in your basket, " +

  "<em>" + basket.onSale +

  "</em> are on sale!"

);

我们要用一堆的'+'号来连接文本与变量，而使用ES6的新特性模板字符串``后，我们可以直接这么来写：

$("#result").append(`

  There are <b>${basket.count}</b> items

   in your basket, <em>${basket.onSale}</em>

  are on sale!

`);

用反引号（\）来标识起始，用${}来引用变量，而且所有的空格和缩进都会被保留在输出之中

五：destructuring

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

看下面的例子：

let cat = 'ken'

let dog = 'lili'

let zoo = {cat: cat, dog: dog}

console.log(zoo)  //Object {cat: "ken", dog: "lili"}

用ES6完全可以像下面这么写：

let cat = 'ken'

let dog = 'lili'

let zoo = {cat, dog}

console.log(zoo)  //Object {cat: "ken", dog: "lili"}

反过来可以这么写：

let dog = {type: 'animal', many: 2}

let { type, many} = dog

console.log(type, many)   //animal 2

六：default, rest

default很简单，意思就是默认值。大家可以看下面的例子，调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || 'cat' 来指定默认值。

function animal(type){

    type = type || 'cat'  

    console.log(type)

}

animal()

如果用ES6我们而已直接这么写：

function animal(type = 'cat'){

    console.log(type)

}

animal()

最后一个rest语法也很简单，直接看例子：

function animals(...types){

    console.log(types)

}

animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

而如果不用ES6的话，我们则得使用ES5的arguments。