ES6

你可能已經(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;

});

運(yùn)行代碼

如果我們觀察箭頭函數(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;

});

運(yù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)

})

}

}

運(yùn)行代碼

字符串

方法

幾個(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.');

運(yùn)行代碼

以上形式對(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!";

運(yùn)行代碼

數(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);

運(yùn)行代碼

在上面的例子中,可以看到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);

運(yùn)行代碼

然后狈谊,我們可以使用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...

運(yùn)行代碼

擴(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);

運(yùn)行代碼

正如你所看到的踪区,該語法讓我們免去通常使用fn.apply()的麻煩。它非常靈活吊骤,因?yàn)閿U(kuò)展操作符可以用在參數(shù)列表中的任意位置缎岗。這意味著以下調(diào)用方式會(huì)產(chǎn)生一樣的結(jié)果:

let values=[2,4];

doSomething(1,...values);

運(yùn)行代碼

我們已經(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];

運(yùn)行代碼

現(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

運(yùn)行代碼

解構(gòu)也可以用于對(duì)象恬口。注意對(duì)象中必須存在對(duì)應(yīng)的鍵:

let obj = { x :1 , y : 2 };

let { x , y } = obj;// x = 1, y = 2

運(yùn)行代碼

你也可以使用該機(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

運(yùn)行代碼

解構(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

運(yùn)行代碼

看起來很簡(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

運(yùn)行代碼

模塊

模塊當(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');

運(yùn)行代碼

注意類的定義不是一般的對(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

運(yùn)行代碼

從衍生類中某饰,你可以使用從任何構(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-babelWebpack babel-loader的插件。對(duì)于 Grunt衣赶,可使用grunt-babel和很多其他ES6 相關(guān)的插件诊赊。Browserify 的用戶可能會(huì)想看看babelify

大多數(shù)特性可以被轉(zhuǎn)換成兼容 ES5 的代碼且開銷很小府瞄。其他的特性則需要額外處理(可由轉(zhuǎn)譯器提供)碧磅,可能有性能損失。如果想把玩一下 ES6 并查看轉(zhuǎn)譯后的代碼的樣子遵馆,可以使用各種交互環(huán)境(也就是 REPL):

Traceur:網(wǎng)站REPL

Babel:網(wǎng)站REPL

TypeScript:網(wǎng)站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)為是這樣掏湾。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末训枢,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子忘巧,更是在濱河造成了極大的恐慌恒界,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,723評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件砚嘴,死亡現(xiàn)場(chǎng)離奇詭異十酣,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)际长,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門耸采,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人工育,你說我怎么就攤上這事虾宇。” “怎么了如绸?”我有些...
    開封第一講書人閱讀 152,998評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵嘱朽,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我怔接,道長(zhǎng)搪泳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,323評(píng)論 1 279
  • 正文 為了忘掉前任扼脐,我火速辦了婚禮岸军,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己艰赞,他們只是感情好佣谐,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著方妖,像睡著了一般台谍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上吁断,一...
    開封第一講書人閱讀 49,079評(píng)論 1 285
  • 那天趁蕊,我揣著相機(jī)與錄音,去河邊找鬼仔役。 笑死掷伙,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的又兵。 我是一名探鬼主播任柜,決...
    沈念sama閱讀 38,389評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼沛厨!你這毒婦竟也來了宙地?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,019評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤逆皮,失蹤者是張志新(化名)和其女友劉穎宅粥,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體电谣,經(jīng)...
    沈念sama閱讀 43,519評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡秽梅,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了剿牺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片企垦。...
    茶點(diǎn)故事閱讀 38,100評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖晒来,靈堂內(nèi)的尸體忽然破棺而出钞诡,到底是詐尸還是另有隱情,我是刑警寧澤湃崩,帶...
    沈念sama閱讀 33,738評(píng)論 4 324
  • 正文 年R本政府宣布荧降,位于F島的核電站,受9級(jí)特大地震影響竹习,放射性物質(zhì)發(fā)生泄漏誊抛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評(píng)論 3 307
  • 文/蒙蒙 一整陌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦泌辫、人聲如沸随夸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宾毒。三九已至,卻和暖如春殿遂,著一層夾襖步出監(jiān)牢的瞬間诈铛,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工墨礁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留幢竹,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,547評(píng)論 2 354
  • 正文 我出身青樓恩静,卻偏偏與公主長(zhǎng)得像焕毫,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子驶乾,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 你可能已經(jīng)聽說過ECMAScript 6(簡(jiǎn)稱 ES6)了邑飒。ES6 是 Javascript 的下一個(gè)版本,它有很...
    米塔塔閱讀 923評(píng)論 0 10
  • 函數(shù)參數(shù)的默認(rèn)值 基本用法 在ES6之前级乐,不能直接為函數(shù)的參數(shù)指定默認(rèn)值疙咸,只能采用變通的方法。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,357評(píng)論 0 1
  • 三风科,字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn)罕扎,只要將碼點(diǎn)放入大括號(hào),就能正確解讀該字符丐重。有了這...
    eastbaby閱讀 1,514評(píng)論 0 8
  • 1.函數(shù)參數(shù)的默認(rèn)值 (1).基本用法 在ES6之前腔召,不能直接為函數(shù)的參數(shù)指定默認(rèn)值,只能采用變通的方法扮惦。
    趙然228閱讀 683評(píng)論 0 0
  • JavaScript ES6 核心功能一覽(ES6 亦作 ECMAScript 6 或 ES2015+) Java...
    蝸牛淋雨閱讀 1,763評(píng)論 0 12