10個(gè)最佳Es6特性

下面是10個(gè)ES6最佳特性,排名不分先后:

1.函數(shù)參數(shù)默認(rèn)值

2.模板字符串

3.多行字符串

4.解構(gòu)賦值

5.對(duì)象屬性簡(jiǎn)寫(xiě)

6.箭頭函數(shù)

7.Promise

Let與Const

類(lèi)

模塊化

1. 函數(shù)參數(shù)默認(rèn)值

不使用ES6

為函數(shù)的參數(shù)設(shè)置默認(rèn)值:

functionfoo(height, color)

{

varheight = height ||50;

varcolor = color ||'red';

//...

}

這樣寫(xiě)一般沒(méi)問(wèn)題棠枉,但是潦闲,當(dāng)參數(shù)的布爾值為false時(shí),是會(huì)出事情的牵啦!比如,我們這樣調(diào)用foo函數(shù):

foo(0,"","")

因?yàn)?b>0的布爾值為false妄痪,這樣height的取值將是50哈雏。同理color的取值為‘red’衫生。

使用ES6

functionfoo(height =50, color ='red')

{

// ...

}

2. 模板字符串

不使用ES6

使用+號(hào)將變量拼接為字符串:

varname ='Your name is '+ first +' '+ last +'.'

使用ES6

將變量放在大括號(hào)之中:

varname =`Your name is${first}${last}.`

ES6的寫(xiě)法更加簡(jiǎn)潔、直觀彭羹。

3. 多行字符串

不使用ES6

使用“\n\t”將多行字符串拼接起來(lái):

varroadPoem ='Then took the other, as just as fair,\n\t'

+'And having perhaps the better claim\n\t'

+'Because it was grassy and wanted wear,\n\t'

+'Though as for that the passing there\n\t'

+'Had worn them really about the same,\n\t'

使用ES6

將多行字符串放在反引號(hào)``之間就好了:

varroadPoem =`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,`

4. 解構(gòu)賦值

不使用ES6

當(dāng)需要獲取某個(gè)對(duì)象的屬性值時(shí)泪酱,需要單獨(dú)獲扰梢蟆:

vardata = $('body').data();// data有house和mouse屬性

varhouse = data.house;

varmouse = data.mouse;

使用ES6

一次性獲取對(duì)象的子屬性:

var{ house, mouse} = $('body').data()

對(duì)于數(shù)組也是一樣的:

var[col1, col2]? = $('.column');

5. 對(duì)象屬性簡(jiǎn)寫(xiě)

不使用ES6

對(duì)象中必須包含屬性和值墓阀,顯得非常多余:

varbar ='bar';

varfoo =function()

{

// ...

}

varbaz = {

bar: bar,

foo: foo

};

使用ES6

對(duì)象中直接寫(xiě)變量毡惜,非常簡(jiǎn)單:

varbar ='bar';

varfoo =function()

{

// ...

}

varbaz = { bar, foo };

6. 箭頭函數(shù)

不使用ES6

普通函數(shù)體內(nèi)的this,指向調(diào)用時(shí)所在的對(duì)象斯撮。

functionfoo()

{

console.log(this.id);

}

varid =1;

foo();// 輸出1

foo.call({id:2});// 輸出2

使用ES6

箭頭函數(shù)體內(nèi)的this,就是定義時(shí)所在的對(duì)象帕膜,而不是調(diào)用時(shí)所在的對(duì)象作瞄。

varfoo =()=>{

console.log(this.id);

}

varid =1;

foo();// 輸出1

foo.call({id:2});// 輸出1

7. Promise

不使用ES6

嵌套兩個(gè)setTimeout回調(diào)函數(shù):

setTimeout(function()

{

console.log('Hello');// 1秒后輸出"Hello"

setTimeout(function()

{

console.log('Fundebug');// 2秒后輸出"Fundebug"

},1000);

},1000);

使用ES6

使用兩個(gè)then是異步編程串行化种蝶,避免了回調(diào)地獄:

varwait1000 =newPromise(function(resolve, reject)

{

setTimeout(resolve,1000);

});

wait1000

.then(function()

{

console.log("Hello");// 1秒后輸出"Hello"

returnwait1000;

})

.then(function()

{

console.log("Fundebug");// 2秒后輸出"Fundebug"

});

8. Let與Const

使用Var

var定義的變量未函數(shù)級(jí)作用域:

{

vara =10;

}

console.log(a);// 輸出10

使用let與const

let定義的變量為塊級(jí)作用域盯滚,因此會(huì)報(bào)錯(cuò):(如果你希望實(shí)時(shí)監(jiān)控JavaScript應(yīng)用的錯(cuò)誤,歡迎免費(fèi)使用Fundebug)

{

leta =10;

}

console.log(a);// 報(bào)錯(cuò)“ReferenceError: a is not defined”

constlet一樣,也是塊級(jí)作用域。

9. 類(lèi)

不使用ES6

使用構(gòu)造函數(shù)創(chuàng)建對(duì)象:

functionPoint(x, y)

{

this.x = x;

this.y = y;

this.add =function()

{

returnthis.x +this.y;

};

}

varp =newPoint(1,2);

console.log(p.add());// 輸出3

使用ES6

使用Class定義類(lèi),更加規(guī)范根资,且你能夠繼承:

classPoint

{

constructor(x, y)

{

this.x = x;

this.y = y;

}

add()

{

returnthis.x +this.y;

}

}

varp =newPoint(1,2);

console.log(p.add());// 輸出3

10. 模塊化

JavaScript一直沒(méi)有官方的模塊化解決方案架专,開(kāi)發(fā)者在實(shí)踐中主要采用CommonJSAMD規(guī)范。而ES6制定了模塊(Module)功能嫂冻。

不使用ES6

Node.js采用CommenJS規(guī)范實(shí)現(xiàn)了模塊化胶征,而前端也可以采用,只是在部署時(shí)需要使用Browserify等工具打包桨仿。這里不妨介紹一下CommenJS規(guī)范睛低。

module.js中使用module.exports導(dǎo)出port變量和getAccounts函數(shù):

module.exports = {

port:3000,

getAccounts:function(){

...

}

}

main.js中使用require導(dǎo)入module.js

varservice =require('module.js')

console.log(service.port)// 輸出3000

使用ES6

ES6中使用exportimport關(guān)鍵詞實(shí)現(xiàn)模塊化。

module.js中使用export導(dǎo)出port變量和getAccounts函數(shù):

exportvarport =3000

exportfunctiongetAccounts(url){

...

}

main.js中使用import導(dǎo)入module.js,可以指定需要導(dǎo)入的變量:

import{port, getAccounts}from'module'

console.log(port)// 輸出3000

也可以將全部變量導(dǎo)入:

import*asservicefrom'module'

console.log(service.port)// 3000

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末钱雷,一起剝皮案震驚了整個(gè)濱河市骂铁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌罩抗,老刑警劉巖拉庵,帶你破解...
    沈念sama閱讀 216,843評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異套蒂,居然都是意外死亡钞支,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)操刀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)烁挟,“玉大人,你說(shuō)我怎么就攤上這事骨坑『成ぃ” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,187評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵欢唾,是天一觀的道長(zhǎng)且警。 經(jīng)常有香客問(wèn)我,道長(zhǎng)礁遣,這世上最難降的妖魔是什么斑芜? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,264評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮亡脸,結(jié)果婚禮上押搪,老公的妹妹穿的比我還像新娘。我一直安慰自己浅碾,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評(píng)論 6 390
  • 文/花漫 我一把揭開(kāi)白布续语。 她就那樣靜靜地躺著垂谢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪疮茄。 梳的紋絲不亂的頭發(fā)上滥朱,一...
    開(kāi)封第一講書(shū)人閱讀 51,231評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音力试,去河邊找鬼徙邻。 笑死,一個(gè)胖子當(dāng)著我的面吹牛畸裳,可吹牛的內(nèi)容都是我干的缰犁。 我是一名探鬼主播,決...
    沈念sama閱讀 40,116評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼帅容!你這毒婦竟也來(lái)了颇象?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,945評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤并徘,失蹤者是張志新(化名)和其女友劉穎遣钳,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體麦乞,經(jīng)...
    沈念sama閱讀 45,367評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蕴茴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了姐直。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片倦淀。...
    茶點(diǎn)故事閱讀 39,754評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖简肴,靈堂內(nèi)的尸體忽然破棺而出晃听,到底是詐尸還是另有隱情,我是刑警寧澤砰识,帶...
    沈念sama閱讀 35,458評(píng)論 5 344
  • 正文 年R本政府宣布能扒,位于F島的核電站,受9級(jí)特大地震影響辫狼,放射性物質(zhì)發(fā)生泄漏初斑。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評(píng)論 3 327
  • 文/蒙蒙 一膨处、第九天 我趴在偏房一處隱蔽的房頂上張望见秤。 院中可真熱鬧,春花似錦真椿、人聲如沸鹃答。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,692評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)测摔。三九已至,卻和暖如春解恰,著一層夾襖步出監(jiān)牢的瞬間锋八,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,842評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工护盈, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留挟纱,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,797評(píng)論 2 369
  • 正文 我出身青樓腐宋,卻偏偏與公主長(zhǎng)得像紊服,于是被迫代替她去往敵國(guó)和親檀轨。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評(píng)論 2 354

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

  • 譯者按: ** 人生苦短围苫,我用ES6**裤园。 原文: Top 10 ES6 Features Every Busy ...
    Fundebug閱讀 378評(píng)論 0 10
  • 原文: Top 10 ES6 Features Every Busy JavaScript Developer M...
    簡(jiǎn)書(shū)超級(jí)會(huì)員閱讀 130評(píng)論 0 0
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)剂府,斷路器拧揽,智...
    卡卡羅2017閱讀 134,652評(píng)論 18 139
  • Node.js是目前非常火熱的技術(shù)腺占,但是它的誕生經(jīng)歷卻很奇特淤袜。 眾所周知,在Netscape設(shè)計(jì)出JavaScri...
    w_zhuan閱讀 3,613評(píng)論 2 41
  • ES6(ECMAScript2015)的出現(xiàn)衰伯,無(wú)疑給前端開(kāi)發(fā)人員帶來(lái)了新的驚喜铡羡,它包含了一些很棒的新特性,可以更加...
    gtt21閱讀 232評(píng)論 0 0