ES6:變量的解構賦值

1分瘦、數組的解構賦值

1.1液荸、基本用法

ES6 允許按照一定模式瞻佛,從數組和對象中提取值,對變量進行賦值娇钱,這被稱為解構(Destructuring)伤柄。
很久很久以前,我們?yōu)檫@里賦值文搂,只能直接指定值适刀。

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

現(xiàn)在,用ES6煤蹭,我們可以寫成:

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

使用嵌套數組進行結構例子笔喉。

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

如果解構不成功,變量的值就等于undefined

let [x] = [];
let [a, b] = [1];
解構賦值

1.2硝皂、默認值

解構賦值允許指定默認值常挚。

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

注意,ES6 內部使用嚴格相等運算符(===)稽物,判斷一個位置是否有值奄毡。所以,如果一個數組成員不嚴格等于undefined贝或,默認值是不會生效的吼过。

解構賦值

2锐秦、對象的解構賦值

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

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的盗忱,變量的取值由它的位置決定酱床;而對象的屬性沒有次序,變量必須與屬性同名趟佃,才能取到正確的值斤葱。


對象解構賦值

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

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

let o = {first: "x", last: "b"};
let {first: f, last: l} = o;
對象解構賦值

這實際上說明,對象的解構賦值是下面形式的簡寫料身。

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

也就是說汤纸,對象的解構賦值的內部機制,是先找到同名屬性芹血,然后再賦給對應的變量贮泞。真正被賦值的是后者,而不是前者幔烛。

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

上面代碼中啃擦,a是匹配的模式,c才是變量饿悬。真正被賦值的是變量c令蛉,而不是模式a

對象解構賦值

對象的解構也可以指定默認值狡恬。

let {a: b = 1} = {a: 0};
let {x: y = 3} = {x: 5};
對象解構賦值

默認值生效的條件是珠叔,對象的屬性值嚴格等于undefined。
如果解構不成功弟劲,變量的值就等于undefined

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

由于數組本質是特殊的對象祷安,因此可以對數組進行對象屬性的解構。

let arr = [1, 2, 3];
let {0: first, [arr.length - 1]: last} = arr;
first // 1
last // 3
對象解構賦值

數組arr0鍵對應的值是1兔乞,[arr.length - 1]就是2鍵汇鞭,對應的值是3

3庸追、字符串的解構賦值

字符串也可以解構賦值霍骄。這是因為此時,字符串被轉換成了一個類似數組的對象锚国。

let [a, b, c] = "xxb";
字符串解構賦值

類似數組的對象都有一個length屬性腕巡,因此還可以對這個屬性解構賦值。

let {length: len} = "xxb666";
字符串解構賦值
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末血筑,一起剝皮案震驚了整個濱河市绘沉,隨后出現(xiàn)的幾起案子煎楣,更是在濱河造成了極大的恐慌,老刑警劉巖车伞,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件择懂,死亡現(xiàn)場離奇詭異,居然都是意外死亡另玖,警方通過查閱死者的電腦和手機困曙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來谦去,“玉大人慷丽,你說我怎么就攤上這事■蓿” “怎么了要糊?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長妆丘。 經常有香客問我锄俄,道長,這世上最難降的妖魔是什么勺拣? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任奶赠,我火速辦了婚禮,結果婚禮上药有,老公的妹妹穿的比我還像新娘毅戈。我一直安慰自己,他們只是感情好愤惰,可當我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布竹祷。 她就那樣靜靜地躺著,像睡著了一般羊苟。 火紅的嫁衣襯著肌膚如雪塑陵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天蜡励,我揣著相機與錄音令花,去河邊找鬼。 笑死凉倚,一個胖子當著我的面吹牛兼都,可吹牛的內容都是我干的。 我是一名探鬼主播稽寒,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼扮碧,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起慎王,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蚓土,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后赖淤,有當地人在樹林里發(fā)現(xiàn)了一具尸體蜀漆,經...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年咱旱,在試婚紗的時候發(fā)現(xiàn)自己被綠了确丢。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡吐限,死狀恐怖鲜侥,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情诸典,我是刑警寧澤剃毒,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站搂赋,受9級特大地震影響,放射性物質發(fā)生泄漏益缠。R本人自食惡果不足惜脑奠,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望幅慌。 院中可真熱鬧宋欺,春花似錦、人聲如沸胰伍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽骂租。三九已至祷杈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間渗饮,已是汗流浹背但汞。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留互站,地道東北人私蕾。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像胡桃,于是被迫代替她去往敵國和親踩叭。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內容

  • 1.數組的解構賦值 2.對象的解構賦值 3.字符串的解構賦值 4.數值和布爾值的解構賦值 5.函數參數的解構賦值 ...
    卞卞村長L閱讀 917評論 0 0
  • 1、數組的解構賦值 1.1容贝、基本用法 ES6 允許按照一定模式自脯,從數組和對象中提取值,對變量進行賦值嗤疯,這被稱為解構...
    壯哉我大前端閱讀 384評論 0 1
  • 基本概念 只要某種數據結構具有Iterator接口都可以采用解構賦值和for of循環(huán) 如:1數組(有序)2對象(...
    coolheadedY閱讀 265評論 0 0
  • 針對ES6的變量賦值的有六種方式 默認數組對象字符串數值與布爾值函數 1冤今,解構賦值允許指定默認值。 2茂缚,數組的解構...
    sponing閱讀 202評論 0 1
  • 各位領導戏罢、各位來賓、大家好: 我是一號選手黃立新 大凡中國人都知道脚囊, 旗袍是中國和世界華人女性的傳統(tǒng)服裝龟糕, 被譽為...
    黃曉紅閱讀 311評論 0 1