JavaScript 解構

解構賦值語法

解構賦值語法將對象屬性解包到變量中：

let {firstName, lastName} = person;

它還可以解包數組和任何其他可迭代對象：

let [firstName, lastName] = person;

對象解構

實例

// 創建一個對象
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// 解構
let {firstName, lastName} = person;

親自試一試

屬性的順序無關緊要：

實例

// 創建一個對象
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// 解構
let {lastName, firstName} = person;

親自試一試

對象默認值

對于可能缺失的屬性，我們可以設置默認值：

實例

// 創建一個對象
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// 解構
let {firstName, lastName, country = "US"} = person;

親自試一試

對象屬性別名

實例

// 創建一個對象
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// 解構
let {lastName: name} = person;

親自試一試

字符串解構

解構的一個用途是解包字符串字符。

實例

// 創建一個字符串
let name = "W3Schools";
// 解構
let [a1, a2, a3, a4, a5] = name;

親自試一試

數組解構

我們可以將數組變量提取到自己的變量中：

實例

// 創建一個數組
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// 解構
let [fruit1, fruit2] = fruits;

親自試一試

跳過數組值

我們可以使用兩個或更多逗號來跳過數組值：

實例

// 創建一個數組
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// 解構
let [fruit1,,,fruit2] = fruits;

親自試一試

數組位置值

我們可以從數組的特定索引位置提取值：

實例

// 創建一個數組
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// 解構
let {[0]: fruit1, [1]: fruit2} = fruits;

親自試一試

剩余屬性

可以在解構語法末尾使用剩余屬性。

此語法會將所有剩余值存儲到一個新數組中：

實例

// 創建一個數組
const numbers = [10, 20, 30, 40, 50, 60, 70];
// 解構
const [a, b, ...rest] = numbers;

親自試一試

解構 Map

實例

// 創建一個 Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);
// 解構
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}

親自試一試

交換 JavaScript 變量

可以使用解構賦值交換兩個變量的值：

實例

let firstName = "Bill";
let lastName = "Gates";
// 解構
[firstName, lastName] = [lastName, firstName];

親自試一試