JavaScript 中的解構賦值 是一種語法，允許將陣列中的值或物件中的屬性解包到不同的變數中。使得擷取資料時程式碼更加簡潔，也更容易閱讀。
數組解構從數組中提取值並將它們分配給變數。
範例：
const fruits = ["Apple", "Banana", "Cherry"]; const [first, second, third] = fruits; console.log(first); // Output: Apple console.log(second); // Output: Banana console.log(third); // Output: Cherry
您可以透過在逗號之間留空空格來跳過元素。
範例：
const numbers = [1, 2, 3, 4, 5]; const [first, , third] = numbers; console.log(first); // Output: 1 console.log(third); // Output: 3
如果陣列元素未定義，可以使用預設值。
範例：
const colors = ["Red"]; const [primary, secondary = "Blue"] = colors; console.log(primary); // Output: Red console.log(secondary); // Output: Blue
使用剩餘運算子...將剩餘元素收集到陣列中。
範例：
const numbers = [1, 2, 3, 4]; const [first, ...rest] = numbers; console.log(first); // Output: 1 console.log(rest); // Output: [2, 3, 4]
物件解構將物件的屬性提取到變數中。
範例：
const person = { name: "Alice", age: 25, country: "USA" };
const { name, age } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 25
您可以在使用冒號 (:) 解構時重新命名變數。
範例：
const person = { name: "Alice", age: 25 };
const { name: fullName, age: years } = person;
console.log(fullName); // Output: Alice
console.log(years); // Output: 25
如果屬性未定義，可以使用預設值。
範例：
const person = { name: "Alice" };
const { name, age = 30 } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 30
您可以解構嵌套物件的屬性。
範例：
const employee = {
id: 101,
details: { name: "Bob", position: "Developer" },
};
const {
details: { name, position },
} = employee;
console.log(name); // Output: Bob
console.log(position); // Output: Developer
使用剩餘運算子來收集剩餘的屬性。
範例：
const person = { name: "Alice", age: 25, country: "USA" };
const { name, ...others } = person;
console.log(name); // Output: Alice
console.log(others); // Output: { age: 25, country: "USA" }
您可以結合陣列和物件解構。
範例：
const data = {
id: 1,
items: ["Apple", "Banana", "Cherry"],
};
const {
id,
items: [firstItem],
} = data;
console.log(id); // Output: 1
console.log(firstItem); // Output: Apple
您可以直接在函數參數中解構數組或物件。
A.解構參數中的陣列:
function sum([a, b]) {
return a + b;
}
console.log(sum([5, 10])); // Output: 15
B.解構參數中的物件:
const fruits = ["Apple", "Banana", "Cherry"]; const [first, second, third] = fruits; console.log(first); // Output: Apple console.log(second); // Output: Banana console.log(third); // Output: Cherry
const numbers = [1, 2, 3, 4, 5]; const [first, , third] = numbers; console.log(first); // Output: 1 console.log(third); // Output: 3
const colors = ["Red"]; const [primary, secondary = "Blue"] = colors; console.log(primary); // Output: Red console.log(secondary); // Output: Blue
const numbers = [1, 2, 3, 4]; const [first, ...rest] = numbers; console.log(first); // Output: 1 console.log(rest); // Output: [2, 3, 4]
掌握解構賦值可以讓你的 JavaScript 程式碼更具可讀性和效率。
嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，精通前端和後端技術。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。
以上是揭秘 JavaScript 中的解構賦值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
