ES6 解構(gòu)賦值

解構(gòu)賦值是對(duì)賦值運(yùn)算符的擴(kuò)展。是一種針對(duì)數(shù)組或者對(duì)象進(jìn)行模式匹配嘁字,然后對(duì)其中的變量進(jìn)行賦值夫椭。

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

ES6 中可以從數(shù)組中提取值掸掸,對(duì)變量進(jìn)行賦值,這種過(guò)程稱為解構(gòu)蹭秋。

示例:

例如下面這個(gè)例子扰付,從數(shù)組中提取值,按照對(duì)應(yīng)位置仁讨,對(duì)變量賦值:

let [x, k, d] = [1, 2, 3];

console.log(x);  // 輸出:1
console.log(k);  // 輸出:2
console.log(d);  // 輸出:3

這種寫(xiě)法屬于模式匹配羽莺,只要等號(hào)兩邊的模式相同,就會(huì)將右邊的值賦給左邊的變量洞豁。

嵌套數(shù)組解構(gòu)

ES6 中嵌套數(shù)組也可以進(jìn)行解構(gòu)盐固。

示例:
let [x, [[k], d]] = [1, [[20], 3]]; 

console.log(x);  // 輸出:1
console.log(k);  // 輸出:20
console.log(d);  // 輸出:3

不完全解構(gòu)

在解構(gòu)數(shù)組時(shí)我們可以忽略某個(gè)值。例如下面這個(gè)例子中丈挟,右邊有三個(gè)值刁卜,如果我們只想要將第二個(gè)值賦給指定變量,其他值不進(jìn)行賦值礁哄,可以像下面這個(gè)寫(xiě):

let [, x, ] = [1, 2, 3]; 
console.log(x);  // 輸出:2

剩余運(yùn)算符长酗,例如下面這個(gè)例子,變量 a 被賦值為 1桐绒,其他的值都被賦給了 ...b

let [a, ...b] = [1, 2, 3, 4, 5]; 
console.log(a);  // 輸出:1
console.log(b);  // 輸出:[ 2, 3, 4, 5 ]

字符串解構(gòu)賦值

字符串的解構(gòu)可以理解為一維數(shù)組的解構(gòu)夺脾,這在處理符串的時(shí)候特別方便之拨。

示例:
let [a, b, c] ='123'
console.log(a, b, c);   // 輸出:1 2 3
console.log(typeof a);  // 輸出:string

字符串對(duì)象也有一個(gè) length 屬性,因?yàn)槲覀兛梢詫?duì)這個(gè)屬性解構(gòu)賦值咧叭。

let {length : len} = 'hello, xkd';
console.log(len);  // 輸出:10

數(shù)值和布爾值的解構(gòu)賦值

在解構(gòu)賦值時(shí)蚀乔,如果等號(hào)右邊的值時(shí)數(shù)值或布爾類(lèi)型,會(huì)先轉(zhuǎn)換為對(duì)象菲茬,然后再進(jìn)行賦值吉挣。

示例:
let {toString: a} = 100;
console.log(a === Number.prototype.toString);  //輸出:true

let {toString: b} = true;
console.log(b === Boolean.prototype.toString); // 輸出:true

對(duì)象的解構(gòu)賦值

對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同,數(shù)組的元素是按次序排列的婉弹,變量的取值由它的位置決定睬魂。而對(duì)象的屬性沒(méi)有次序,變量必須與屬性同名镀赌,才能取到正確的值氯哮。

示例:
let { a, b, c} = { a: 1, b: 2};
console.log(a, b, c);  // 輸出:1 2 undefined

上述代碼中,等號(hào)左邊的前兩個(gè)變量 a商佛、b 與右邊的對(duì)象屬性名相同喉钢,所以成功取到對(duì)應(yīng)的值。而變量 c 沒(méi)有對(duì)應(yīng)的同名屬性良姆,導(dǎo)致取不到值肠虽,最后結(jié)果為 undefined

如果變量名與屬性名不一致玛追,還有一種方法能夠成功取到值税课,例如像下面這個(gè):

let { first: f, second: s } = { first:100, second:200 };
// 輸出變量的值
console.log(f);  // 輸出:100
console.log(s);  // 輸出:200

上述代碼中,firstsecond 是匹配的模式豹缀,fs 才是變量伯复,真正被賦值的是變量 fs 慨代。

和數(shù)組一樣的是邢笙,解構(gòu)也可以用于嵌套結(jié)構(gòu)的對(duì)象。

示例:

例如下面這個(gè)例子:

let obj = {
    stu: [
      'xkd',
      { age: 18 }
    ]
};
  
let { stu: [name, { age }] } = obj;
console.log(name, age);  // 輸出:xkd 18

注意這時(shí) stu 是模式侍匙,不是變量氮惯,因此不會(huì)被賦值。如果 stu 也要作為變量賦值想暗,可以寫(xiě)成下面這樣妇汗。

let obj = {
    stu: [
      'xkd',
      { age: 18 }
    ]
  };
  
let { stu, stu: [key, { age }] } = obj;
console.log(stu);  // 輸出:[ 'xkd', { age: 18 } ]
console.log(key);  // 輸出:xkd
console.log(age);  // 輸出:18

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

除了數(shù)組、字符串说莫、對(duì)象等數(shù)據(jù)類(lèi)型杨箭,在 ES6 中函數(shù)的參數(shù)也可以使用解構(gòu)賦值储狭。

示例:

例如下面這個(gè)例子:

function add([x, y]){
    console.log(x + y);
  }
  
add([3, 7]); // 輸出:10

上述代碼中捣郊,函數(shù) add 的參數(shù)表面上是一個(gè)數(shù)組,但在傳入?yún)?shù)的那一刻慈参,數(shù)組參數(shù)就被解構(gòu)成變量 xy。對(duì)于函數(shù)內(nèi)部的代碼來(lái)說(shuō)驮配,它們能感受到的參數(shù)就是 xy

默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值壮锻。有一點(diǎn)需要注意的是琐旁,即使設(shè)置了默認(rèn)值,在進(jìn)行解構(gòu)賦值時(shí)猜绣,依舊會(huì)先賦值旋膳,如果沒(méi)有賦值成功,則會(huì)使用默認(rèn)值途事。如果沒(méi)有默認(rèn)值結(jié)果為 undefined 验懊。

示例:
let [a=1, b=2, c=3, d] = [100, 200];
console.log(a, b, c, d);  
//輸出:100 200 3 undefined

上述代碼中,a尸变、b义图、c 都指定了默認(rèn)值,但是只有 a召烂、b 被成功賦值為 100碱工、200c 沒(méi)有被賦值奏夫,那么 c 會(huì)使用指定的默認(rèn)值怕篷。而 d 既沒(méi)有被賦值,也沒(méi)有默認(rèn)值酗昼,所以結(jié)果為 undefined廊谓。

鏈接:https://www.9xkd.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市麻削,隨后出現(xiàn)的幾起案子蒸痹,更是在濱河造成了極大的恐慌,老刑警劉巖呛哟,帶你破解...
    沈念sama閱讀 212,884評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叠荠,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡扫责,警方通過(guò)查閱死者的電腦和手機(jī)榛鼎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人者娱,你說(shuō)我怎么就攤上這事蜘渣。” “怎么了肺然?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,369評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵蔫缸,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我际起,道長(zhǎng)拾碌,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,799評(píng)論 1 285
  • 正文 為了忘掉前任街望,我火速辦了婚禮校翔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘灾前。我一直安慰自己防症,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布哎甲。 她就那樣靜靜地躺著,像睡著了一般炭玫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上裙犹,一...
    開(kāi)封第一講書(shū)人閱讀 50,096評(píng)論 1 291
  • 那天衔憨,我揣著相機(jī)與錄音,去河邊找鬼践图。 笑死,一個(gè)胖子當(dāng)著我的面吹牛赫舒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 39,159評(píng)論 3 411
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼心赶,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了椭符?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,917評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤销钝,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后座享,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體似忧,經(jīng)...
    沈念sama閱讀 44,360評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡盯捌,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了箫攀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片幼衰。...
    茶點(diǎn)故事閱讀 38,814評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖汤求,靈堂內(nèi)的尸體忽然破棺而出严拒,到底是詐尸還是另有隱情,我是刑警寧澤裤唠,帶...
    沈念sama閱讀 34,509評(píng)論 4 334
  • 正文 年R本政府宣布种蘸,位于F島的核電站,受9級(jí)特大地震影響诫硕,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜章办,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評(píng)論 3 317
  • 文/蒙蒙 一藕届、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧休偶,春花似錦、人聲如沸词顾。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)垮媒。三九已至,卻和暖如春睡雇,著一層夾襖步出監(jiān)牢的瞬間饮醇,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,123評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工观蓄, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留祠墅,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,641評(píng)論 2 362
  • 正文 我出身青樓亲茅,卻偏偏與公主長(zhǎng)得像狗准,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子腔长,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評(píng)論 2 351

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

  • 引入 在ES5中饼酿,開(kāi)發(fā)者們?yōu)榱藦膶?duì)象和數(shù)組中獲取特定數(shù)據(jù)并賦值給變量胚膊,編寫(xiě)了許多看起來(lái)同質(zhì)化的代碼 這段代碼從op...
    nengzhuan_zhang閱讀 623評(píng)論 0 0
  • 前面的話 我們經(jīng)常定義許多對(duì)象和數(shù)組想鹰,然后有組織地從中提取相關(guān)的信息片段辑舷。在ES6中添加了可以簡(jiǎn)化這種任務(wù)的新特性...
    sunnyghx閱讀 752評(píng)論 0 0
  • 解構(gòu)賦值 ES6 允許按照一定模式槽片,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值碌廓,這被稱為解構(gòu) 1. 數(shù)組的結(jié)構(gòu)賦值 1....
    時(shí)光如劍閱讀 591評(píng)論 0 2
  • 說(shuō)明: 解構(gòu)賦值就是將對(duì)象中的屬性或者數(shù)組中的元素拆解出來(lái), 分別賦值給某些變量; 1. 正常的賦值方式: 對(duì)象:...
    細(xì)雪之舞閱讀 309評(píng)論 0 0
  • 數(shù)組的解構(gòu)賦值 ES6 允許按照一定模式谷婆,從數(shù)組和對(duì)象中提取值辽聊,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructur...
    _羊羽_閱讀 537評(píng)論 0 1