ES6新特性浅析

首先先了解ES6的新特性有哪些

• let 块级作用域，可以解决es5中需要闭包或闭包引起的问题

const 常量变量 就是当我们引用第三方库的时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug

• class ，extends,super

和es5中原型，原型链，继承，来对比学习

• 首先，在ES5中，继承使用原型链，或构造函数来实现，最常见的是，使用构造函数来实现对象属性的继承，用法是在子类函数中写上 父类.call/apply(this,anguments/array);

使用原型链实现对象方法的继承，在最外面写上 ， 子类.prototype = new 父类

所有实例对象需要共享的属性和方法存在prototype对象中

不需要共享 的属性和方法，放在构造函数中

• 在es6中使用class来实现继承，浅显易懂。

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

类比es5，es5叫构造函数，es6叫类，首先，属性还是写在构造函数里，方法写在构造函数外，（不是prototype对象了），

继承时，extends继承父类的属性，方法，里面还是要写constructor,至于super()，是子类没有自己的this对象，而是需要继承父类的this对象

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

• function 简写

es5中 function(i){

return i+1;

}

es6中 (i) => i+1;

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

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

• 模块字符串

用于输出大量的html内容

$("#result").append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale!`);

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

• 解构赋值

简单来说就是模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

简化了很多操作，在数组，对象，字符串，数值，布尔值，函数参数上都可以适用。

（1）交换变量的值

（2）从函数返回多个值

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

（3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

（4）提取JSON数据

（5）函数参数的默认值

（6）遍历Map结构

（7）输入模块的指定方法

其实阮一峰大神已经讲得很详细了，大家可以参考。http://es6.ruanyifeng.com/#docs/destructuring

• Set与Map

Set与Map都是一种数据结构，其中Set是类似于数组，特性是成员唯一，无重复值

Map类似于对象，提供了“值—值”的对应，是一种更完善的 Hash 结构实现

在数组去重中，set有独特的方法

function quchong(arr){

return Array.from(new Set(arr));

}

基本常用的就是这些吧，对于promise这个也很重要的异步处理来说，就等我研究清楚再说吧。

以上参考 阮一峰的 《ECMAScript 6 入门》http://es6.ruanyifeng.com