前言

JavaScript ES6 新增解構賦值，可以快讀從陣列或物件中取出成員

• 解構: 將物件或者陣列中的某個成員取出來
• 賦值: 取出來的成員按順序賦值給變數

python裡面的解構賦值

如果有python語法基礎，可以回顧一下python裡面的解構賦值

a, b, c = [1, 2, 3]
print(a)  # 1
print(b)  # 2
print(c)  # 3

abc會分別得到list列表裡面的1,2,3。

還有一種場景，我們在互動a和b變數的值時候，也會用到

a = "hello"
b = "world"
a, b = b, a
print(a)   # "world"
print(b)   # "hello"
 

以上的場景其實就用到了解構賦值

陣列的解構賦值

使用中括號 [ ] 來進行解構陣列， 需注意變數名稱和陣列的值一一對應

let [a, b, c] = ['hello', 'world', 'yoyo'];
console.log(a, b, c);  // hello world yoyo

或者把陣列設定為一個變數,再解構

aa = ['hello', 'world', 'yoyo'];
let [a, b, c] = aa;
console.log(a, b, c);  // hello world yoyo

如果變數的個數，少於陣列的個數，變數會按順序賦值，不會報錯

aa = ['hello', 'world', 'yoyo'];
let [a, b] = aa;
console.log(a); // hello
console.log(b);  // world
 

如果變數個數大於陣列的個數，多餘的變數為undefined

aa = ['hello', 'world', 'yoyo'];
let [a, b, c, d] = aa;
console.log(a);
console.log(b);
console.log(c);
console.log(d);  // undefined

在使用entries() 遍歷Map 成員的時候也可以用到解構賦值，entries() 返回 Map 物件中鍵/值對的迭代器

// for... of 遍歷取key, value
for(let item of m.entries()){
     console.log(item[0], item[1]);
}
 

item 是一個數組[key, value],可以使用解構賦值分別給到變數key, value

// 解構賦值[key, value] = item
for(let [key, value] of m.entries()){
     console.log(key, value);
}

物件的解構賦值

物件的解構用大括號{}

const person = {
    name: 'yoyo',
    age: 20,
    address: () => {
        return "上海市"
    }
}
let {name, age, address} = person;
console.log(name); // yoyo
console.log(age);  // 20
console.log(address());  // 上海市

分別輸出物件的屬性對應的值。