ES6語法


const 與 let 變量

let與const聲明的變量解決了這種問題,因為他們是塊級作用域, 在代碼塊(用{}表示)中使用let或const聲明變量, 該變量會陷入暫時性死區(qū)直到該變量的聲明被處理.

關(guān)于使用let與const規(guī)則:

使用let聲明的變量可以重新賦值,但是不能在同一作用域內(nèi)重新聲明

使用const聲明的變量必須賦值初始化,但是不能在同一作用域類重新聲明也無法重新賦值.

模板字面量

在ES6之前,將字符串連接到一起的方法是+或者concat()方法,

模板字面量本質(zhì)上是包含嵌入式表達式的字符串字面量.

模板字面量用倒引號( `` )(而不是單引號( '' )或雙引號( "" ))表示擦剑,可以包含用${expression}表示的占位符

解構(gòu)

在ES6中,可以使用解構(gòu)從數(shù)組和對象提取值并賦值給獨特的變量

[]表示被解構(gòu)的數(shù)組,x,y,z表示要將數(shù)組中的值存儲在其中的變量, 在解構(gòu)數(shù)組是, 還可以忽略值, 例如const[x,,z]=point,忽略y坐標.

使用和所分配的變量名稱相同的名稱初始化對象時如果屬性名稱和所分配的變量名稱一樣,那么就可以從對象屬性中刪掉這些重復(fù)的變量名稱。

簡寫方法的名稱:

for...of循環(huán)

for...of循環(huán)是最新添加到 JavaScript 循環(huán)系列中的循環(huán)。

它結(jié)合了其兄弟循環(huán)形式for循環(huán)和for...in循環(huán)的優(yōu)勢毫蚓,可以循環(huán)任何可迭代(也就是遵守可迭代協(xié)議)類型的數(shù)據(jù)拔莱。默認情況下,包含以下數(shù)據(jù)類型:String矛双、Array敬辣、Map和Set雪标,注意不包含Object數(shù)據(jù)類型(即{})。默認情況下溉跃,對象不可迭代村刨。

for循環(huán)

constdigits=[0,1,2,3,4,5,6,7,8,9];for(let i=0; i<digits.length ; i++){console.log(digits[i]);}

for循環(huán)的最大缺點是需要跟蹤計數(shù)器和退出條件。

雖然for循環(huán)在循環(huán)數(shù)組時的確具有優(yōu)勢撰茎,但是某些數(shù)據(jù)結(jié)構(gòu)不是數(shù)組嵌牺,因此并非始終適合使用 loop 循環(huán)。

for...in循環(huán)

constdigits=[0,1,2,3,4,5,6,7,8,9];for(constindexindigits){console.log(digits[index]);}

依然需要使用 index 來訪問數(shù)組的值

當你需要向數(shù)組中添加額外的方法(或另一個對象)時龄糊,for...in循環(huán)會帶來很大的麻煩逆粹。因為for...in循環(huán)循環(huán)訪問所有可枚舉的屬性,意味著如果向數(shù)組的原型中添加任何其他屬性炫惩,這些屬性也會出現(xiàn)在循環(huán)中僻弹。

forEach 循環(huán) 是另一種形式的 JavaScript 循環(huán)。但是他嚷,forEach() 實際上是數(shù)組方法蹋绽,因此只能用在數(shù)組中。也無法停止或退出 forEach 循環(huán)筋蓖。如果希望你的循環(huán)中出現(xiàn)這種行為卸耘,則需要使用基本的 for 循環(huán)。

for...of循環(huán)

for...of循環(huán)用于循環(huán)訪問任何可迭代的數(shù)據(jù)類型扭勉。

for...of循環(huán)的編寫方式和for...in循環(huán)的基本一樣鹊奖,只是將in替換為of,可以忽略索引涂炎。

constdigits=[0,1,2,3,4,5,6,7,8,9];for(constdigitofdigits){console.log(digit);}

建議使用復(fù)數(shù)對象名稱來表示多個值的集合忠聚。這樣,循環(huán)該集合時唱捣,可以使用名稱的單數(shù)版本來表示集合中的單個值两蟀。例如,for (const button of buttons) {…}震缭。

for...of循環(huán)還具有其他優(yōu)勢赂毯,解決了 for 和 for...in 循環(huán)的不足之處。你可以隨時停止或退出 for...of 循環(huán)拣宰。

for(constdigitofdigits){if(digit%2===0){continue;}console.log(digit);}

不用擔心向?qū)ο笾刑砑有碌膶傩浴?b>for...of 循環(huán)將只循環(huán)訪問對象中的值党涕。

展開運算符

展開運算符

(用三個連續(xù)的點 (...) 表示)是 ES6 中的新概念,使你能夠?qū)⒆置媪繉ο笳归_為多個元素

展開運算符的一個用途是結(jié)合數(shù)組巡社。

如果你需要結(jié)合多個數(shù)組膛堤,在有展開運算符之前,必須使用Array的concat()方法晌该。

使用展開符來結(jié)合數(shù)組

剩余參數(shù)(可變參數(shù))

使用展開運算符將數(shù)組展開為多個元素, 使用剩余參數(shù)可以將多個元素綁定到一個數(shù)組中.

剩余參數(shù)也用三個連續(xù)的點 (...) 表示肥荔,使你能夠?qū)⒉欢〝?shù)量的元素表示為數(shù)組.

用途1: 將變量賦數(shù)組值時:

用途2: 可變參數(shù)函數(shù)

對于參數(shù)不固定的函數(shù),ES6之前是使用參數(shù)對象(arguments)處理:

ES6箭頭函數(shù)

ES6之前,使用普通函數(shù)把其中每個名字轉(zhuǎn)換為大寫形式:

箭頭函數(shù)表示:

constupperizedNames=['Farrin','Kagure','Asser'].map(name=>name.toUpperCase());

普通函數(shù)可以是函數(shù)聲明或者函數(shù)表達式, 但是箭頭函數(shù)始終都是表達式, 全程是箭頭函數(shù)表達式, 因此因此僅在表達式有效時才能使用,包括:

存儲在變量中朝群,

當做參數(shù)傳遞給函數(shù)燕耿,

存儲在對象的屬性中。

如果函數(shù)的參數(shù)只有一個,不需要使用()包起來,但是只有一個或者多個, 則必須需要將參數(shù)列表放在圓括號內(nèi)

一般箭頭函數(shù)都只有一個表達式作為函數(shù)主題:

這種函數(shù)表達式形式稱為簡寫主體語法:

在函數(shù)主體周圍沒有花括號,

自動返回表達式

但是如果箭頭函數(shù)的主體內(nèi)需要多行代碼, 則需要使用常規(guī)主體語法:

它將函數(shù)主體放在花括號內(nèi)

需要使用 return 語句來返回內(nèi)容姜胖。

javascript標準函數(shù)this

new 對象

sundae這個構(gòu)造函數(shù)內(nèi)的this的值是實例對象, 因為他使用new被調(diào)用.

指定的對象

函數(shù)使用call/apply被調(diào)用,this的值指向指定的obj2,因為call()第一個參數(shù)明確設(shè)置this的指向

上下`文對象

函數(shù)是對象的方法, this指向就是那個對象,此處this就是指向data.

全局對象或 undefined

此處是this指向全局對象,在嚴格模式下,指向undefined.

javascript中this是很復(fù)雜的概念, 要詳細判斷this,請參考this豁然開朗

箭頭函數(shù)和this

對于普通函數(shù), this的值基于函數(shù)如何被調(diào)用, 對于箭頭函數(shù),this的值基于函數(shù)周圍的上下文, 換句話說,this的值和函數(shù)外面的this的值是一樣的.

傳遞給setTimeout()的函數(shù)被調(diào)用時沒用到new誉帅、call()或apply(),也沒用到上下文對象右莱。意味著函數(shù)內(nèi)的this的值是全局對象堵第,不是dessert對象。實際上發(fā)生的情況是隧出,創(chuàng)建了新的 scoops 變量(默認值為undefined)踏志,然后遞增(undefined + 1結(jié)果為NaN);

解決此問題的方式之一是使用閉包(closure):

greet() 函數(shù)中混亂的前兩行的作用是什么?它們的作用是當所需的參數(shù)未提供時胀瞪,為函數(shù)提供默認的值针余。但是看起來很麻煩, ES6引入一種新的方式創(chuàng)建默認值, 他叫默認函數(shù)參數(shù):

默認值與解構(gòu)

默認值與解構(gòu)數(shù)組

函數(shù)預(yù)期傳入的是數(shù)組。它通過解構(gòu)將數(shù)組中的第一項設(shè)為 width凄诞,第二項設(shè)為 height圆雁。如果數(shù)組為空,或者只有一項帆谍,那么就會使用默認參數(shù)伪朽,并將缺失的參數(shù)設(shè)為默認值 5。

出現(xiàn)錯誤汛蝙,因為createGrid()預(yù)期傳入的是數(shù)組烈涮,然后對其進行解構(gòu)朴肺。因為函數(shù)被調(diào)用時沒有傳入數(shù)組,所以出現(xiàn)問題坚洽。但是戈稿,我們可以使用默認的函數(shù)參數(shù)!

默認值與解構(gòu)函數(shù)

就像使用數(shù)組默認值解構(gòu)數(shù)組一樣讶舰,函數(shù)可以讓對象成為一個默認參數(shù)鞍盗,并使用對象解構(gòu):

數(shù)組默認值與對象默認值

默認函數(shù)參數(shù)只是個簡單的添加內(nèi)容,但是卻帶來很多便利跳昼!與數(shù)組默認值相比般甲,對象默認值具備的一個優(yōu)勢是能夠處理跳過的選項《旒眨看看下面的代碼:

在createSundae()函數(shù)使用對象默認值進行解構(gòu)時敷存,如果你想使用scoops的默認值,但是更改toppings挪略,那么只需使用 toppings 傳入一個對象:

將上述示例與使用數(shù)組默認值進行解構(gòu)的同一函數(shù)相對比历帚。

對于這個函數(shù),如果想使用 scoops 的默認數(shù)量杠娱,但是更改 toppings挽牢,則必須以這種奇怪的方式調(diào)用你的函數(shù):

因為數(shù)組是基于位置的,我們需要傳入 undefined 以跳過第一個參數(shù)(并使用默認值)來到達第二個參數(shù)摊求。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末禽拔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子室叉,更是在濱河造成了極大的恐慌睹栖,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,423評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茧痕,死亡現(xiàn)場離奇詭異野来,居然都是意外死亡,警方通過查閱死者的電腦和手機踪旷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,147評論 2 385
  • 文/潘曉璐 我一進店門曼氛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人令野,你說我怎么就攤上這事舀患。” “怎么了气破?”我有些...
    開封第一講書人閱讀 157,019評論 0 348
  • 文/不壞的土叔 我叫張陵聊浅,是天一觀的道長。 經(jīng)常有香客問我,道長低匙,這世上最難降的妖魔是什么旷痕? 我笑而不...
    開封第一講書人閱讀 56,443評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮努咐,結(jié)果婚禮上苦蒿,老公的妹妹穿的比我還像新娘殴胧。我一直安慰自己渗稍,他們只是感情好,可當我...
    茶點故事閱讀 65,535評論 6 385
  • 文/花漫 我一把揭開白布团滥。 她就那樣靜靜地躺著竿屹,像睡著了一般。 火紅的嫁衣襯著肌膚如雪灸姊。 梳的紋絲不亂的頭發(fā)上拱燃,一...
    開封第一講書人閱讀 49,798評論 1 290
  • 那天,我揣著相機與錄音力惯,去河邊找鬼碗誉。 笑死,一個胖子當著我的面吹牛父晶,可吹牛的內(nèi)容都是我干的哮缺。 我是一名探鬼主播,決...
    沈念sama閱讀 38,941評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼甲喝,長吁一口氣:“原來是場噩夢啊……” “哼尝苇!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起埠胖,我...
    開封第一講書人閱讀 37,704評論 0 266
  • 序言:老撾萬榮一對情侶失蹤糠溜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后直撤,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體非竿,經(jīng)...
    沈念sama閱讀 44,152評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,494評論 2 327
  • 正文 我和宋清朗相戀三年谋竖,在試婚紗的時候發(fā)現(xiàn)自己被綠了红柱。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,629評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡圈盔,死狀恐怖豹芯,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情驱敲,我是刑警寧澤铁蹈,帶...
    沈念sama閱讀 34,295評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響握牧,放射性物質(zhì)發(fā)生泄漏容诬。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,901評論 3 313
  • 文/蒙蒙 一沿腰、第九天 我趴在偏房一處隱蔽的房頂上張望览徒。 院中可真熱鬧,春花似錦颂龙、人聲如沸习蓬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽躲叼。三九已至,卻和暖如春企巢,著一層夾襖步出監(jiān)牢的瞬間枫慷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評論 1 266
  • 我被黑心中介騙來泰國打工浪规, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留或听,地道東北人。 一個月前我還...
    沈念sama閱讀 46,333評論 2 360
  • 正文 我出身青樓笋婿,卻偏偏與公主長得像誉裆,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子萌抵,可洞房花燭夜當晚...
    茶點故事閱讀 43,499評論 2 348

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

  • #Node課程大綱V10(一周) ##目錄 *1day -基本介紹 -環(huán)境配置(nodenvm,cnpm) -RE...
    lint_b7d1閱讀 180評論 0 0
  • ##**理解對象**## --- ###**屬性類型** > JavaScript中有兩種屬性類型 分別是 數(shù)據(jù)屬...
    nullunde閱讀 301評論 0 0
  • [toc] ##1找御、基礎(chǔ)知識>ECMAScript(ES):規(guī)定了JS的一些基礎(chǔ)核心的知識(變量、數(shù)據(jù)類型绍填、語法規(guī)...
    Bazinga2019閱讀 183評論 0 0
  • 最常用的ES6特性 let, const, class, extends, super, arrow functi...
    ldlecit閱讀 148評論 0 0
  • 轉(zhuǎn)載于:http://www.reibang.com/p/132a3de98238 uni-app跨平臺框架官方...
    fdf816cf1db1閱讀 401評論 0 0