ES6（ECMAScript2015）的出現(xiàn)虚倒，無(wú)疑給前端開發(fā)人員帶來(lái)了新的驚喜烙荷，它包含了一些很棒的新特性，可以更加方便的實(shí)現(xiàn)很多復(fù)雜的操作虑稼，提高開發(fā)人員的效率琳钉。
本文主要針對(duì)ES6做一個(gè)簡(jiǎn)要介紹。 主要譯自： http://webapplog.com/ES6/comment-page-1/蛛倦。也許你還不知道ES6是什么, 實(shí)際上, 它是一種新的javascript規(guī)范歌懒。在這個(gè)大家都很忙碌的時(shí)代，如果你想對(duì)ES6有一個(gè)快速的了解溯壶，那么請(qǐng)繼續(xù)往下讀及皂，去了解當(dāng)今最流行的編程語(yǔ)言JavaScript最新一代的十大特性。
以下是ES6排名前十的最佳特性列表（排名不分先后）：

1. Default Parameters（默認(rèn)參數(shù)） in ES6
2. Template Literals （模板文本）in ES6
3. Multi-line Strings （多行字符串）in ES6
4. Destructuring Assignment （解構(gòu)賦值）in ES6
5. Enhanced Object Literals （增強(qiáng)的對(duì)象文本）in ES6
6. Arrow Functions （箭頭函數(shù)）in ES6
7. Promises in ES6
8. Block-Scoped Constructs Let and Const（塊作用域構(gòu)造Let and Const）
9. Classes（類） in ES6
10. Modules（模塊） in ES6

聲明：這些列表僅是個(gè)人主觀意見且改。它絕不是為了削弱ES6其它功能验烧，這里只列出了10條比較常用的特性。
首先回顧一下JavaScript的歷史又跛，不清楚歷史的人噪窘，很難理解JavaScript為什么會(huì)這樣發(fā)展。下面就是一個(gè)簡(jiǎn)單的JavaScript發(fā)展時(shí)間軸：
1、1995：JavaScript誕生倔监，它的初始名叫LiveScript。
2菌仁、1997：ECMAScript標(biāo)準(zhǔn)確立浩习。
3、1999：ES3出現(xiàn)济丘，與此同時(shí)IE5風(fēng)靡一時(shí)谱秽。
4、2000–2005： XMLHttpRequest又名AJAX摹迷， 在Outlook Web Access (2000)疟赊、Oddpost (2002)，Gmail (2004)和Google Maps (2005)大受重用峡碉。
5近哟、2009： ES5出現(xiàn)，（就是我們大多數(shù)人現(xiàn)在使用的）例如foreach鲫寄，Object.keys吉执，Object.create和JSON標(biāo)準(zhǔn)。
6地来、2015：ES6/ECMAScript2015出現(xiàn)戳玫。
歷史回顧就先到此，現(xiàn)讓我們進(jìn)入正題未斑。

1.Default Parameters（默認(rèn)參數(shù)） in ES6

還記得我們以前不得不通過(guò)下面方式來(lái)定義默認(rèn)參數(shù)：

var link = function (height, color, url) {
 var height = height || 50;
 var color = color || 'red';
 var url = url || 'http://azat.co';
 ...
}

一切工作都是正常的咕宿，直到參數(shù)值是0后，就有問(wèn)題了蜡秽，因?yàn)樵贘avaScript中府阀，0表示fasly，它是默認(rèn)被hard-coded的值载城，而不能變成參數(shù)本身的值肌似。當(dāng)然，如果你非要用0作為值诉瓦，我們可以忽略這一缺陷并且使用邏輯OR就行了川队！但在ES6，我們可以直接把默認(rèn)值放在函數(shù)申明里：

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

順便說(shuō)一句睬澡，這個(gè)語(yǔ)法類似于Ruby固额！

2.Template Literals（模板對(duì)象） in ES6

在其它語(yǔ)言中，使用模板和插入值是在字符串里面輸出變量的一種方式煞聪。因此斗躏，在ES5，我們可以這樣組合一個(gè)字符串：

var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;

幸運(yùn)的是昔脯，在ES6中啄糙，我們可以使用新的語(yǔ)法$ {NAME}笛臣，并把它放在反引號(hào)里：

var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;

3.Multi-line Strings （多行字符串）in ES6

ES6的多行字符串是一個(gè)非常實(shí)用的功能。在ES5中隧饼，我們不得不使用以下方法來(lái)表示多行字符串：

var roadPoem = 'Then took the other, as just as fair,nt'
    + 'And having perhaps the better claimnt'
    + 'Because it was grassy and wanted wear,nt'
    + 'Though as for that the passing therent'
    + 'Had worn them really about the same,nt';
var fourAgreements = 'You have the right to be you.n
    You can only be you when you do your best.';

然而在ES6中沈堡，僅僅用反引號(hào)就可以解決了：

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`;
var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`;

4.Destructuring Assignment （解構(gòu)賦值）in ES6

解構(gòu)可能是一個(gè)比較難以掌握的概念。先從一個(gè)簡(jiǎn)單的賦值講起燕雁，其中house 和 mouse是key诞丽，同時(shí)house 和mouse也是一個(gè)變量，在ES5中是這樣：

var data = $('body').data(), // data has properties house and mouse
 house = data.house,
 mouse = data.mouse;

以及在node.js中用ES5是這樣：

var jsonMiddleware = require('body-parser').jsonMiddleware ;
var body = req.body, // body has username and password
   username = body.username,
   password = body.password;

在ES6拐格，我們可以使用這些語(yǔ)句代替上面的ES5代碼：

var { house, mouse} = $('body').data(); // we'll get house and mouse variables
var {jsonMiddleware} = require('body-parser');
var {username, password} = req.body;

這個(gè)同樣也適用于數(shù)組僧免，非常贊的用法：

var [col1, col2]  = $('.column'),
   [line1, line2, line3, , line5] = file.split('n');

我們可能需要一些時(shí)間來(lái)習(xí)慣解構(gòu)賦值語(yǔ)法的使用，但是它確實(shí)能給我們帶來(lái)許多意外的收獲捏浊。

5.Enhanced Object Literals （增強(qiáng)的對(duì)象字面量）in ES6

使用對(duì)象文本可以做許多讓人意想不到的事情懂衩！通過(guò)ES6，我們可以把ES5中的JSON變得更加接近于一個(gè)類呛伴。
下面是一個(gè)典型ES5對(duì)象文本勃痴，里面有一些方法和屬性：

var serviceBase = {port: 3000, url: 'azat.co'},
 getAccounts = function(){return [1,2,3]};
var accountServiceES5 = {
 port: serviceBase.port,
 url: serviceBase.url,
 getAccounts: getAccounts,
 toString: function() {
 return JSON.stringify(this.valueOf());
 },
 getUrl: function() {return "http://" + this.url + ':' + this.port},
 valueOf_1_2_3: getAccounts()
}

如果我們想讓它更有意思，我們可以用Object.create從serviceBase繼承原型的方法：

var accountServiceES5ObjectCreate = Object.create(serviceBase)
var accountServiceES5ObjectCreate = {
  getAccounts: getAccounts,
  toString: function() {
    return JSON.stringify(this.valueOf());
  },
  getUrl: function() {return "http://" + this.url + ':' + this.port},
  valueOf_1_2_3: getAccounts()
}

我們知道热康，accountServiceES5ObjectCreate 和accountServiceES5 并不是完全一致的沛申，因?yàn)橐粋€(gè)對(duì)象(accountServiceES5)在proto對(duì)象中將有下面這些屬性：

new1

var serviceBase = {port: 3000, url: 'azat.co'},
getAccounts = function(){return [1,2,3]};
var accountService = {
 __proto__: serviceBase,
 getAccounts,

另外，我們可以調(diào)用super防范惊暴，以及使用動(dòng)態(tài)key值(valueOf_1_2_3):

 toString() {
 return JSON.stringify((super.valueOf()));
 },
 getUrl() {return "http://" + this.url + ':' + this.port},
 [ 'valueOf_' + getAccounts().join('_') ]: getAccounts()
};
console.log(accountService)

new2

ES6對(duì)象文本是一個(gè)很大的進(jìn)步對(duì)于舊版的對(duì)象文本來(lái)說(shuō)饼丘。

6.Arrow Functions in（箭頭函數(shù)） ES6

這是我迫不及待想講的一個(gè)特征，CoffeeScript 就是因?yàn)樗S富的箭頭函數(shù)讓很多開發(fā)者喜愛辽话。在ES6中肄鸽，也有了豐富的箭頭函數(shù)。這些豐富的箭頭是令人驚訝的因?yàn)樗鼈儗⑹乖S多操作變成現(xiàn)實(shí)油啤，比如典徘，
以前我們使用閉包，this總是預(yù)期之外地產(chǎn)生改變益咬，而箭頭函數(shù)的迷人之處在于逮诲，現(xiàn)在你的this可以按照你的預(yù)期使用了，身處箭頭函數(shù)里面，this還是原來(lái)的this梅鹦。
有了箭頭函數(shù)在ES6中裆甩， 我們就不必用that = this或 self = this 或 _this = this 或.bind(this)。例如齐唆，下面的代碼用ES5就不是很優(yōu)雅：

var _this = this;
$('.btn').click(function(event){
  _this.sendData();
})

在ES6中就不需要用 _this = this：

$('.btn').click((event) =>{
  this.sendData();
})

不幸的是淑掌，ES6委員會(huì)決定，以前的function的傳遞方式也是一個(gè)很好的方案蝶念，所以它們?nèi)匀槐Ａ袅艘郧暗墓δ堋?br> 下面這是一個(gè)另外的例子，我們通過(guò)call傳遞文本給logUpperCase() 函數(shù)在ES5中：

var logUpperCase = function() {
  var _this = this;
 
  this.string = this.string.toUpperCase();
  return function () {
    return console.log(_this.string);
  }
}
 
logUpperCase.call({ string: 'ES6 rocks' })();

而在ES6芋绸，我們并不需要用_this浪費(fèi)時(shí)間：

var logUpperCase = function() {
  this.string = this.string.toUpperCase();
  return () => console.log(this.string);
}
logUpperCase.call({ string: 'ES6 rocks' })();

請(qǐng)注意媒殉，只要你愿意，在ES6中=>可以混合和匹配老的函數(shù)一起使用摔敛。當(dāng)在一行代碼中用了箭頭函數(shù)廷蓉，它就變成了一個(gè)表達(dá)式。它將暗地里返回單個(gè)語(yǔ)句的結(jié)果马昙。如果你超過(guò)了一行桃犬，將需要明確使用return。
這是用ES5代碼創(chuàng)建一個(gè)消息數(shù)組：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(function (value) {
  return "ID is " + value; // explicit return
});

用ES6是這樣：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(value => `ID is ${value}`); // implicit return

請(qǐng)注意行楞，這里用了字符串模板攒暇。
在箭頭函數(shù)中，對(duì)于單個(gè)參數(shù)子房，括號(hào)()是可選的形用，但當(dāng)你超過(guò)一個(gè)參數(shù)的時(shí)候你就需要他們。
在ES5代碼有明確的返回功能：

var ids = ['5632953c4e345e145fdf2df8', '563295464e345e145fdf2df9'];
var messages = ids.map(function (value, index, list) {
  return 'ID of ' + index + ' element is ' + value + ' '; // explicit return
});

在ES6中有更加嚴(yán)謹(jǐn)?shù)陌姹局ず迹瑓?shù)需要被包含在括號(hào)里并且它是隱式的返回：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `); // implicit return

7. Promises in ES6

Promises 是一個(gè)有爭(zhēng)議的話題田度。因此有許多略微不同的promise 實(shí)現(xiàn)語(yǔ)法。Q解愤，bluebird镇饺，deferred.js，vow, avow, jquery 一些可以列出名字的送讲。也有人說(shuō)我們不需要promises奸笤，僅僅使用異步，生成器李茫，回調(diào)等就夠了揭保。但令人高興的是，在ES6中有標(biāo)準(zhǔn)的Promise實(shí)現(xiàn)魄宏。
下面是一個(gè)簡(jiǎn)單的用setTimeout()實(shí)現(xiàn)的異步延遲加載函數(shù):

setTimeout(function(){
  console.log('Yay!');
}, 1000);

在ES6中秸侣，我們可以用promise重寫:

var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000);
}).then(function() {
  console.log('Yay!');
});

或者用ES6的箭頭函數(shù)：

var wait1000 =  new Promise((resolve, reject)=> {
  setTimeout(resolve, 1000);
}).then(()=> {
  console.log('Yay!');
});

到目前為止，代碼的行數(shù)從三行增加到五行，并沒有任何明顯的好處味榛。確實(shí)椭坚，如果我們有更多的嵌套邏輯在setTimeout()回調(diào)函數(shù)中，我們將發(fā)現(xiàn)更多好處：

setTimeout(function(){
  console.log('Yay!');
  setTimeout(function(){
    console.log('Wheeyee!');
  }, 1000)
}, 1000);

在ES6中我們可以用promises重寫：

var wait1000 =  ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)});
wait1000()
    .then(function() {
        console.log('Yay!')
        return wait1000()
    })
    .then(function() {
        console.log('Wheeyee!')
    });

還是不確信Promises 比普通回調(diào)更好搏色？其實(shí)我也不確信善茎，我認(rèn)為一旦你有回調(diào)的想法，那么就沒有必要額外增加promises的復(fù)雜性频轿。
雖然垂涯，ES6 有讓人崇拜的Promises 。Promises 是一個(gè)有利有弊的回調(diào)但是確實(shí)是一個(gè)好的特性航邢，更多詳細(xì)的信息關(guān)于promise:Introduction to ES6 Promises.

8.Block-Scoped Constructs Let and Const（塊作用域和構(gòu)造let和const）**

在ES6代碼中耕赘，你可能已經(jīng)看到那熟悉的身影l(fā)et。在ES6里let并不是一個(gè)花俏的特性膳殷，它是更復(fù)雜的操骡。Let是一種新的變量申明方式，它允許你把變量作用域控制在塊級(jí)里面赚窃。我們用大括號(hào)定義代碼塊册招，在ES5中，塊級(jí)作用域起不了任何作用：

function calculateTotalAmount (vip) {
  var amount = 0;
  if (vip) {
    var amount = 1;
  }
  { // more crazy blocks!
    var amount = 100;
    {
      var amount = 1000;
    }
  }
  return amount;
}
console.log(calculateTotalAmount(true));

結(jié)果將返回1000勒极，這真是一個(gè)bug是掰。在ES6中，我們用let限制塊級(jí)作用域河质。而var是限制函數(shù)作用域冀惭。

function calculateTotalAmount (vip) {
  var amount = 0; // probably should also be let, but you can mix var and let
  if (vip) {
    let amount = 1; // first amount is still 0
  }
  { // more crazy blocks!
    let amount = 100; // first amount is still 0
    {
      let amount = 1000; // first amount is still 0
    }
  }
  return amount;
}
 
console.log(calculateTotalAmount(true));

這個(gè)結(jié)果將會(huì)是0，因?yàn)閴K作用域中有了let掀鹅。如果（amount=1）.那么這個(gè)表達(dá)式將返回1散休。談到const，就更加容易了乐尊；它就是一個(gè)不變量戚丸，也是塊級(jí)作用域就像let一樣。下面是一個(gè)演示扔嵌，這里有一堆常量限府，它們互不影響，因?yàn)樗鼈儗儆诓煌膲K級(jí)作用域:

function calculateTotalAmount (vip) {
  const amount = 0;
  if (vip) {
    const amount = 1;
  }
  { // more crazy blocks!
    const amount = 100 ;
    {
      const amount = 1000;
    }
  }
  return amount;
}
console.log(calculateTotalAmount(true));

從我個(gè)人看來(lái)痢缎，let 和const使這個(gè)語(yǔ)言變復(fù)雜了胁勺。沒有它們的話，我們只需考慮一種方式独旷，現(xiàn)在有許多種場(chǎng)景需要考慮署穗。

9. Classes （類）in ES6

如果你喜歡面向?qū)ο缶幊蹋∣OP）寥裂，那么你將喜愛這個(gè)特性。以后寫一個(gè)類和繼承將變得跟在facebook上寫一個(gè)評(píng)論那么容易案疲。
類的創(chuàng)建和使用真是一件令人頭疼的事情在過(guò)去的ES5中封恰，因?yàn)闆]有一個(gè)關(guān)鍵字class （它被保留，但是什么也不能做）褐啡。在此之上诺舔，大量的繼承模型像pseudo classical, classical, functional 更加增加了混亂，JavaScript 之間的宗教戰(zhàn)爭(zhēng)只會(huì)更加火上澆油备畦。
用ES5寫一個(gè)類低飒，有很多種方法，這里就先不說(shuō)了《危現(xiàn)在就來(lái)看看如何用ES6寫一個(gè)類吧逸嘀。ES6沒有用函數(shù), 而是使用原型實(shí)現(xiàn)類。我們創(chuàng)建一個(gè)類baseModel 允粤，并且在這個(gè)類里定義了一個(gè)constructor 和一個(gè) getName()方法：

class baseModel {
  constructor(options, data) { // class constructor，node.js 5.6暫時(shí)不支持options = {}, data = []這樣傳參
    this.name = 'Base';
    this.url = 'http://azat.co/api';
    this.data = data;
    this.options = options;
   }
 
    getName() { // class method
        console.log(`Class name: ${this.name}`);
    }
}

注意我們對(duì)options 和data使用了默認(rèn)參數(shù)值翼岁。此外方法名也不需要加function關(guān)鍵字类垫，而且冒號(hào)(：)也不需要了。另外一個(gè)大的區(qū)別就是你不需要分配屬性this±牌拢現(xiàn)在設(shè)置一個(gè)屬性的值，只需簡(jiǎn)單的在構(gòu)造函數(shù)中分配。
AccountModel 從類baseModel 中繼承而來(lái):

class AccountModel extends baseModel {
    constructor(options, data) {

為了調(diào)用父級(jí)構(gòu)造函數(shù)兽间，可以毫不費(fèi)力的喚起super()用參數(shù)傳遞：

       super({private: true}, ['32113123123', '524214691']); //call the parent method with super
       this.name = 'Account Model';
       this.url +='/accounts/';
    }

如果你想做些更好玩的预烙，你可以把 accountData 設(shè)置成一個(gè)屬性：

    get accountsData() { //calculated attribute getter
    // ... make XHR
        return this.data;
    }
}

那么，你如何調(diào)用他們呢茴晋？它是非常容易的：

let accounts = new AccountModel(5);
accounts.getName();
console.log('Data is %s', accounts.accountsData);

結(jié)果令人驚訝陪捷，輸出是：

Class name: Account Model
Data is  32113123123,524214691

10. Modules （模塊）in ES6

眾所周知，在ES6以前JavaScript并不支持本地的模塊诺擅。人們想出了AMD市袖，RequireJS，CommonJS以及其它解決方法∷赣浚現(xiàn)在ES6中可以用模塊import 和export 操作了苍碟。
在ES5中，你可以在 <script>中直接寫可以運(yùn)行的代碼（簡(jiǎn)稱IIFE）撮执，或者一些庫(kù)像AMD微峰。然而在ES6中，你可以用export導(dǎo)入你的類抒钱。下面舉個(gè)例子蜓肆，在ES5中,module.js有port變量和getAccounts 方法:

module.exports = {
  port: 3000,
  getAccounts: function() {
    ...
  }
}

在ES5中颜凯，main.js需要依賴require(‘module’) 導(dǎo)入module.js：

var service = require('module.js');
console.log(service.port); // 3000

但在ES6中，我們將用export and import症杏。例如装获，這是我們用ES6 寫的module.js文件庫(kù)：

export var port = 3000;
export function getAccounts(url) {
  ...
}

如果用ES6來(lái)導(dǎo)入到文件main.js中，我們需用import {name} from ‘my-module’語(yǔ)法厉颤，例如：

import {port, getAccounts} from 'module';
console.log(port); // 3000

或者我們可以在main.js中把整個(gè)模塊導(dǎo)入, 并命名為 service：

import * as service from 'module';
console.log(service.port); // 3000

從我個(gè)人角度來(lái)說(shuō)穴豫，我覺得ES6模塊是讓人困惑的。但可以肯定的事逼友，它們使語(yǔ)言更加靈活了精肃。
并不是所有的瀏覽器都支持ES6模塊，所以你需要使用一些像jspm去支持ES6模塊帜乞。
更多的信息和例子關(guān)于ES6模塊司抱，請(qǐng)看 this text。不管怎樣黎烈，請(qǐng)寫模塊化的JavaScript习柠。
如何使用ES6 (Babel)
ES6已經(jīng)敲定，但并不是所有的瀏覽器都完全支持照棋，詳見：http://kangax.github.io/compat-table/es6/资溃。要使用ES6，需要一個(gè)編譯器例如：babel烈炭。你可以把它作為一個(gè)獨(dú)立的工具使用溶锭，也可以把它放在構(gòu)建中。grunt符隙，gulp和webpack中都有可以支持babel的插件趴捅。

6941baebjw1f61bokq3xbj20yb0pdq6a

$ npm install --save-dev gulp-babel

在gulpfile.js中霹疫，定義一個(gè)任務(wù)build拱绑，放入src/app.js，并且編譯它進(jìn)入構(gòu)建文件中丽蝎。

var gulp = require('gulp'),
  babel = require('gulp-babel');
gulp.task('build', function () {
  return gulp.src('src/app.js')
    .pipe(babel())
    .pipe(gulp.dest('build'));
})

Node.js and ES6

在nodejs中欺栗，你可以用構(gòu)建工具或者獨(dú)立的Babel模塊 babel-core 來(lái)編譯你的Node.js文件。安裝如下：

$ npm install --save-dev babel-core

然后在node.js中征峦，你可以調(diào)用這個(gè)函數(shù)：

require("babel-core").transform(ES5Code, options);

ES6總結(jié)

這里還有許多ES6的其它特性你可能會(huì)使用到迟几，排名不分先后：
1、全新的Math, Number, String, Array 和 Object 方法
2栏笆、二進(jìn)制和八進(jìn)制數(shù)據(jù)類型
3类腮、默認(rèn)參數(shù)不定參數(shù)擴(kuò)展運(yùn)算符
4、Symbols符號(hào)
5蛉加、tail調(diào)用
6蚜枢、Generators (生成器)
7缸逃、New data structures like Map and Set(新的數(shù)據(jù)構(gòu)造對(duì)像MAP和set)
參考文獻(xiàn)：
ES6 Cheatsheet (FREE PDF)
http://webapplog.com/ES6/comment-page-1/
Understanding ECMAScript 6?by Nicolas Zakas book
http://ES6-features.org/#DateTimeFormatting
IIFE：立刻運(yùn)行的函數(shù)表達(dá)式

推薦一下我的公眾號(hào): 【 geekjc 】，微信號(hào): 【 c8706288 】一起學(xué)習(xí)交流編程知識(shí)厂抽，分享經(jīng)驗(yàn)需频，各種有趣的事。

tuiguang.png

推薦電子書

前端常見面試題匯總