ES6新特性有哪些厉颤?快來看看吧(二)

昨天講到ES6中新增的let 和 const? 今天來看看別的吧穴豫;

今天講一下解構(gòu)賦值:

什么解構(gòu)賦值?

解構(gòu)賦值就是按照一定的模式逼友,將數(shù)組或?qū)ο笾械臄?shù)據(jù)提取出來賦值給變量精肃。

以前,為變量賦值帜乞,只能直接指定值司抱;


但是現(xiàn)在ES6中可以寫出如圖這樣的:


從上面得知:從數(shù)組中提取值,是按照下標(biāo)黎烈,對變量進(jìn)行賦值的习柠。

數(shù)組的解構(gòu)賦值有以下幾個特點:

1》:要解構(gòu)的數(shù)據(jù)和變量是相等的


2》:要解構(gòu)的數(shù)據(jù)比變量多:


3》:要解構(gòu)的數(shù)據(jù)比變量少,則就相當(dāng)于聲明變量但未賦值照棋,為undefined:


4》:數(shù)組解構(gòu)賦值的缺省情況


5》:解構(gòu)賦值時可以為變量設(shè)置默認(rèn)值资溃。默認(rèn)值生效的前提:解構(gòu)失敗或者解構(gòu)的值嚴(yán)格等于(===)undefined;




下面的式子為什么會報錯烈炭?


因為等號右邊的值溶锭,轉(zhuǎn)為對象以后不可迭代,不具有Iterator接口 梳庆,最后一個空對象本身就不具有Iterator接口暖途。


對于set解構(gòu),也可以使用數(shù)組的解構(gòu)賦值膏执;

說明了一個問題驻售,只要某種數(shù)據(jù)它具備iterator接口,都可以采用數(shù)組形式的解構(gòu)賦值更米。

對象的解構(gòu)賦值欺栗;

解構(gòu)不僅可以用于數(shù)組,還可以用于對象。

聲明與對象的鍵同名的變量

解構(gòu)賦值時也可以為變量設(shè)置默認(rèn)值迟几,默認(rèn)值生效的前提:解構(gòu)失敗或者解構(gòu)的值嚴(yán)格等于undefined消请;

什么是解構(gòu)失敗类腮?


上述代碼中臊泰,等號右邊的對象沒有foo屬性,所以foo取不到值蚜枢,解構(gòu)失敗缸逃,所以等于undefined;

注意:

1》:如果將一個已經(jīng)聲明的變量用于解構(gòu)賦值厂抽,必須非常小心需频。


報錯

因為js引擎會將{x}理解成一個代碼塊,從而發(fā)生語法錯誤筷凤,只有不將大括號寫在行首昭殉,避免js將其解釋為代碼塊,才能解決這個問題


放在圓括號中藐守,就可以正確執(zhí)行挪丢。

字符串也可以解構(gòu)賦值;沒錯吗伤,字符串吃靠;

這是因為字符串轉(zhuǎn)成一個類似數(shù)組的對象;


類數(shù)組中還有一個length的屬性足淆,因此還可以給這個屬性賦值巢块;


函數(shù)參數(shù)的解構(gòu)賦值

注意:函數(shù)的形參不是數(shù)組,是ES6的特殊寫法巧号,是模式和變量

函數(shù)add的參數(shù)表面上是一個數(shù)組族奢,但是在傳入?yún)?shù)的那一刻,數(shù)組參數(shù)就被破解構(gòu)成變量x丹鸿,y越走。對于函數(shù)來說,他們能感受到的參數(shù)就是x和y靠欢;

函數(shù)的參數(shù)也可以使用默認(rèn)值廊敌;

function move({x=0,y=0}={})

return[x,y];

}

move({x:3,y:8}); // [3, 8]

move({x:3}); // [3, 0]

move({}); // [0, 0]

move(); // [0, 0]


解構(gòu)賦值的用途:

1》:交換變量的值


2》:從函數(shù)返回多個值:

函數(shù)只能返回一個值,如果要返回多個值门怪,只能將他們放在數(shù)組或?qū)ο罄锓祷芈獬海谶@里用解構(gòu)賦值,取出這些值非常方便掷空。



3》:函數(shù)參數(shù)的定義

解構(gòu)賦值可以方便的將一組參數(shù)與變量名對應(yīng)起來肋殴;



4》提取JSON對象中的數(shù)據(jù)


5》函數(shù)參數(shù)的默認(rèn)值囤锉;

在寫項目的時候用到了ajax;可以指定參數(shù)的默認(rèn)值护锤,這樣就避免在函數(shù)體內(nèi)寫var foo = config.foo || 'default foo';這樣的語句官地。


6》遍歷Map結(jié)構(gòu);

任何部署了iterator接口的對象烙懦,都可以用for...of循環(huán)遍歷驱入。Map結(jié)構(gòu)原生支持Iterator接口,配合變量的結(jié)構(gòu)賦值修陡,獲取鍵名和鍵值就非常方便了沧侥。


要是想單獨獲得可寫成這個樣子:


7》:輸入模塊的指定方法:

加載模塊時可霎,往往需要用到一些方法魄鸦,這時用解構(gòu)賦值,可以使輸入的語句變得非常清晰癣朗。

const { SourceMapConsumer,SourceNode } = require("source-map");

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拾因,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子旷余,更是在濱河造成了極大的恐慌绢记,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件正卧,死亡現(xiàn)場離奇詭異蠢熄,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)炉旷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進(jìn)店門签孔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人窘行,你說我怎么就攤上這事饥追。” “怎么了罐盔?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵但绕,是天一觀的道長。 經(jīng)常有香客問我惶看,道長捏顺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任纬黎,我火速辦了婚禮幅骄,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘莹桅。我一直安慰自己昌执,他們只是感情好烛亦,可當(dāng)我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著懂拾,像睡著了一般煤禽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上岖赋,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天檬果,我揣著相機(jī)與錄音,去河邊找鬼唐断。 笑死选脊,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的脸甘。 我是一名探鬼主播恳啥,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼丹诀!你這毒婦竟也來了钝的?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤铆遭,失蹤者是張志新(化名)和其女友劉穎硝桩,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體枚荣,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡碗脊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了橄妆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衙伶。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖呼畸,靈堂內(nèi)的尸體忽然破棺而出痕支,到底是詐尸還是另有隱情,我是刑警寧澤蛮原,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布卧须,位于F島的核電站,受9級特大地震影響儒陨,放射性物質(zhì)發(fā)生泄漏花嘶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一蹦漠、第九天 我趴在偏房一處隱蔽的房頂上張望椭员。 院中可真熱鬧,春花似錦笛园、人聲如沸隘击。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽埋同。三九已至州叠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間凶赁,已是汗流浹背咧栗。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留虱肄,地道東北人致板。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像咏窿,于是被迫代替她去往敵國和親斟或。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2 354

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

  • 1.數(shù)組的解構(gòu)賦值 本質(zhì)上翰灾,這種寫法屬于“模式匹配”缕粹,只要等號兩邊的模式相同,左邊的變量就會被賦予對應(yīng)的值纸淮。 如果...
    aaa8808dde01閱讀 76評論 0 0
  • 一、Let和Const let聲明變量亚享,可變 const定義常量(實際指的是變量和的內(nèi)存地址)咽块,不可變 只能在其聲...
    Sunflower_ca62閱讀 184評論 0 0
  • 一 . ES6簡介 (1)什么是ES6? ES的全稱是ECMAScript,它是由ECMA國際標(biāo)準(zhǔn)化組織制定的一項...
    IT成長空間閱讀 215評論 0 0
  • iOS Runtime 消息轉(zhuǎn)發(fā)機(jī)制原理 最近看到很多面試問道 runtime是個啥欺税,咋...
    475a2b3f6fdf閱讀 334評論 0 1
  • 1.基本用法 在ES6之前侈沪,不能直接為函數(shù)的參數(shù)指定默認(rèn)值,只能采用變通的方法晚凿。 上面代碼檢查函數(shù)log的參數(shù)y有...
    aaa8808dde01閱讀 81評論 0 0