你可能已經(jīng)聽說過ECMAScript 6(簡(jiǎn)稱 ES6)了。ES6 是 Javascript 的下一個(gè)版本畔勤,它有很多很棒的新特性芽丹。這些特性復(fù)雜程度各不相同,但對(duì)于簡(jiǎn)單的腳本和復(fù)雜的應(yīng)用都很有用跛蛋。在本文中,我們將討論一些精心挑選的 ES6 特性痊硕,這些特性可以用于你日常的 Javascript 編碼中赊级。
請(qǐng)注意,當(dāng)前瀏覽器已經(jīng)全面展開對(duì)這些 ES6 新特性的支持岔绸,盡管目前的支持程度還有所差異理逊。如果你需要支持一些缺少很多 ES6 特性的舊版瀏覽器橡伞,我將介紹一些當(dāng)前可以幫助你開始使用 ES6 的解決方案。
文中大多數(shù)代碼示例都帶有“運(yùn)行代碼”鏈接晋被,你可以查看代碼并運(yùn)行它兑徘。
變量
LET
你習(xí)慣于用var聲明變量。現(xiàn)在你也可以用let了羡洛。兩者微妙的差別在于作用域挂脑。var聲明的變量作用域?yàn)榘鼑暮瘮?shù),而let聲明的變量作用域僅在它所在的塊中翘县。
if(true){
letx=1;
}
console.log(x);// undefined
這樣使得代碼更加干凈谴分,減少滯留的變量锈麸。看看以下經(jīng)典的數(shù)組遍歷:
for(leti=0,l=list.length;i<l;i++){
// do something with list[i]
}
console.log(i);// undefined
舉個(gè)例子牺蹄,通常情況下忘伞,我們?cè)谕蛔饔糜蚶锸褂米兞縥來完成另一個(gè)遍歷。但是沙兰,現(xiàn)在有了let氓奈,可以安全地再一次聲明i變量。因?yàn)樗辉诒宦暶鞯膲K中有效鼎天。
CONST
還有另一個(gè)用于聲明塊作用域變量的方法舀奶。使用const,你可以聲明一個(gè)值的只讀引用斋射。必須直接給一個(gè)變量賦值育勺。如果嘗試修改變量或者沒有立即給變量賦值,都將報(bào)錯(cuò):
constMY_CONSTANT=1;
MY_CONSTANT=2// Error
constSOME_CONST;// Error
注意罗岖,對(duì)象的屬性或數(shù)組成員還是可以改變的涧至。
constMY_OBJECT={some:1};
MY_OBJECT.some='body';// Cool
箭頭函數(shù)
箭頭函數(shù)為 Javascript 語言增色不少。它使得代碼更簡(jiǎn)潔桑包。我們?cè)缭绲卦诒疚闹薪榻B箭頭函數(shù)南蓬,這樣就可以在后面的示例中加以利用了。以下代碼片段是箭頭函數(shù)和我們熟悉的 ES5 版本的寫法:
letbooks=[{title:'X',price:10},{title:'Y',price:15}];
lettitles=books.map(item=>item.title);
// ES5 equivalent:
vartitles=books.map(function(item){
returnitem.title;
});
如果我們觀察箭頭函數(shù)的語法哑了,會(huì)發(fā)現(xiàn)其中并沒有出現(xiàn)function關(guān)鍵詞赘方。只保留零或多個(gè)參數(shù),“胖箭頭”(=>)和函數(shù)表達(dá)式弱左。return聲明被隱式加入蒜焊。
帶有零或多個(gè)參數(shù)時(shí),必須使用括號(hào):
// No arguments
books.map(()=>1);// [1, 1]
// Multiple arguments
[1,2].map((n,index)=>n*index);// [0, 2]
如果需要寫更多的邏輯或更多的空格科贬,可以把函數(shù)表達(dá)式放在({...})塊中泳梆。
let result=[1,2,3,4,5].map(n=>{
n=n%3;
return n;
});
箭頭函數(shù)不單只是為了輸入更少的字符鳖悠,它們的表現(xiàn)也和一般函數(shù)不同。它繼承了當(dāng)前上下文的this和arguments优妙。這就意味著乘综,你可以避免寫var that = this這樣丑陋的代碼,也不需要把函數(shù)綁定到正確的上下文了套硼。舉例如下(注意對(duì)比this.title和 ES5 版本的that.title的不同):
let book={
title:'X',
sellers:['A','B'],
printSellers(){
? ? this.sellers.forEach(seller=>console.log(seller+' sells '+this.title));
}
}
// ES5 equivalent:
var book={
title:'X',
sellers:['A','B'],
printSellers:function(){
var that=this;
this.sellers.forEach(function(seller){
console.log(seller+' sells '+that.title)
})
}
}
字符串
方法
幾個(gè)方便的方法被添加到String的原型中卡辰。其中大多數(shù)用于簡(jiǎn)化需要用indexOf()方法來解決的問題的復(fù)雜度,并達(dá)到同樣的效果:
'my string'.startsWith('my');//true
'my string'.endsWith('my');// false
'my string'.includes('str');// true
很簡(jiǎn)單但是很有效邪意。添加了另外一個(gè)方便的用于創(chuàng)建重復(fù)字符串的方法:
'my '.repeat(3);// 'my my my '
模板字符串
模板字符串提供一個(gè)簡(jiǎn)潔的方式來實(shí)現(xiàn)字符串插值九妈。你可能已經(jīng)對(duì)這種語法很熟悉了;它基于美元符號(hào)和花括號(hào)${..}雾鬼。模板字符串置于引號(hào)之中萌朱。以下是快速示例:
let name = 'John',
apples = 5,
pears = 7,
bananas = function(){ return 3 ;}
console.log(` This is ${ name }.`);
console.log(` He carries ${ apples } apples , ${ pears }pears , and ${ bananas () } bananas .`);
// ES5 equivalent:
console.log('He carries '+apples+' apples, '+pears+' pears, and '+bananas()+' bananas.');
以上形式對(duì)比 ES5 僅僅是便于字符串拼接策菜。事實(shí)上晶疼,模板字符串還可以用于多行字符串。記住空格也是字符串的一部分又憨。
let x = `1...
2...
3lines long!`; ?// Yay
// ES5 equivalents:
var x = "1...n"+
"2...n"+
"3 lines long!";
var x = "1...n2...n3 lines long!";
數(shù)組
Array對(duì)象增加了一些新的靜態(tài)方法翠霍,Array原型上也增加了一些新方法。
首先蠢莺,Array.from從類數(shù)組和可遍歷對(duì)象中創(chuàng)建Array的實(shí)例寒匙。類數(shù)組對(duì)象示例包括:
函數(shù)中的arguments;
由document.getElementByTagName()返回的nodeList躏将;
新增加的Map和Set數(shù)據(jù)結(jié)構(gòu)蒋情。
let itemElements = document.querySelectorAll('.items');
let items=Array.from(itemElements);
items.forEach( function (element){
console.log(element.nodeType)
});
// A workaround often used in ES5:
let items=Array.prototype.slice.call(itemElements);
在上面的例子中,可以看到items數(shù)組擁有forEach方法耸携,該方法是itemElements集合所不具備的棵癣。
Array.from的一個(gè)有趣的特性是它的第二個(gè)可選參數(shù)mapFunction。該參數(shù)允許你通過一次單獨(dú)調(diào)用創(chuàng)建一個(gè)新的映射數(shù)組夺衍。
let navElements=document.querySelectorAll('nav li');
let navTitles=Array.from(navElements,el=>el.textContent);
然后狈谊,我們可以使用Array.of方法,該方法的表現(xiàn)很像Array構(gòu)造函數(shù)沟沙。它適合只傳遞一個(gè)參數(shù)的情況河劝。因此Array.of是new Array()的更優(yōu)選擇。然而矛紫,更多的情況下赎瞎,你會(huì)想使用數(shù)組字面量。
let x=newArray(3);// [undefined, undefined, undefined]
let y=Array.of(8);// [8]
let z=[1,2,3];// Array literal
最后但同樣重要的颊咬,有幾個(gè)方法被添加到Array的原型上务甥。我想find方法將會(huì)很受 Javascript 開發(fā)者歡迎牡辽。
find返回回調(diào)返回true的第一個(gè)元素。
findIndex返回回調(diào)函數(shù)返回true的第一個(gè)元素的下標(biāo)敞临。
fill用所給參數(shù)“覆蓋”數(shù)組的元素态辛。
[5,1,10,8].find(n=>n===10)// 10
[5,1,10,8].findIndex(n=>n===10)// 2
[0,0,0].fill(7)// [7, 7, 7]
[0,0,0,0,0].fill(7,1,3)// [0, 7, 7, 7, 0]
Math
Math對(duì)象新增了幾個(gè)方法。
Math.sign返回?cái)?shù)字的符號(hào)挺尿,結(jié)果為1奏黑、-1或0。
Math.trunc返回?zé)o小數(shù)位的數(shù)字编矾。
Math.cbrt返回?cái)?shù)字的立方根熟史。
Math.sign(5);// 1
Math.sign(-9);// -1
Math.trunc(5.9);// 5
Math.trunc(5.123);// 5
Math.cbrt(64);// 4
如果你想學(xué)習(xí)更多ES6 中的 number 和 math 新特性, Dr. Axel Rauschmayer將為你解答窄俏。
擴(kuò)展操作符
擴(kuò)展操作符(...)這個(gè)語法用于特定地方擴(kuò)展元素非常方便蹂匹,例如函數(shù)調(diào)用中的參數(shù)。讓你了解它們用途的最好方法就是舉例子了裆操。
首先怒详,我們看看如何在一個(gè)另數(shù)組中擴(kuò)展一個(gè)數(shù)組的元素炉媒。
let values=[1,2,4];
let some=[...values,8];// [1, 2, 4, 8]
let more=[...values,8,...values];// [1, 2, 4, 8, 1, 2, 4]
// ES5 equivalent:
let values=[1,2,4];
// Iterate, push, sweat, repeat...
// Iterate, push, sweat, repeat...
擴(kuò)展語法在傳參數(shù)調(diào)用函數(shù)時(shí)也非常有用:
let values=[1,2,4];
doSomething(...values);
functiondoSomething(x,y,z){
// x = 1, y = 2, z = 4
}
// ES5 equivalent:
doSomething.apply(null,values);
正如你所看到的踪区,該語法讓我們免去通常使用fn.apply()的麻煩。它非常靈活吊骤,因?yàn)閿U(kuò)展操作符可以用在參數(shù)列表中的任意位置缎岗。這意味著以下調(diào)用方式會(huì)產(chǎn)生一樣的結(jié)果:
let values=[2,4];
doSomething(1,...values);
我們已經(jīng)把擴(kuò)展操作符應(yīng)用在數(shù)組和參數(shù)中。事實(shí)上白粉,它可以用在所有的可遍歷對(duì)象中传泊,例如一個(gè)Node List:
let form=document.querySelector('#my-form'),
inputs=form.querySelectorAll('input'),
selects=form.querySelectorAll('select');
let all The Things=[form,...inputs,...selects];
現(xiàn)在,all The Things是一個(gè)包含節(jié)點(diǎn)鸭巴、子節(jié)點(diǎn)和子節(jié)點(diǎn)的二維數(shù)組眷细。
解構(gòu)
解構(gòu)提供了一個(gè)方便地從對(duì)象或數(shù)組中提取數(shù)據(jù)的方法。對(duì)于初學(xué)者鹃祖,請(qǐng)看以下數(shù)組示例:
let [x , y] = [ 1 , 2 ];// x = 1, y = 2
// ES5 equivalent:
var arr = [1,2];
var x = arr[0];
vary = arr[1];
使用這個(gè)語法溪椎,可以一次性給多個(gè)變量賦值。一個(gè)很好的附加用處是可以很簡(jiǎn)單地交換變量值:
let x = 1,
? ? y = 2;
[x , y] = [y , x];// x = 2, y = 1
解構(gòu)也可以用于對(duì)象恬口。注意對(duì)象中必須存在對(duì)應(yīng)的鍵:
let obj = { x :1 , y : 2 };
let { x , y } = obj;// x = 1, y = 2
你也可以使用該機(jī)制來修改變量名:
let obj = { x : 1 , y : 2 };
let { x :a , y :b} = obj;// a = 1, b = 2
另一個(gè)有趣的模式是模擬多個(gè)返回值:
function doSomething () {
? ? ? ? ? ? return [ 1 , 2 ]
}
let [x,y] = doSomething() ;// x = 1, y = 2
解構(gòu)可以用來為參數(shù)對(duì)象賦默認(rèn)值校读。通過對(duì)象字面量,可以模擬命名參數(shù):
function doSomething ( { y = 1, z = 0 } ){
console.log (y , z);
}
doSomething ( { y : 2 } );
參數(shù)
默認(rèn)值
在 ES6 中祖能,可以定義函數(shù)的參數(shù)默認(rèn)值歉秫。語法如下:
function doSomething (x, y = 2){
? ? ? return x * y;
}
doSomething (5) ;// 10
doSomething (5,undefined); // 10
doSomething (5,3) ; // 15
看起來很簡(jiǎn)潔,對(duì)吧养铸? 我肯定你之前在 ES5 中曾經(jīng)需要給某些參數(shù)賦默認(rèn)值:
function doSomething (x,y){
? ? ? y = y === undefined ? 2 : y;
? ?return x * y;
}
傳遞undefined或不傳參數(shù)時(shí)都會(huì)觸發(fā)參數(shù)使用默認(rèn)值雁芙。
REST參數(shù)
我們已經(jīng)學(xué)習(xí)了省略號(hào)操作符轧膘。剩余參數(shù)和它很類似。它同樣是使用...語法却特,允許你把末尾的參數(shù)保存在數(shù)組中:
function doSomething (x , ...remaining){
? ? ? ? ? return x * remaining.length;
}
doSomething (5,0,0,0);// 15
模塊
模塊當(dāng)然是一個(gè)受歡迎的 Javascript 語言新功能扶供。我想僅僅是這個(gè)主要特性就值得我們投入到 ES6 中來。
當(dāng)前任何重要的 Javascript 項(xiàng)目都使用某種模塊系統(tǒng) —— 可能是“展示模塊模式”或其他 AMD 或 CommonJS 擴(kuò)展形式的東西裂明。然而椿浓,瀏覽器并沒有任何模塊系統(tǒng)特性。為了實(shí)現(xiàn) AMD 或 CommonJS闽晦,你通常需要一個(gè)構(gòu)建步驟或加載器扳碍。解決這個(gè)問題的工具包括 RequireJS、Browserify 和 WebPack仙蛉。
ES6 規(guī)范包含模塊化的新語法和加載器笋敞。如果你未來想使用模塊,應(yīng)該使用這個(gè)語法≤瘢現(xiàn)代構(gòu)建工具支持這種形式(可能通過插件)夯巷,所以你可以放心使用。(不用擔(dān)心 —— 我們將在后面的“轉(zhuǎn)譯”章節(jié)中討論)
在 ES6 的模塊語法中哀墓。模塊設(shè)計(jì)圍繞export和import關(guān)鍵詞〕貌停現(xiàn)在讓我們看一個(gè)包含兩個(gè)模塊的例子:
// lib/math.js
export function sum(x,y){
? ? ? ? ? ? ? return x+y;
}
export var pi=3.141593;
// app.js
import{sum, pi}from "lib/math";
console.log('2π = '+sum(pi, pi));
正如你所見,可以存在多個(gè)export聲明篮绰。每一個(gè)都要明確地指明輸出值的類型(本例中的function和var)后雷。
本例中的import聲明使用一種語法(類似解構(gòu))來明確定義被導(dǎo)入的內(nèi)容》透鳎可以使用*通配符臀突,結(jié)合as關(guān)鍵詞給模塊提供一個(gè)本地名稱,把模塊當(dāng)成一個(gè)整體導(dǎo)入贾漏。
// app.js
import * as math from"lib/math";
console.log('2π = '+math.sum(math.pi, math.pi));
模塊系統(tǒng)有一個(gè)default輸出候学。它可以是一個(gè)函數(shù)。只需要提供一個(gè)本地名稱就可以導(dǎo)入這個(gè)默認(rèn)值(即無解構(gòu)):
// lib/my-fn.js
export default function(){
console.log('echo echo');
}
// app.js
import doSomething from 'lib/my-fn';
doSomething();
請(qǐng)注意import聲明是同步的纵散,但是模塊代碼需在所有依賴加載完后才會(huì)運(yùn)行梳码。
類
類是 ES6 中備受熱議的一個(gè)特性。一部分人認(rèn)為它不符合 Javascript 的原型特性困食,另一部分人認(rèn)為類可以降低從其他語言轉(zhuǎn)過來的入門門檻边翁,并幫助人們構(gòu)建大規(guī)模應(yīng)用。不管怎樣硕盹,它是 ES6 的一部分符匾。這里我們快速介紹一下。
類的創(chuàng)建圍繞class和constructor關(guān)鍵詞瘩例。以下是個(gè)簡(jiǎn)短的示例:
class Vehicle{
? ?constructor(name){
? ? ? ? ? ?this.name = name;
? ? ? ? ? this.kind = 'vehicle';
? ?}
getName(){
? ?return this.name;
? ?}
}
// Create an instance
let myVehicle = new Vehicle('rocky');
注意類的定義不是一般的對(duì)象啊胶,因此甸各,類的成員間沒有逗號(hào)。
創(chuàng)造一個(gè)類的對(duì)象時(shí)焰坪,需要使用new關(guān)鍵詞趣倾。繼承一個(gè)基類時(shí),使用extends:
class Car extends Vehicle{
? ? ?constructor(name){
? ? ? ? super(name);
? ? ? ? ? this.kind='car'
? ? ? ?}
}
let myCar = newCar('bumpy');
myCar instanceof Car;// true
myCar instanceof Vehicle;//true
從衍生類中某饰,你可以使用從任何構(gòu)造函數(shù)或方法中使用super來獲取它的基類:
使用super()調(diào)用父類構(gòu)造函數(shù)儒恋。
調(diào)用其它成員,舉個(gè)例子黔漂,使用super.getName()诫尽。
還有更多關(guān)于類的內(nèi)容。如果你想深入了解炬守,我推薦 Dr.Axel Rauschmayer 的《Classes in ECAMScript 6》
記號(hào)
記號(hào)是一個(gè)新的原生數(shù)據(jù)類型牧嫉,像Number和String一樣。你可以使用記號(hào)為對(duì)象屬性創(chuàng)建唯一標(biāo)識(shí)或創(chuàng)建唯一的常量减途。
const MY_CONSTANT = Symbol();
let obj = {};
obj[MY_CONSTANT] = 1;
注意通過記號(hào)產(chǎn)生的鍵值對(duì)不能通過Object.getOwnPropertyNames()獲得酣藻,在for...in遍歷、Object.keys()鳍置、JSON.stringify()中均不可見辽剧。這是與基于字符串的鍵相反的。你可以通過Object.getOwnPropertySymbols()獲取一個(gè)對(duì)象的記號(hào)數(shù)組墓捻。
記號(hào)與const配合很合適抖仅,因?yàn)樗鼈兌加胁豢筛淖兊奶匦浴?/p>
const CHINESE = Symbol();
const ENGLISH = Symbol();
const SPANISH = Symbol();
switch(language){
? ? case CHINESE:
? ? ? ? ?break;
? ? ?case ENGLISH:
? ? ? ? ?//
? ? ? ? break;
? ? ? case SPANISH:
? ? ? ? ?//
? ? ? ? break;
? ? ? ? default:
? ? ? ? ? ? ?//
? ? ? ? ? ?break;
}
你可以為 symbol 添加描述坊夫。雖然不可以通過描述獲取 symbol砖第,但是可用于代碼調(diào)試。
const CONST_1 = Symbol('my symbol');
const CONST_2 = Symbol('my symbol');
typeofCONST_1 === 'symbol';// true
CONST_1 === CONST_2;// false
想學(xué)習(xí)更多關(guān)于 symbols 的內(nèi)容嗎环凿?Mozilla 開發(fā)者網(wǎng)絡(luò)有一個(gè)關(guān)于該新的symbol primitive的文章梧兼。
轉(zhuǎn)譯
我們現(xiàn)在可以用 ES6 來寫代碼了。正如介紹中提到的智听,瀏覽器對(duì) ES6 特性的支持尚不廣泛羽杰,且各瀏覽器也各不相同。很有可能你寫的的代碼在用戶的瀏覽器中不能完全解析到推。這就是我們?yōu)槭裁葱枰汛a轉(zhuǎn)換成能在當(dāng)前的任何瀏覽器中良好運(yùn)行的舊版本 Javascript(ES5) 考赛。這種轉(zhuǎn)換通常稱為“轉(zhuǎn)譯”。我們必須在應(yīng)用中這么做莉测,直到所有我們想兼容的瀏覽器都能運(yùn)行 ES6 為止颜骤。
入門
轉(zhuǎn)譯代碼并不難。你可以通過命令行直接轉(zhuǎn)譯代碼捣卤,也可以把它作為 Grunt 或 Gulp 之類的任務(wù)管理器的插件包含進(jìn)來忍抽。有很多轉(zhuǎn)譯解決方案八孝,包括 Babel,Traceur 和 TypeScript鸠项。例如干跛, 通過 Babel(之前的 “6to5”)開始使用 ES6 的多種方式。大多數(shù) ES6 特性供你自由使用祟绊。
既然你對(duì) ES6 充滿熱情和期待楼入,為什么不開始使用它呢。根據(jù)你想使用的特性和需要兼容的瀏覽器或環(huán)境(比如 Node.js)牧抽,你可能需要在工作流中引入轉(zhuǎn)譯器浅辙。如果你確定要使用它們,文件監(jiān)聽器和瀏覽器動(dòng)態(tài)刷新器可以使你的編碼體驗(yàn)更加流暢阎姥。
如果你是從零開始记舆,你可能只想通過命令行轉(zhuǎn)譯代碼(可以從Babel CLI documentation查看示例)。如果你已經(jīng)使用任務(wù)運(yùn)行器呼巴,如 Grunt 或 Gulp泽腮,你可以添加類似gulp-babel或Webpack babel-loader的插件。對(duì)于 Grunt衣赶,可使用grunt-babel和很多其他ES6 相關(guān)的插件诊赊。Browserify 的用戶可能會(huì)想看看babelify。
大多數(shù)特性可以被轉(zhuǎn)換成兼容 ES5 的代碼且開銷很小府瞄。其他的特性則需要額外處理(可由轉(zhuǎn)譯器提供)碧磅,可能有性能損失。如果想把玩一下 ES6 并查看轉(zhuǎn)譯后的代碼的樣子遵馆,可以使用各種交互環(huán)境(也就是 REPL):
ScratchJS(Chrome 擴(kuò)展)
注意 TypeScript 不完全是一個(gè)轉(zhuǎn)譯器鲸郊。它是一個(gè)類型化的 Javascript 超集,編譯成 Javascript 代碼货邓。在其它特性中秆撮,它支持很多 ES6 特性,很像其他編譯器换况。
所以职辨,我究竟可以用什么?
總的來說戈二,部分 ES6 特性幾乎是可以“免費(fèi)”使用的舒裤,比如模塊,箭頭函數(shù)觉吭,剩余參數(shù)和類腾供。這些特性只需很小的開銷就可以被轉(zhuǎn)譯成 ES5 。Array、String和Math對(duì)象和原型的附加方法(如Array.from()和"it".startsWith("you"))需要所謂的“polyfills”台腥。Polyfills 是瀏覽器未原生支持的功能的臨時(shí)補(bǔ)充宏赘。你可以先加載 profill,然后你的代碼就可以在瀏覽器中運(yùn)行黎侈,仿佛瀏覽器有這個(gè)功能一樣察署。Babel 和 Traceur 都提供這種 polyfills。
可在Kangax 的ES6 兼容性表格中查看轉(zhuǎn)譯器和瀏覽器支持的 ES6 特性的完整概述峻汉。在寫本文時(shí)贴汪,最新的瀏覽器已經(jīng)支持 55% 到 70% 以上 ES6 特性了,看到這個(gè)真是鼓舞人心啊休吠。Microsoft Edge扳埂、Google Chrome 和 Mozilla 的 Firefox 已經(jīng)在這方面相互競(jìng)爭(zhēng)了,這對(duì) web 技術(shù)總體來說是非常好的瘤礁。
就個(gè)人而言阳懂,可以輕松地使用模塊、箭頭函數(shù)和剩余參數(shù)之類的 ES6 新特性對(duì)于我的代碼是一個(gè)極大的提高柜思,是生產(chǎn)力的解放岩调。既然我已經(jīng)習(xí)慣了寫 ES6 代碼并轉(zhuǎn)譯成 ES5,隨著時(shí)間的推移赡盘,更多的 ES6 的好處將會(huì)自然顯現(xiàn)号枕。
接下來呢?
一旦你安裝了轉(zhuǎn)譯器陨享,你可能新從let和箭頭函數(shù)之類的“小”特性開始使用葱淳。記住原本就是用 ES5 寫的代碼將不會(huì)被轉(zhuǎn)譯器轉(zhuǎn)譯。當(dāng)你使用 ES6 來提高你的代碼抛姑,并且喜歡它時(shí)赞厕,你可以逐漸往你的代碼中添加更多的 ES6 特性⊥窘洌或者把部分代碼轉(zhuǎn)換成新模塊或類語法坑傅。我保證這樣會(huì)很爽僵驰!
ES6 的內(nèi)容比本文中所涉及的多得多喷斋。未涉及的特性包括Map、Set蒜茴、標(biāo)簽?zāi)0遄址亲Α⑸善鳌roxy和Promise粉私。讓我知道你是否希望下篇文章涉及這些特性顽腾。不管怎樣,我很高興推薦 Axel Rauschmayer 博士寫的覆蓋所有 ES6 特性的《Exploring ES6》供深入研究。
結(jié)語
當(dāng)瀏覽器不斷添加新特性時(shí)抄肖, 通過使用轉(zhuǎn)譯器久信,你的所有代碼被有效地“鎖定”到 ES5 。所以漓摩,就算瀏覽器完全支持了某一個(gè) ES6 特性裙士,兼容 ES5 的版本將被使用,可能會(huì)性能更差管毙。你可以指望在某個(gè)點(diǎn)(在當(dāng)時(shí)你需要兼容的瀏覽器和環(huán)境)上所有的 ES6 特性最終被支持腿椎。到那時(shí),我們需要管理它們夭咬,選擇性地防止 ES6 特性轉(zhuǎn)譯成 ES5啃炸,以減少性能開銷∽慷妫考慮這個(gè)因素南用,判斷當(dāng)前是否是開始使用(部分)ES6 的時(shí)候。部分公司認(rèn)為是這樣掏湾。