ES6/ES2015的一些小点点

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

说到ES6.就不得不提一下Babel。Babel
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。大家可以选择自己习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看：

image.png

最常用的ES6特性

let, const, class, extends, super, arrow functions,destructuring, default这些是ES6最常用的几个语法，今天我们就先来学习学习这些基本用法

let, const

这两个的用途与var类似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。
首先来看下面这个例子：

var name = 'timi'
while (true) {
    var name = 'kimi'
    console.log(name)  //kimi
    break
}
console.log(name)  //kimi

控制台输出如下：

使用 var 两次输出都是kimi，这是因为ES5只有全局作用域和函数作用域，没有块级作用域。我们看到的这一个例子之所以两次输出都是 kimi，就是因为内层变量 kimi覆盖了外层变量 timi。使得最后打印出的内容均为 kimi。
我们再来试试将 var变为 let，来看看效果：

let name = 'timi'
while (true) {
    var name = 'kimi'
    console.log(name)  //kimi
    break
}
console.log(name)  //timi

控制台输出如下：

我们可以看到，这时，控制台的输出变化了，分别输出了 kimi和 timi。这是因为我们在定义变量的时候用了let，而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

我们再来看一个例子：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

控制台输出如下：

我们发现而并不是我们想要的a[6]的值，我们再来将var换为let试试看：

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

控制台输出如下：

我们可以看到，当循环里的var变为let之后我们得到了我们想要的结果，
这是因为：在上一段代码中，变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。
而使用let则不会出现这个问题。

const也用来声明变量，我们用const声明变量PI并给它赋初值97，接着我们再给PI重新赋值23：

const PI = 97;
PI = 23 ;
console.log(PI);

控制台输出如下：

我们会发现控制台输出报错，这是因为const声明的是常量，一旦声明，常量的值就不能改变。所以这也就是为什么我们赋了初值再去赋另一个值会报错的原因。

emmm在ES5中，原型、构造函数、继承这些玩意总是让人很费脑子啊，语法真的是很难懂，一度让人产生放弃的念头，不过，在ES6中，ES6会让我们暂时忘却这些玩意，可能也许maybe会开启一个相对简单的旅途。。。。
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，新的class写法让对象原型的写法更加清晰，更加通俗易懂，，，，，总之就是会方便很多啦~

class，extends，super

首先我们来上一段代码：

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

上面代码首先用class定义了一个名为Animal的“类”，我们可以看到里边有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单的说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。这就有类似我们的全局作用域和局部作用域起到的作用。
Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。（看到这，我们对java有点了解的小伙伴肯定会发现这些和java的写法简直神似，那么了解过java的小伙伴学起来肯定会更容易上手啦~）
super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

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

arrow function

这应该是ES6最最常用的一个新特性了，同他来写function比原来的写法要简洁清晰很多：

//es5写法：
function(i){
    return i + 1;
}
//es6写法：
(i)=>i + 1;

简直不要太简单啊~
如果方程式比较复杂，则需要用{}把代码包起来：

//es5
function(x,y){
    x++;
    y--;
    return x+y;
}
//es6
(x,y)=>{x++;y--;renturn x+y}

除了看上去更简洁以外，arrow function还有一项超级无敌的功能！
长期以来，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)

但是在es6中，我们就可以这样写：

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

当我们使用es6中的箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

destructuring（解构）

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

1.数组的解构赋值

1）“模式匹配”为变量赋值：
var[a,b,c] = [1,2,3];
2）不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。
看下面的例子：
ES5的写法：

let [a, [b], d] = [1, [2, 3], 4];
console.log(a) // 1
console.log(b)// 2
console.log(d)// 4

控制台输出如下：

2.对象的解构赋值

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

var { bar, foo } = { foo: "aaa", bar: "bbb" };
console.log(foo)// "aaa"
console.log(bar)// "bbb"
var { baz } = { foo: "aaa", bar: "bbb" };
console.log(baz) // undefined

控制台输出如下：

2)变量名与属性名不一致，必须写成下面这样。这实际上说明，对象的解构赋值是下面形式的简写。也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz) // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
console.log(f)  // 'hello'
console.log(l)  // 'world'

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

var obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
var { p: [x, { y }] } = obj;
console.log(x)// "Hello"
console.log(y) // "World"
//这时p是模式，不是变量，因此不会被赋值

4)数组本质是特殊的对象，因此可以对数组进行对象属性的解构

var arr = [1, 2, 3];
var {0 : first, [arr.length - 1] : last} = arr;
console.log(first) // 1
console.log(last) // 3

3.字符串的解构赋值

1)字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
2)类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

const [a, b, c, d, e] = 'hello';
console.log(a) // "h"
console.log(b) // "e"
console.log(c) // "l"
console.log(d)// "l"
console.log(e) // "o"
 
let {length : len} = 'hello';
console.log(len) // 5

4.数值和布尔值的解构赋值

解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let {toString: s} = 123;
s === Number.prototype.toString // true
 
let {toString: s} = true;
s === Boolean.prototype.toString // true
 
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

5.变量得解构赋值用途

1）交换变量的值。
[x,y]=[y,x];
2)从函数返回多个值
3)函数参数的定义，解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { 
  ... 
}
f([1, 2, 3]);
 
// 参数是一组无次序的值
function f({x, y, z}) { 
  ...
 }
f({z: 3, y: 2, x: 1});

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

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

//可以快速提取json中的数据的值。

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()