JavaScript 解構賦值
解構賦值語法
解構賦值語法將物件屬性解構到變數中
let {firstName, lastName} = person;
它還可以解構陣列和任何其他可迭代物件
let [firstName, lastName] = person;
物件解構
示例
// 建立一個物件
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// 解構
let {firstName, lastName} = person;
自己動手試一試 »
屬性的順序無關緊要
示例
// 建立一個物件
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// 解構
let {lastName, firstName} = person;
自己動手試一試 »
注意
解構不是破壞性的。
解構不會改變原始物件。
物件預設值
對於可能缺失的屬性，我們可以設定預設值
示例
// 建立一個物件
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// 解構
let {firstName, lastName, country = "US"} = person;
自己動手試一試 »
物件屬性別名
示例
// 建立一個物件
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// 解構
let {lastName : name} = person;
自己動手試一試 »
字串解構
解構的一個用途是解構字串字元。
注意
解構可以與任何可迭代物件一起使用。
陣列解構
我們可以將陣列變數提取到我們自己的變數中
示例
// 建立一個數組
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;
自己動手試一試 »
Rest 屬性
您可以在解構語法末尾使用 rest 屬性。
此語法會將所有剩餘值儲存到一個新陣列中
示例
// 建立一個數組
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 = "John";
let lastName = "Doe";
// 解構
[firstName, lastName] = [lastName, firstName];
自己動手試一試 »
