ES6新特性

ES6是即將到來(lái)的新版本JavaScript語(yǔ)言的標(biāo)準(zhǔn)磕昼,代號(hào)harmony(和諧之意,顯然沒(méi)有跟上我國(guó)的步伐医窿,我們已經(jīng)進(jìn)入中國(guó)夢(mèng)版本了)

箭頭操作符

如果你會(huì)C#或者Java仰担,你肯定知道lambda表達(dá)式,ES6中新增的箭頭操作符=>便有異曲同工之妙玷氏。它簡(jiǎn)化了函數(shù)的書(shū)寫(xiě)堵未。操作符左邊為輸入的參數(shù),而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs盏触。
我們知道在JS中回調(diào)是經(jīng)常的事渗蟹,而一般回調(diào)又以匿名函數(shù)的形式出現(xiàn)块饺,每次都需要寫(xiě)一個(gè)function,甚是繁瑣雌芽。當(dāng)引入箭頭操作符后可以方便地寫(xiě)回調(diào)了授艰。請(qǐng)看下面的例子。

var array = [1, 2, 3];
//傳統(tǒng)寫(xiě)法
array.forEach(function(v, i, a) { console.log(v);});
//ES6  
array.forEach(v = > console.log(v));

類的支持

ES6中添加了對(duì)類的支持世落,引入了class關(guān)鍵字(其實(shí)class在JavaScript中一直是保留字淮腾,目的就是考慮到可能在以后的新版本中會(huì)用到,現(xiàn)在終于派上用場(chǎng)了)屉佳。JS本身就是面向?qū)ο蟮墓瘸珽S6中提供的類實(shí)際上只是JS原型模式的包裝。現(xiàn)在提供原生的class支持后忘古,對(duì)象的創(chuàng)建徘禁,繼承更加直觀了,并且父類方法的調(diào)用髓堪,實(shí)例化送朱,靜態(tài)方法和構(gòu)造函數(shù)等概念都更加形象化。

//類的定義
class Animal { 
//ES6中新型構(gòu)造器 
constructor(name) 
{ this.name = name; } 
//實(shí)例方法
 sayName() { 
console.log('My name is '+this.name); }}
//類的繼承
class Programmer extends Animal { constructor(name) { 
//直接調(diào)用父類構(gòu)造器進(jìn)行初始化 
super(name); } 
program() { console.log("I'm coding..."); }}
//測(cè)試我們的類
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();
//輸出 ‘My name is dummy’wayou.sayName();
//輸出 ‘My name is wayou’wayou.program();
//輸出 ‘I'm coding...’

增強(qiáng)的對(duì)象字面量

對(duì)象字面量被增強(qiáng)了干旁,寫(xiě)法更加簡(jiǎn)潔與靈活驶沼,同時(shí)在定義對(duì)象的時(shí)候能夠做的事情更多了。具體表現(xiàn)在:
可以在對(duì)象字面量里面定義原型
定義方法可以不用function關(guān)鍵字
直接調(diào)用父類方法

這樣一來(lái)争群,對(duì)象字面量與前面提到的類概念更加吻合回怜,在編寫(xiě)面向?qū)ο蟮腏avaScript時(shí)更加輕松方便了。

//通過(guò)對(duì)象字面量創(chuàng)建對(duì)象
var human = { 
breathe() { console.log('breathing...'); }};
var worker = { __proto__: human, 
//設(shè)置此對(duì)象的原型為human,相當(dāng)于繼承human company: 'freelancer', 
work() { console.log('working...'); }};
human.breathe();
//輸出 ‘breathing...’
//調(diào)用繼承來(lái)的breathe方法worker.breathe();
//輸出 ‘breathing...’

字符串模板

字符串模板相對(duì)簡(jiǎn)單易懂些换薄。

ES6中允許使用反引號(hào) ` 來(lái)創(chuàng)建字符串玉雾,此種方法創(chuàng)建的字符串里面可以包含由美元符號(hào)加花括號(hào)包裹的變量${vraible}。如果你使用過(guò)像C#等后端強(qiáng)類型語(yǔ)言的話轻要,對(duì)此功能應(yīng)該不會(huì)陌生复旬。

//產(chǎn)生一個(gè)隨機(jī)數(shù)
var num=Math.random();
//將這個(gè)數(shù)字輸出到
consoleconsole.log(`your num is ${num}`);

解構(gòu)

自動(dòng)解析數(shù)組或?qū)ο笾械闹怠1热缛粢粋€(gè)函數(shù)要返回多個(gè)值冲泥,常規(guī)的做法是返回一個(gè)對(duì)象驹碍,將每個(gè)值做為這個(gè)對(duì)象的屬性返回。但在ES6中凡恍,利用解構(gòu)這一特性志秃,可以直接返回一個(gè)數(shù)組,然后數(shù)組中的值會(huì)自動(dòng)被解析到對(duì)應(yīng)接收該值的變量中嚼酝。

var [x,y]=getVal(),
//函數(shù)返回值的解構(gòu) 
[name,,age]=['wayou','male','secrect'];
//數(shù)組解構(gòu)
function getVal()
 { return [ 1, 2 ];}console.log('x:'+x+', y:'+y);
//輸出:x:1, y:2 console.log('name:'+name+', age:'+age);
//輸出: name:wayou, age:secrect 

參數(shù)默認(rèn)值浮还,不定參數(shù),拓展參數(shù)

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

現(xiàn)在可以在定義函數(shù)的時(shí)候指定參數(shù)的默認(rèn)值了闽巩,而不用像以前那樣通過(guò)邏輯或操作符來(lái)達(dá)到目的了碑定。

function sayHello(name)
{
 //傳統(tǒng)的指定默認(rèn)參數(shù)的方式
 var name=name||'dude'; console.log('Hello '+name);}
//運(yùn)用ES6的默認(rèn)參數(shù)
function sayHello2(name='dude'){ console.log(`Hello ${name}`);}
sayHello();
//輸出:Hello dudesayHello('Wayou');
//輸出:Hello WayousayHello2();
//輸出:Hello dudesayHello2('Wayou');
//輸出:Hello Wayou

不定參數(shù)

不定參數(shù)是在函數(shù)中使用命名參數(shù)同時(shí)接收不定數(shù)量的未命名參數(shù)流码。這只是一種語(yǔ)法糖又官,在以前的JavaScript代碼中我們可以通過(guò)arguments變量來(lái)達(dá)到這一目的延刘。不定參數(shù)的格式是三個(gè)句點(diǎn)后跟代表所有不定參數(shù)的變量名。比如下面這個(gè)例子中六敬,…x代表了所有傳入add函數(shù)的參數(shù)碘赖。

//將所有參數(shù)相加的函數(shù)
function add(...x){ return x.reduce((m,n)=>m+n);}
//傳遞任意個(gè)數(shù)的參數(shù)console.log(add(1,2,3));
//輸出:6console.log(add(1,2,3,4,5));
//輸出:15

拓展參數(shù)

拓展參數(shù)則是另一種形式的語(yǔ)法糖,它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過(guò)apply外构。

var people=['Wayou','John','Sherlock'];
//sayHello函數(shù)本來(lái)接收三個(gè)單獨(dú)的參數(shù)人妖普泡,人二和人三
function sayHello(people1,people2,people3){ console.log(`Hello ${people1},${people2},${people3}`);}
//但是我們將一個(gè)數(shù)組以拓展參數(shù)的形式傳遞,它能很好地映射到每個(gè)單獨(dú)的參數(shù)
sayHello(...people);
//輸出:Hello Wayou,John,Sherlock 
//而在以前审编,如果需要傳遞數(shù)組當(dāng)參數(shù)撼班,我們需要使用函數(shù)的apply方法sayHello.apply(null,people);
//輸出:Hello Wayou,John,Sherlock 

let與const 關(guān)鍵字

可以把let看成var,只是它定義的變量被限定在了特定范圍內(nèi)才能使用垒酬,而離開(kāi)這個(gè)范圍則無(wú)效砰嘁。const則很直觀,用來(lái)定義常量勘究,即無(wú)法被更改值的變量矮湘。

for (let i=0;i<2;i++)console.log(i);
//輸出: 0,1console.log(i);
//輸出:undefined,嚴(yán)格模式下會(huì)報(bào)錯(cuò)

for of 值遍歷

我們都知道for in 循環(huán)用于遍歷數(shù)組,類數(shù)組或?qū)ο罂诟猓珽S6中新引入的for of循環(huán)功能相似缅阳,不同的是每次循環(huán)它提供的不是序號(hào)而是值。

var someArray = [ "a", "b", "c" ]; 
for (v of someArray) { console.log(v);
//輸出 a,b,c}

注意景描,此功能google traceur并未實(shí)現(xiàn)十办,所以無(wú)法模擬調(diào)試,下面有些功能也是如此

Map,Set 和 WeakMap超棺,WeakSet

這些是新加的集合類型向族,提供了更加方便的獲取屬性值的方法,不用像以前一樣用hasOwnProperty來(lái)檢查某個(gè)屬性是屬于原型鏈上的呢還是當(dāng)前對(duì)象的说搅。同時(shí)炸枣,在進(jìn)行屬性值添加與獲取時(shí)有專門(mén)的get,set 方法弄唧。

Setsvar s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
Mapsvar m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

有時(shí)候我們會(huì)把對(duì)象作為一個(gè)對(duì)象的鍵用來(lái)存放屬性值适肠,普通集合類型比如簡(jiǎn)單對(duì)象會(huì)阻止垃圾回收器對(duì)這些作為屬性鍵存在的對(duì)象的回收,有造成內(nèi)存泄漏的危險(xiǎn)候引。而WeakMap,WeakSet則更加安全些侯养,這些作為屬性鍵的對(duì)象如果沒(méi)有別的變量在引用它們,則會(huì)被回收釋放掉

Math澄干,Number逛揩,String柠傍,Object 的新API

對(duì)Math,Number,String還有Object等添加了許多新的API。下面代碼同樣來(lái)自es6features辩稽,對(duì)這些新API進(jìn)行了簡(jiǎn)單展示惧笛。

Number.EPSILONNumber.isInteger(Infinity)
falseNumber.isNaN("NaN") 
falseMath.acosh(3) // 
1.762747174039086Math.hypot(3, 4) // 
5Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 
2"abcde".contains("cd") // 
true"abc".repeat(3) // 
"abcabcabc"Array.from(document.querySelectorAll('*')) // 
Returns a real ArrayArray.of(1, 2, 3) // 
Similar to new Array(...), but without special one-arg behavior[0, 0, 0].fill(7, 1) // 
[0,7,7][1,2,3].findIndex(x => x == 2) // 
1["a", "b", "c"].entries() // 
iterator [0, "a"], [1,"b"], [2,"c"]["a", "b", "c"].keys() // 
iterator 0, 1, 2["a", "b", "c"].values() // 
iterator "a", "b", "c"Object.assign(Point, { origin: new Point(0,0) })

Promises

Promises是處理異步操作的一種模式,之前在很多三方庫(kù)中有實(shí)現(xiàn)逞泄,比如jQuery的deferred 對(duì)象患整。當(dāng)你發(fā)起一個(gè)異步請(qǐng)求,并綁定了.when(), .done()等事件處理程序時(shí)喷众,其實(shí)就是在應(yīng)用promise模式各谚。

//創(chuàng)建
promisevar promise = new Promise(function(resolve, reject) {
 // 進(jìn)行一些異步或耗時(shí)操作 
if ( /*如果成功 */ ) { resolve("Stuff worked!"); } else { reject(Error("It broke")); }});
//綁定處理程序
promise.then(function(result) { 
//promise成功的話會(huì)執(zhí)行這里 console.log(result); 
// "Stuff worked!"
}, 
function(err) { 
//promise失敗會(huì)執(zhí)行這里
 console.log(err); 
// Error: "It broke"});

總結(jié)
總結(jié)就是一句話,前后端差異越來(lái)越小了到千。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末昌渤,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子憔四,更是在濱河造成了極大的恐慌膀息,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件加矛,死亡現(xiàn)場(chǎng)離奇詭異履婉,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)斟览,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)毁腿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人苛茂,你說(shuō)我怎么就攤上這事已烤。” “怎么了妓羊?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵胯究,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我躁绸,道長(zhǎng)裕循,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任净刮,我火速辦了婚禮剥哑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘淹父。我一直安慰自己株婴,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布暑认。 她就那樣靜靜地躺著困介,像睡著了一般大审。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上座哩,一...
    開(kāi)封第一講書(shū)人閱讀 49,821評(píng)論 1 290
  • 那天徒扶,我揣著相機(jī)與錄音,去河邊找鬼八回。 笑死酷愧,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的缠诅。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼乍迄,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼管引!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起闯两,我...
    開(kāi)封第一講書(shū)人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤褥伴,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后漾狼,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體重慢,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年逊躁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了似踱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡稽煤,死狀恐怖核芽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情酵熙,我是刑警寧澤轧简,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站匾二,受9級(jí)特大地震影響哮独,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜察藐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一皮璧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧转培,春花似錦恶导、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)邦泄。三九已至,卻和暖如春裂垦,著一層夾襖步出監(jiān)牢的瞬間顺囊,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工蕉拢, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留特碳,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓晕换,卻偏偏與公主長(zhǎng)得像午乓,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子闸准,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

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

  • 箭頭操作符 如果你會(huì)C#或者Java益愈,你肯定知道lambda表達(dá)式,ES6中新增的箭頭操作符=>便有異曲同工之妙夷家。...
    zmwise閱讀 2,307評(píng)論 2 4
  • let和const命令 var:聲明變量蒸其,更多的是全局作用域,存在變量提升 let:聲明變量库快,存在于塊級(jí)作用域摸袁,不...
    zhangivon閱讀 2,475評(píng)論 1 13
  • 一、ES6簡(jiǎn)介 ? 歷時(shí)將近6年的時(shí)間來(lái)制定的新 ECMAScript 標(biāo)準(zhǔn) ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,062評(píng)論 8 25
  • ECMAScript 6.0(以下簡(jiǎn)稱ES6)是义屏、JavaScript語(yǔ)音的下一代標(biāo)準(zhǔn)靠汁,已經(jīng)在2015年6月正式發(fā)...
    Leisure_blogs閱讀 491評(píng)論 1 2
  • #include C/C++中導(dǎo)入頭文件的預(yù)編譯指令 1. #include"A.h" 在用戶自己的目錄下尋找文件...
    __life__閱讀 345評(píng)論 0 0