ES6:變數的解構賦值
1、陣列的解構賦值
1.1、基本用法
ES6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(Destructuring)。
很久很久以前,我們為這裡賦值,只能直接指定值。
let a = "x";
let b = "x";
let c = "b";
現在,用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
陣列arr
的0
鍵對應的值是1
,[arr.length - 1]
就是2
鍵,對應的值是3
。
3、字串的解構賦值
字串也可以解構賦值。這是因為此時,字串被轉換成了一個類似陣列的物件。
let [a, b, c] = "xxb";
類似陣列的物件都有一個length屬性,因此還可以對這個屬性解構賦值。
let {length: len} = "xxb666";
相關文章
- ES6 變數的解構賦值變數賦值
- ES6 - 變數的解構賦值解析變數賦值
- ES6之變數的解構賦值變數賦值
- ES6 -- 變數的解構賦值的用途變數賦值
- 深入ES6 三 變數的解構賦值變數賦值
- ES6:變數的結構賦值變數賦值
- ES6入門之變數的解構賦值變數賦值
- es6分享——變數的解構賦值變數賦值
- 變數的解構賦值變數賦值
- ES6標準入門之變數的解構賦值變數賦值
- ES6解構賦值賦值
- ES6 解構賦值賦值
- ES6系列入門學習記錄:變數的解構賦值變數賦值
- ECMAScript6變數的解構賦值變數賦值
- es6學習筆記整理(一)變數宣告、解構賦值筆記變數賦值
- ES6中的解構賦值賦值
- ES6之解構賦值賦值
- ES6 解構賦值+改名賦值
- ES6學習-4 解構賦值(1)陣列的解構賦值賦值陣列
- ECMAScript 6入門 - 變數的解構賦值變數賦值
- ES6學習筆記二(變數結構賦值)筆記變數賦值
- ES6學習解構賦值賦值
- 深入解析 ES6:解構賦值賦值
- ES6 => new Set || map||...解構賦值賦值
- [譯]JavaScript ES6解構賦值指南JavaScript賦值
- JavaScript ECMAScript 6 筆記 -2 《變數的解構賦值》JavaScript筆記變數賦值
- ES6基礎知識——let、const關鍵字和變數的解構賦值變數賦值
- ES6 - let與const,解構賦值賦值
- ES6變數解構變數
- 變數的賦值 指標間接賦值變數賦值指標
- Javascript 解構賦值,將屬性/值從物件/陣列中取出,賦值給其他變數JavaScript賦值物件陣列變數
- ES6小技巧 - 使用解構賦值設定函式引數預設值賦值函式
- 基礎知識梳理~ES6 解構賦值賦值
- php之普通變數賦值、物件賦值、引用賦值的區別PHP變數賦值物件
- ES6 變數宣告與賦值:值傳遞、淺拷貝與深拷貝詳解變數賦值
- 解構賦值賦值
- 【ES6基礎】解構賦值(destructuring assignment)賦值Struct
- ES6學習筆記(五)【解構賦值,Iterator】筆記賦值