ES6新特性

ECMAScript6，也称为ECMAScript2015，是JavaScript语言的下一代标准。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始

使用ES6了。我们可以点此访问traceur-compiler 在线版本实时编辑ES6代码并查看转换后的结果，代码运行结果会在console显示。

最常用的ES6特性

let, const, for of,class, extends, super, arrow functions,增强的对象字面量， template string, destructuring,默认参数值，不定参数，拓展参数，import，export,Set,Map,WeakSet,weakMap，proxies，symbol,promise等等 

这些是ES6最常用的几个语法，基本上学会它们，我们就可以走遍天下都不怕啦！我会用最通俗易懂的语言和例子来讲解它们，保证一看就懂，一学就会。

let  const

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

首先来看下面这个例子：

var fullName='hmz';
while(true){
    var fullName='yingxuan';
    console.log(fullName);//yingxuan
    break;
}
console.log(fullName);//yingxuan

使用var 两次输出都是obama，这是因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层

变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

let fullName='john';
while(true){
    let fullName="joe";
    console.log(fullName);//joe
    break;
}
console.log(fullName);//john

另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量，看下面的例子：

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

上面代码中，变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

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

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

var clickBox=document.querySelectorAll(".clickBox");
for(var i=0;i<clickBox.length;i++){
    clickBox[i].οnclick=function(){
        console.log(i);
    }
}

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

function iteratorFactory(i){
    var οnclick=function(e){
        console.log(i);
    }
    return onclick;
}
var clickBox=document.querySelectorAll(".clickBox");
for(var i=0;i<clickBox.length;i++){
    clickBox[i].οnclick=iteratorFactory(i);
}

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

const PI = Math.PI
PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

当我们尝试去改变用const声明的常量时，浏览器就会报错。const有一个很好的应用场景，就是当我们引用第三方库的时声明的变量，用const来声明可以避免未来不小心重命

名而导致出现bug：

const moment=require('moment');

for of值遍历

我们都知道 for in 循环用于遍历数组，类数组或对象，ES6中新引入的 ffor of循环功能相似，不同的是每次循环它提供的不是序号而是值。

var someArray=["a","b","c"];
for(v of someArray){
    console.log(v);//打印a b c
}

class   extends  super

这三个特性涉及了ES5中最令人头疼的的几个部分：原型、构造函数，继承...你还在为它们复杂难懂的语法而烦恼吗？你还在为指针到底指向哪里而纠结万分吗？

有了ES6我们不再烦恼！

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

class Animal{
    constructor(name){
        this.name=name;
    }
    sayName(){
        console.log("My name is "+this.name)
    }
}
class Programmer extends Animal{
    constructor(name){
        super(name);
    }
    program(){
        console.log("I'm coding...")
    }
}
var animal=new Animal("dummy");
var wayou=new Programmer("wayou");
animal.sayName();//My name is dummy
wayou.sayName();//My name is wayou
wayou.program();//I'm coding...

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Programmer类，该类通过extends关键字，继承了Animal类的所有属性和方法。

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

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

arrow function(箭头操作符)

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

如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头操作符 =>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作

以及返回的值 inputs=>outputs。

我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个 function n，甚是繁琐。当引入箭头操作符后可以方便地写回调了。请看下面的例子。

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

var array=[1,2,3];
//传统写法
array.forEach(function(v,i,a){
console.log(v);//1 2 3
});
//ES6
array.forEach(v=>console.log(v));//1 2 3

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

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

function(x, y) { 
    x++;
    y--;
    return x + y;
}
(x, y) => {x++; y--; return 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);
    }

• .第二种方法是用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。

增强的对象字面量

对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。具体表现在：

• 可以在对象字面量里面定义原型
• 定义方法可以不用function关键字
• 直接调用父类方法

这样一来，对象字面量与前面提到的类概念更加吻合，在编写面向对象的JavaScript时更加轻松方便了。

//通过对象字面量创建对象
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //设置此对象的原型为human,相当于继承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//输出 ‘breathing...’
//调用继承来的breathe方法
worker.breathe();//输出 ‘breathing...’

template string(字符串模板)

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

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

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

我们要用一堆的'+'号来连接文本与变量，而ES6中允许使用反引号  ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量 ${vraible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生。

我们可以直接这么来写：

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

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

destructuring(解构)

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

自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。

看下面的例子：

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

默认参数值  不定参数  拓展参数

1.默认参数值很简单，意思就是在定义函数的时候指定参数的默认值，而不用像以前那样通过逻辑或操作符来达到目的了。大家可以看下面的例子，调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || 'cat' 来指定默认值。

function animal(type){
    type=type || 'cat';
    console.log(type);
}
animal();

如果用ES6我们可以直接这么写：

function animal(type='cat'){
    console.log(type);
}
animal();

再来一个例子：

function sayHello(name){
	//传统的指定默认参数的方式
	var name=name||'dude';
	console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='dude'){
	console.log(`Hello ${name}`);
}
sayHello();//输出：Hello dude
sayHello('Wayou');//输出：Hello Wayou
sayHello2();//输出：Hello dude
sayHello2('Wayou');//输出：Hello Wayou

2.不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数

的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中， …types代表了所有传入 animals函数的参数。

function animals(...types){
    console.log(types);
}
animals('cat','dog','fish');//["cat","dog","fish"]

再来一个例子：

//将所有参数相加的函数
function add(...x){
    return x.reduce((m,n)=>m+n);
}
//传递任意个数的参数
console.log(add(1,2,3));//6
console.log(add(1,2,3,4,5));//15

3.拓展参数则是另一种形式的语法糖，它允许传递数组或者类数组直接做为函数的参数而不用通过 apply。

var people=["wayou","john","sherlock"];
//sayHello函数本来接收三个单独的参数人一，人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//Hello wayou,jobh,sherlock
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);//Hello wayou,jobh,sherlock

import  export

这两个家伙对应的就是es6自己的module功能，在ES6标准中，JavaScript原生支持module了。将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。

我们之前写的Javascript一直都没有模块化的体系，无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程，再用一种简单的方法把这些小工程连接在一起。

这有可能导致两个问题：

1. 一方面js代码变得很臃肿，难以维护

2. 另一方面我们常常得很注意每个script标签在html中的位置，因为它们通常有依赖关系，顺序错了可能就会出bug

在es6之前为解决上面提到的问题，我们得利用第三方提供的一些方案，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。

而现在我们有了es6的module功能，它实现非常简单，可以成为服务器和浏览器通用的模块解决方案。

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。

传统的写法

首先我们回顾下require.js的写法。假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？

首先定义：

//content.js
define('content.js', function(){
    return 'A cat';
})

然后require：

//index.js
require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})

那CommonJS是怎么写的呢？

//index.js
var animal = require('./content.js')

//content.js
module.exports = 'A cat'

ES6的写法

//index.js
import animal from './content'

//content.js
export default 'A cat'

ES6 module的其他高级用法

//content.js

export default 'A cat'    
export function say(){
    return 'Hello!'
}    
export const type = 'dog' 

上面可以看出，export命令除了输出变量，还可以输出函数，甚至是类（react的模块基本都是输出类）

//index.js

import { say, type } from './content'  
let says = say()
console.log(`The ${type} says ${says}`)  //The dog says Hello

这里输入的时候要注意：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同。

如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。

//index.js

import animal, { say, type } from './content'  
let says = say()
console.log(`The ${type} says ${says} to ${animal}`)  
//The dog says Hello to A cat

修改变量名

此时我们不喜欢type这个变量名，因为它有可能重名，所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。

//index.js

import animal, { say, type as animalType } from './content'  
let says = say()
console.log(`The ${animalType} says ${says} to ${animal}`)  
//The dog says Hello to A cat

模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

//index.js

import animal, * as content from './content'  
let says = content.say()
console.log(`The ${content.type} says ${says} to ${animal}`)  
//The dog says Hello to A cat

通常星号*结合as一起使用比较合适。

终极秘籍

考虑下面的场景：上面的content.js一共输出了三个变量（default, say, type）,假如我们的实际项目当中只需要用到type这一个变量，其余两个我们暂时不需要。我们可以只输入一个变量：

import { type } from './content' 

由于其他两个变量没有被使用，我们希望代码打包的时候也忽略它们，抛弃它们，这样在大项目中可以显著减少文件的体积。

ES6帮我们实现了！

不过，目前无论是webpack还是browserify都还不支持这一功能...

如果你现在就想实现这一功能的话，可以尝试使用rollup.js

他们把这个功能叫做Tree-shaking，哈哈哈，意思就是打包前让整个文档树抖一抖，把那些并未被依赖或使用的东西统统抖落下去。。。

看看他们官方的解释吧：

Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.

Map  Set和WeakMap  WeakSet

这些是新加的集合类型，提供了更加方便的获取属性值的方法，不用像以前一样用 hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时，在进行属性值添加与获取时有专门的 get,set方法。

//Sets
var s=new Set();
s.add("hello").add("goodbye").add("hello");
console.log(s);//Set{"hello","goodbye"}
console.log(s.size);//2
console.log(s.has("hello"));//true
//Maps
var m=new Map();
m.set("hello",42);
m.set(s,34);
console.log(m);//Map{"hello"=>42,Set{...}=>34}
console.log(m.get(s));//34

有时候我们会把对象作为一个对象的键用来存放属性值，普通集合类型比如简单对象会阻止垃圾回收器对这些作为属性键存在的对象的回收，有造成内存泄漏的危险。

而 WeakMap,WeakSet则更加安全些，这些作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉，具体还看下面的例子。

//Weak Maps
var wm=new WeakMap();
wm.set(s,{extra:42});
console.log(wm.size); //报错，s is undefined
//Weak Sets
var ws=new WeakSet();
ws.add({data:42});//因为添加到ws的这个临时对象没有其他变量引用它，所以ws不会保存它的值，也就是说这次添加其实没有意思
console.log(ws.size);//undefined

Proxies

Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。

//定义被侦听的目标对象
var engineer={name:"Joe Sixpack",salary:50};
//定义处理程序
var interceptor={
    set:function(receiver,property,value){
        console.log(property," is changed to ",value);
        receiver[property]=value;
    }
};
//创建代理以进行侦听
engineer=Proxy(engineer,interceptor);
//做一些改动来触发代理
engineer.salary=60;//salary is changed to 60

上面代码我已加了注释，这里进一步解释。对于处理程序，是在被侦听的对象身上发生了相应事件之后，处理程序里面的方法就会被调用，上面例子中我们设置了 set的处理函数，表明，如果我们侦听的对象的属性被更改，也就是被 set了，那这个处理程序就会被调用，同时通过参数能够得知是哪个属性被更改，更改为了什么值。

Symbols

我们知道对象其实是键值对的集合，而键通常来说是字符串。而现在除了字符串外，我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型，像数字，字符串还

有布尔一样，它不是一个对象。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部无法直接访问由symbol做为键的属性值

(function () {
    //创建symbol
    var key=Symbol("key");
    function  MyClass(privateData){
        this[key]=privateData;
    }
    MyClass.prototype={
        doStuff:function(){
            ...this[key]...
        }
    };
})();
var c=new MyClass("hello");
console.log(c["key"]);//无法访问该属性，因为是私有的

Math  Number  String  Object的新API

对Math,Number,String还有Object等添加了许多新的API。下面代码对这些新API进行了简单展示。

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

Promises

Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的 deferred  对象。当你发起一个异步请求，并绑定了 .when() , .done()等事件处理程序时，其实就是在应用promise模式。

//创建promise
var promise = new Promise(function(resolve, reject) {
    // 进行一些异步或耗时操作
    if ( /*如果成功 */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//绑定处理程序
promise.then(function(result) {
	//promise成功的话会执行这里
    console.log(result); // "Stuff worked!"
}, function(err) {
	//promise失败会执行这里
    console.log(err); // Error: "It broke"
});

本文章参考了很多其他博客和资料，有要补充的小伙伴还请多多提出宝贵意见哦！