個(gè)人主觀意見(jiàn)整理es6中常用十個(gè)特性：
1帚戳、默認(rèn)參數(shù)
2玷或、模版表達(dá)式
3、多行字符串
4销斟、解構(gòu)賦值
5、改進(jìn)的對(duì)象表達(dá)式
6椒舵、箭頭函數(shù) =&>
7蚂踊、Promise
8、塊級(jí)作用域的let和const
9笔宿、類
10犁钟、模塊化
首先簡(jiǎn)單的了解一下JavaScript的發(fā)展歷史就是它的時(shí)間線：
1、1995年：JavaScript以LiveScript之名誕生
2泼橘、1997年：ECMAScript標(biāo)準(zhǔn)確立
3涝动、1999年：ES3發(fā)布，IE5非常生氣
4炬灭、2000年-2005年：XMLHttpRequest醋粟，熟知為AJAX，在如Outlook Web Access(2002)重归、Oddpost(2002)米愿、Gmail(2004)、Google Maps(2005)中得到了廣泛的應(yīng)用
5鼻吮、2009年：ES5發(fā)布（這是我們目前用的最多的版本）育苟，帶來(lái)了forEach / Object.keys / Object.create（特地為Douglas Crockford所造，JSON標(biāo)準(zhǔn)創(chuàng)建者） 椎木，還有JSON標(biāo)準(zhǔn)违柏。
6博烂、2015：ES6/ECMAScript2015出現(xiàn)
了解完歷史我們來(lái)進(jìn)入正題：
1. ES6中的默認(rèn)參數(shù)
我們以前要這樣子來(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';
……
}
這樣做一直都沒(méi)什么問(wèn)題，直到參數(shù)的值為0漱竖，因?yàn)?在JavaScript中算是false值禽篱，它會(huì)直接變成后面硬編碼的值而不是0本身。當(dāng)然了闲孤，誰(shuí)要用0來(lái)傳值白患丁（諷刺臉）？所以我們也忽略了這個(gè)瑕疵讼积，沿用了這個(gè)邏輯肥照，否則的話只能…..沒(méi)有否則！在ES6中勤众，我們可以把這些默認(rèn)值直接放在函數(shù)簽名中舆绎。
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
……
}
類似于Ruby的語(yǔ)法
2. ES6中的模版表達(dá)式
在其它語(yǔ)言中，使用模板和插入值是在字符串里面輸出變量的一種方式们颜。因此吕朵，在ES5，我們可以這樣組合一個(gè)字符串：
var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;
在ES6中我們有了新語(yǔ)法窥突，在反引號(hào)包裹的字符串中努溃，使用${NAME}語(yǔ)法來(lái)表示模板字符:
var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;
3. 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.解構(gòu)賦值
解構(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');
5.增強(qiáng)的對(duì)象字面量
使用對(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 會(huì)有如下所示的 proto 屬性：
為了方便舉例，我們將考慮它們的相似處改衩。所以在ES6的對(duì)象文本中岖常，既可以直接分配getAccounts: getAccounts,也可以只需用一個(gè)getAccounts，此外葫督，我們?cè)谶@里通過(guò)proto（并不是通過(guò)’proto’）設(shè)置屬性竭鞍，如下所示：
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)
ES6對(duì)象文本是一個(gè)很大的進(jìn)步對(duì)于舊版的對(duì)象文本來(lái)說(shuō)偎快。
6.箭頭函數(shù) ES6
這或許是我最想要的一個(gè)特性冯乘，我愛(ài) CoffeeScript 就是因?yàn)樗峙值募^(=&>相對(duì)于-&>)，現(xiàn)在ES6中也有了晒夹。這些箭頭最神奇的地方在于他會(huì)讓你寫正確的代碼裆馒。比如，this在上下文和函數(shù)中的值應(yīng)當(dāng)是相同的丐怯，它不會(huì)變化喷好，通常變化的原因都是因?yàn)槟銊?chuàng)建了閉包。
有了箭頭函數(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)匀槐Ａ袅艘郧暗墓δ堋?/p>
下面這是一個(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. ES6中的Promise
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ù)從三行增加到五行艳汽，并沒(méi)有任何明顯的好處。確實(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)的想法甚牲，那么就沒(méi)有必要額外增加promises的復(fù)雜性。
雖然蝶柿，ES6 有讓人崇拜的Promises 丈钙。Promises 是一個(gè)有利有弊的回調(diào)但是確實(shí)是一個(gè)好的特性，更多詳細(xì)的信息關(guān)于promise:Introduction to ES6 Promises.
8.塊作用域和構(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ù)雜了。沒(méi)有它們的話缝呕，我們只需考慮一種方式澳窑，現(xiàn)在有許多種場(chǎng)景需要考慮。
9. ES6中的類
如果你喜歡面向?qū)ο缶幊坦┏＃敲茨銜?huì)特別喜歡這個(gè)特性摊聋。他讓你編寫和繼承類時(shí)就跟在Facebook上發(fā)一個(gè)評(píng)論這么簡(jiǎn)單。
在ES5中栈暇，因?yàn)闆](méi)有class關(guān)鍵字（但它是毫無(wú)作用的保留字）麻裁，類的創(chuàng)建和使用是讓人十分痛苦的事情。更慘的是源祈，很多偽類的實(shí)現(xiàn)像pseude-classical, classical, functional讓人越來(lái)越摸不著頭腦煎源，為JavaScript的信仰戰(zhàn)爭(zhēng)火上澆油。
我不會(huì)給你展示在ES5中怎么去編寫一個(gè)類（是啦是啦從對(duì)象可以衍生出來(lái)其他的類和對(duì)象）香缺，因?yàn)橛刑喾椒ㄈネ瓿墒窒Ｎ覀冎苯涌碋S6的示例，告訴你ES6的類會(huì)用prototype來(lái)實(shí)現(xiàn)而不是function⊥颊牛現(xiàn)在有一個(gè)baseModel類锋拖，其中我們可以定義構(gòu)造函數(shù)和getName()方法。
class baseModel {
constructor(options = {}, data = []) { // class constructor
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. 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ō)快骗，我覺(jué)得這樣的模塊化有些搞不懂。確實(shí)塔次，這樣會(huì)更傳神一些 方篮。但是Node.js中的模塊不會(huì)馬上就改過(guò)來(lái)，瀏覽器和服務(wù)器的代碼最好是用同樣的標(biāo)準(zhǔn)励负，所以目前我還是會(huì)堅(jiān)持CommonJS/Node.js的方式恭取。
目前來(lái)說(shuō)瀏覽器對(duì)ES6的支持還遙遙無(wú)期（本文寫作時(shí)），所以你需要一些像jspm這樣的工具來(lái)用ES6的模塊熄守。
想要了解更多ES6中的模塊化和例子的話蜈垮，來(lái)看這篇文章，不管怎么說(shuō)裕照，寫現(xiàn)代化的JavaScript吧攒发！
怎么使用ES6
ES6標(biāo)準(zhǔn)已經(jīng)敲定，但還未被所有瀏覽器支持（Firefox的ES6功能一覽）晋南，如果想馬上就用上ES6惠猿，需要一個(gè)像Babel這樣的編譯器。你可以把他當(dāng)獨(dú)立工具用负间，也可以將他集成到構(gòu)建系統(tǒng)里偶妖，Babel對(duì)Gulp，Grunt和Webpack都有對(duì)應(yīng)的插件政溃。
安裝Gulp插件示例：
$ npm install --save-dev gulp-babel
在gulpfile.js中趾访，定義這么一個(gè)任務(wù)，將src目錄下的app.js文件編譯到build目錄下：
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和ES6
對(duì)于Node.js董虱，你可以用構(gòu)建工具或者直接用獨(dú)立模塊babel-core：
$ 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)
和有些人吃了一片薯片就一發(fā)不可收拾的人一樣（再來(lái)一片嘛就一片），對(duì)于那些停不下來(lái)想要知道關(guān)于更多ES6相關(guān)信息的成績(jī)優(yōu)秀的同學(xué)昏滴，我準(zhǔn)備了擴(kuò)展閱讀：
