ES6(ECMAScript2015)的出現(xiàn)阴汇,無(wú)疑給前端開(kāi)發(fā)人員帶來(lái)了新的驚喜数冬,它包含了一些很棒的新特性,可以更加方便的實(shí)現(xiàn)很多復(fù)雜的操作搀庶,提高開(kāi)發(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的最佳特性列表(排名不分先后):
Default Parameters(默認(rèn)參數(shù)) in ES6
Template Literals (模板文本)in ES6
Multi-line Strings (多行字符串)in ES6
Destructuring Assignment (解構(gòu)賦值)in ES6
Enhanced Object Literals (增強(qiáng)的對(duì)象文本)in ES6
Arrow Functions (箭頭函數(shù))in ES6
Promises in ES6
Block-Scoped Constructs Let and Const(塊作用域構(gòu)造Let and Const)
Classes(類(lèi)) in ES6
Modules(模塊) in ES6
聲明:這些列表僅是個(gè)人主觀意見(jiàn)蜡秽。它絕不是為了削弱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ǔ)法類(lèi)似于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.`;