JavaScript ECMAScript 6 筆記 -2 《變量的解構賦值》

ES6 允許按照一定模式财搁,從數(shù)組和對象中提取值,對變量進行賦值鲫尊,這被稱為解構
ES5
let a = 1;
let b = 2;
let c = 3;
ES6
let [a, b, c] = [1, 2, 3];

等號兩邊的模式相同渴庆,左邊的變量就會被賦予對應的值

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

如果解構不成功称鳞,變量的值就等于undefined苍糠。

另一種情況是不完全解構叁丧,即等號左邊的模式,只匹配一部分的等號右邊的數(shù)組岳瞭。這種情況下拥娄,解構依然可以成功。

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

默認值

解構賦值允許指定默認值寝优。
let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

ES6 內部使用嚴格相等運算符(===)条舔,判斷一個位置是否有值枫耳。所以乏矾,如果一個數(shù)組成員不嚴格等于undefined,默認值是不會生效的

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

如果默認值是一個表達式迁杨,那么這個表達式是惰性求值的钻心,即只有在用到的時候,才會求值铅协。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

等價
let x;
if ([1][0] === undefined) {
  x = f();
} else {
  x = [1][0];
}


let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError
最后一個表達式之所以會報錯捷沸,是因為x用到默認值y時,y還沒有聲明狐史。

對象的解構賦值

解構不僅可以用于數(shù)組痒给,還可以用于對象
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

對象的解構與數(shù)組有一個重要的不同。數(shù)組的元素是按次序排列的骏全,變量的取值由它的位置決定苍柏;而對象的屬性沒有次序,變量必須與屬性同名姜贡,才能取到正確的值

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
變量沒有對應的同名屬性试吁,導致取不到值,最后等于undefined楼咳。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

未完熄捍。烛恤。。余耽。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末缚柏,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子碟贾,更是在濱河造成了極大的恐慌船惨,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件缕陕,死亡現(xiàn)場離奇詭異粱锐,居然都是意外死亡,警方通過查閱死者的電腦和手機扛邑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進店門怜浅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蔬崩,你說我怎么就攤上這事恶座。” “怎么了沥阳?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵跨琳,是天一觀的道長。 經常有香客問我桐罕,道長脉让,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任功炮,我火速辦了婚禮溅潜,結果婚禮上,老公的妹妹穿的比我還像新娘薪伏。我一直安慰自己滚澜,他們只是感情好,可當我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布嫁怀。 她就那樣靜靜地躺著设捐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪塘淑。 梳的紋絲不亂的頭發(fā)上萝招,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天,我揣著相機與錄音朴爬,去河邊找鬼即寒。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的母赵。 我是一名探鬼主播逸爵,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼凹嘲!你這毒婦竟也來了玉凯?” 一聲冷哼從身側響起洞斯,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤悴晰,失蹤者是張志新(化名)和其女友劉穎娇澎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體凶朗,經...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡瓷胧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了棚愤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搓萧。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖宛畦,靈堂內的尸體忽然破棺而出瘸洛,到底是詐尸還是另有隱情,我是刑警寧澤次和,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布反肋,位于F島的核電站,受9級特大地震影響踏施,放射性物質發(fā)生泄漏石蔗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一读规、第九天 我趴在偏房一處隱蔽的房頂上張望抓督。 院中可真熱鬧燃少,春花似錦束亏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至阳液,卻和暖如春怕敬,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背帘皿。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工东跪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓虽填,卻偏偏與公主長得像丁恭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子斋日,可洞房花燭夜當晚...
    茶點故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內容

  • 1.數(shù)組的解構賦值 2.對象的解構賦值 3.字符串的解構賦值 4.數(shù)值和布爾值的解構賦值 5.函數(shù)參數(shù)的解構賦值 ...
    卞卞村長L閱讀 917評論 0 0
  • 基本用法 ES6 允許按照一定模式牲览,從數(shù)組和對象中提取值,對變量進行賦值恶守,這被稱為解構(Destructuring...
    嘉奇呦_nice閱讀 789評論 0 2
  • title: ECMAScript 6 - 解構賦值date: 2017年7月31日 12:18:15tags: ...
    是ADI呀閱讀 312評論 0 1
  • 本人是android開發(fā)的,由于最近React Native的火熱,再加上自己完全不懂JS的語法,俗話說的好"落后...
    Bui_vlee閱讀 393評論 0 0
  • 數(shù)組的解構賦值 基本用法 ES6允許按照一定模式第献,從數(shù)組和對象中提取值,對變量進行賦值兔港,這被稱為解構(Destru...
    呼呼哥閱讀 431評論 0 3