目錄
- 數組的解構賦值
- 對象的解構賦值
- 字符串的解構賦值
- 函數參數的解構賦值
- 用途
1. 數組的解構賦值
let a = 1;
let b = 2;
let c = 3;
// 等價於
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 // []
另一種情況是不完全解構,即等號左邊的模式,只匹配一部分的等號右邊的數組。這種情況下,解構依然可以成功。
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
對於 Set
結構,也可以使用數組的解構賦值。
let [x, y, z] = new Set(['a', 'b', 'c']);
x // a
y // b
z // c
解構賦值允許指定默認值。
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
2. 對象的解構賦值
對象的解構與數組有一個重要的不同。數組的元素是按次序排列的,變量的取值由它的位置決定;而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // 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'
這實際上說明,對象的解構賦值是下面形式的簡寫
let { foo, bar } = {foo: "aaa", bar: "bbb"};
本質上是下面的寫法
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
也就是說,對象的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變量。真正被賦值的是後者,而不是前者。
let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
上面代碼中,foo 是匹配的模式,baz 纔是變量。真正被賦值的是變量 baz,而不是模式 foo。
3. 字符串的解構賦值
字符串也可以解構賦值。這是因爲此時,字符串被轉換成了一個類似數組的對象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
類似數組的對象都有一個 length
屬性,因此還可以對這個屬性解構賦值。
const {length: len} = 'hello';
len // 5
4.函數參數的解構賦值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
5. 用途
提取 JSON 數據,解構賦值對提取 JSON 對象中的數據,尤其有用。
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]