ES6:變量的解構(gòu)賦值

1槽华、數(shù)組的解構(gòu)賦值

1.1、基本用法

ES6 允許按照一定模式,從數(shù)組和對(duì)象中提取值祟敛,對(duì)變量進(jìn)行賦值疤坝,這被稱為解構(gòu)(Destructuring)。
很久很久以前馆铁,我們?yōu)檫@里賦值跑揉,只能直接指定值。

let a = "x";
let b = "x";
let c = "b";

現(xiàn)在叼架,用ES6畔裕,我們可以寫成:

let [a, b, c] = ["x", "x", "b"];

使用嵌套數(shù)組進(jìn)行結(jié)構(gòu)例子。

let [a, ...b] = [1, 2, 3, 4];
// 輸出
a // 1
b // [2, 3, 4]
解構(gòu)賦值
let [x, y, ...z] = ["x"];
x // "x"
y // undefined
z // []
解構(gòu)賦值

如果解構(gòu)不成功乖订,變量的值就等于undefined

let [x] = [];
let [a, b] = [1];
解構(gòu)賦值

1.2扮饶、默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值。

let [a = true] = [];
let [x, y = "b"] = ["a", "diudiudiu"];
let [o, p = "hehe'] = ["haha", undefined];

注意乍构,ES6 內(nèi)部使用嚴(yán)格相等運(yùn)算符(===)甜无,判斷一個(gè)位置是否有值。所以哥遮,如果一個(gè)數(shù)組成員不嚴(yán)格等于undefined岂丘,默認(rèn)值是不會(huì)生效的。

解構(gòu)賦值

2眠饮、對(duì)象的解構(gòu)賦值

let {a, b} = {a: "x", b: "y"};

對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同奥帘。數(shù)組的元素是按次序排列的,變量的取值由它的位置決定仪召;而對(duì)象的屬性沒(méi)有次序寨蹋,變量必須與屬性同名,才能取到正確的值扔茅。


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

如果變量名與屬性名不一致已旧,必須寫成下面這樣。

let {a: c} = {a: "x", b: "y"};
c // x

let o = {first: "x", last: "b"};
let {first: f, last: l} = o;
對(duì)象解構(gòu)賦值

這實(shí)際上說(shuō)明召娜,對(duì)象的解構(gòu)賦值是下面形式的簡(jiǎn)寫运褪。

let { foo: foo, bar: bar } = { foo: "x", bar: "b" };

也就是說(shuō),對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制玖瘸,是先找到同名屬性秸讹,然后再賦給對(duì)應(yīng)的變量。真正被賦值的是后者雅倒,而不是前者璃诀。

let {a: c} = {a: "x", b: "y"};

上面代碼中,a是匹配的模式屯断,c才是變量文虏。真正被賦值的是變量c,而不是模式a殖演。

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

對(duì)象的解構(gòu)也可以指定默認(rèn)值氧秘。

let {a: b = 1} = {a: 0};
let {x: y = 3} = {x: 5};
對(duì)象解構(gòu)賦值

默認(rèn)值生效的條件是,對(duì)象的屬性值嚴(yán)格等于undefined趴久。
如果解構(gòu)不成功丸相,變量的值就等于undefined

let {a} = {b: "c"};
a // undefined

由于數(shù)組本質(zhì)是特殊的對(duì)象,因此可以對(duì)數(shù)組進(jìn)行對(duì)象屬性的解構(gòu)彼棍。

let arr = [1, 2, 3];
let {0: first, [arr.length - 1]: last} = arr;
first // 1
last // 3
對(duì)象解構(gòu)賦值

數(shù)組arr0鍵對(duì)應(yīng)的值是1灭忠,[arr.length - 1]就是2鍵,對(duì)應(yīng)的值是3座硕。

3弛作、字符串的解構(gòu)賦值

字符串也可以解構(gòu)賦值。這是因?yàn)榇藭r(shí)华匾,字符串被轉(zhuǎn)換成了一個(gè)類似數(shù)組的對(duì)象映琳。

let [a, b, c] = "xxb";
字符串解構(gòu)賦值

類似數(shù)組的對(duì)象都有一個(gè)length屬性,因此還可以對(duì)這個(gè)屬性解構(gòu)賦值蜘拉。

let {length: len} = "xxb666";
字符串解構(gòu)賦值

————
前端·小b
紙上學(xué)來(lái)終覺(jué)淺萨西,絕知此事要躬行

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市旭旭,隨后出現(xiàn)的幾起案子谎脯,更是在濱河造成了極大的恐慌,老刑警劉巖持寄,帶你破解...
    沈念sama閱讀 219,039評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件源梭,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡际看,警方通過(guò)查閱死者的電腦和手機(jī)咸产,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)仲闽,“玉大人脑溢,你說(shuō)我怎么就攤上這事±敌溃” “怎么了屑彻?”我有些...
    開封第一講書人閱讀 165,417評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)顶吮。 經(jīng)常有香客問(wèn)我社牲,道長(zhǎng),這世上最難降的妖魔是什么悴了? 我笑而不...
    開封第一講書人閱讀 58,868評(píng)論 1 295
  • 正文 為了忘掉前任搏恤,我火速辦了婚禮违寿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘熟空。我一直安慰自己藤巢,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6 392
  • 文/花漫 我一把揭開白布息罗。 她就那樣靜靜地躺著掂咒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪迈喉。 梳的紋絲不亂的頭發(fā)上绍刮,一...
    開封第一講書人閱讀 51,692評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音挨摸,去河邊找鬼孩革。 笑死,一個(gè)胖子當(dāng)著我的面吹牛得运,可吹牛的內(nèi)容都是我干的嫉戚。 我是一名探鬼主播,決...
    沈念sama閱讀 40,416評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼澈圈,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼彬檀!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起瞬女,我...
    開封第一講書人閱讀 39,326評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤窍帝,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后诽偷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坤学,經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3 337
  • 正文 我和宋清朗相戀三年报慕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了深浮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡眠冈,死狀恐怖飞苇,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蜗顽,我是刑警寧澤布卡,帶...
    沈念sama閱讀 35,790評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站雇盖,受9級(jí)特大地震影響忿等,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜崔挖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 331
  • 文/蒙蒙 一贸街、第九天 我趴在偏房一處隱蔽的房頂上張望庵寞。 院中可真熱鬧,春花似錦薛匪、人聲如沸皇帮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至将谊,卻和暖如春冷溶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背尊浓。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工逞频, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人栋齿。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3 373
  • 正文 我出身青樓苗胀,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親瓦堵。 傳聞我的和親對(duì)象是個(gè)殘疾皇子基协,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2 355

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

  • 1.數(shù)組的解構(gòu)賦值 2.對(duì)象的解構(gòu)賦值 3.字符串的解構(gòu)賦值 4.數(shù)值和布爾值的解構(gòu)賦值 5.函數(shù)參數(shù)的解構(gòu)賦值 ...
    卞卞村長(zhǎng)L閱讀 917評(píng)論 0 0
  • 1、數(shù)組的解構(gòu)賦值 1.1菇用、基本用法 ES6 允許按照一定模式澜驮,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值惋鸥,這被稱為解構(gòu)...
    開車去環(huán)游世界閱讀 150評(píng)論 0 0
  • 基本概念 只要某種數(shù)據(jù)結(jié)構(gòu)具有Iterator接口都可以采用解構(gòu)賦值和for of循環(huán) 如:1數(shù)組(有序)2對(duì)象(...
    coolheadedY閱讀 265評(píng)論 0 0
  • 針對(duì)ES6的變量賦值的有六種方式 默認(rèn)數(shù)組對(duì)象字符串?dāng)?shù)值與布爾值函數(shù) 1杂穷,解構(gòu)賦值允許指定默認(rèn)值。 2卦绣,數(shù)組的解構(gòu)...
    sponing閱讀 202評(píng)論 0 1
  • 當(dāng)你在努力成長(zhǎng)時(shí)耐量,如果有其他人嘲笑你,你完全可以無(wú)視他們的嘲弄滤港。 原因很簡(jiǎn)單: 他們并不知道自己在嘲笑什么廊蜒。 真正...
    寶中的寶閱讀 679評(píng)論 0 0