ES6 特性

一、增加了const和let关键字

1、使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；
2、使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；
3、使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。const声明常量不会变，若声明对象，值改变不会报错

二、解构赋值

什么是解构？
ES6允许我们队数组和对象中提取值，对变量进行赋值，这被叫做“解构”
如下：

//通常我们像下面这样为变量赋值：
var a = 1;
    b = 2;
    c = 3;

//但是，ES6允许我们像下面这样做：
var [a, b, c] = [1, 2, 3];

1、数组解构赋值

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


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


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

2、解构不成功、解构失败

如果解构不成功，变量的值就等于undefined。以下几种情况均属于解构不成功：

// 以下均解构不成功
var [foo] = [];
var [foo] = 1;
var [foo] = "Hello";
var [foo] = false;
var [foo] = NaN;

还要，当对undefined和null解构时，就会报错

// 报错
var [foo] = undefined;
var [foo] = null;

因为解构只能用于数组和对象，其它原始类型的值都可以转为相应的对象。但是，undefined和null不能转为对象，因此会报错。

4、解构赋值允许指定默认值

var [foo = true] = [];
foo //true

5、解构还适用于let和const命令

var [v1, v2, ...., vN] = array;
let [v1, v2, ...., vN] = array;
const [v1, v2, ...., vN] = array;

6、对象的解构赋值

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

foo //"aaa"
bar //"bbb"

和数组解构不同，对象解构时，对象的属性没有顺序，变量必须与属性同名才能取得正确的值。

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

foo //"aaa"
bar //"bbb"


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

7、嵌套解构的对象

var o = {
    p: [
        "Hello",
        { y: "World" }
    ] };

var { p: [x, { y }] } = o; x //"Hello" y //"world"

8、指定默认值的对象解构

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

9、特别注意

// 错误写法
var x;
{ x } = {x : 1};
// SyntaxError: Syntax error

报错的原因是，JS引擎会将{x}理解成一个代码块，从而发生语法错误。解决的办法也很简单，只要不讲大括号写在行首，避免JS将其解释为代码块就行了。例如，像下面这样：

// 正确的写法
({x}) = {x:1};

// 或者
({x} = {x:1});

用途：

1、交换变量的值

[x, y] = [y, x];

三、箭头函数

我们先来看看箭头函数的语法：

([param] [, param]) => {
   statements
}

param => expression

param 是参数，根据参数个数不同，分这几种情况：
() => { … } // 零个参数用 () 表示；
x => { … } // 一个参数可以省略 ()；
(x, y) => { … } // 多参数不能省略 ()；

示例

我们再来看看一些示例，看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧：

// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

当然，也可以定义多个参数：

// ES5
var total = values.reduce(function (a, b) {
  return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);

当然=>后面也不一定非得接return 之后的语句，看下面：

// ES5
$("#confetti-btn").click(function (event) {
  playTrumpet();
  fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
  playTrumpet();
  fireConfettiCannon();
});

但是需要注意的是，多行语句需要用{}括起来，单行表达式不需要{}，并且会作为函数返回值。

x => { return x * x }; // 函数返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 报错，不能省略 {}
x => { x * x }; // 合法，没有定义返回值，返回 undefined

和普通函数一样，箭头函数也可以使用剩余参数和默认参数。

var func1 = (x = 1, y = 2) => x + y;
func1(); // 得到 3

var func2 = (x, ...args) => { console.log(args) };
func2(1,2,3); // 输出 [2, 3]

特性

介绍完了箭头表达式的语法和示例，我们就需要思考一下了。如果箭头表达式仅仅就是简化了函数的命名，我们为什么要改变原来的习惯而去使用它呢？所以我们需要了解一下箭头函数的特性。

箭头函数内部没有constructor方法，也没有prototype，所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this，而非执行时。我们通过一个例子来理解:

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(function() {
            this.func();
        }, 100);
    }
};

o.test(); // TypeError : this.func is not a function

上面的代码会出现错误，因为this的指向从o变为了全局（函数调用中的this都是指向全局的）。如果大家对javascript中的this不是很熟悉的话，可以看看我写过的一篇文章，深入理解javascript之this。好了，回归正题，我们需要修改上面的代码如下：

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        var _this = this;
        setTimeout(function() {
            _this.func(); 
        }, 100);
    }
};

o.test();

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的 this 始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(() => { this.func() }, 100);
    }
};

o.test();

这回this就指向o了。

我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道call和apply可以改变this的指向，但是在箭头函数中是无效的。

var x = 1,
    o = {
        x : 10,
        test : () => this.x
    };

o.test(); // 1
o.test.call(o); // 依然是1