CF526C Om Nom and Candies(思維)
阿新 • • 發佈:2020-09-08
ES6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(Destructuring)。
1.變數的解構賦值,即“模式匹配”,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。
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 // []
以下兩個賦值語句中,foo都屬於解構不成功,等於undefined.
let [foo] = []; let [bar, foo] = [1];
不完全解構,匹配等號右邊的一部分變數:
let [a,b]=[1,2,3];
y //1
b //2
如果等號右邊不是可遍歷的結構,則會報錯。(只要某種資料結構具有 Iterator 介面,就可以採用解構賦值)
// 報錯
let [foo] = 1;
可以在等號左邊使用預設值,ES6 內部使用嚴格相等運算子(===),判斷一個位置是否有值。所以,只有當一個數組成員嚴格等於undefined,預設值才會生效。如果一個數組成員是null,預設值就不會生效,因為null不嚴格等於undefined。
let [x = 1] = [undefined]; x // 1 let [x = 1] = [null]; x // null
- 陣列的解構中,對變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。、
let { foo ,bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
上面其實是下面的簡寫:
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
const node = { loc: { start: { line: 1, column: 5 } } }; let { loc, loc: { start }, loc: { start: { line }} } = node; line // 1 loc // Object {start: Object} start // Object {line: 1, column: 5}
上面程式碼有三次解構賦值,分別是對loc、start、line三個屬性的解構賦值。注意,最後一次對line屬性的解構賦值之中,只有line是變數,loc和start都是模式,不是變數。
還可以巢狀賦值:
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true]
注意:
// 報錯,由於bar的父屬性不存在
let {foo: {bar}} = {baz: 'baz'};
物件解構中預設值生效的條件同樣為物件的屬性值嚴格等於undefined。
var {x = 3} = {x: undefined};
x // 3
注意點
(1)如果要將一個已經宣告的變數用於解構賦值
// 錯誤的寫法,大括號放在行首js會將其理解成程式碼塊
let x;
{x} = {x: 1};
// SyntaxError: syntax error
// 正確的寫法
let x;
({x} = {x: 1});
(2)由於陣列本質是特殊的物件,因此可以對陣列進行物件屬性的解構。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
(3)字串的解構賦值
字串也可以解構賦值。這是因為此時,字串被轉換成了一個類似陣列的物件。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
(4)數值和布林值的解構賦值
解構賦值時,如果等號右邊是數值和布林值,則會先轉為物件。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
上面程式碼中,數值和布林值的包裝物件都有toString屬性,因此變數s都能取到值。
解構賦值的規則是,只要等號右邊的值不是物件或陣列,就先將其轉為物件。由於undefined和null無法轉為物件,所以對它們進行解構賦值,都會報錯。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError