8.1 解構賦值對象
在 JavaScript 中的解構賦值 是一種語法，可以將數組中的值或對象中的屬性拆開，賦值給單獨的變數。這使得代碼更乾淨，更容易閱讀。在本課程中，我們將詳細探討對象和數組的解構賦值，以及各種例子和應用。
1. 基本語法
解構賦值對象允許從對象中提取屬性值並將它們賦值給變數：
JavaScript
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // 顯示: John
console.log(age); // 顯示: 30
console.log(isStudent); // 顯示: false
2. 賦值給新變量
可以將對象屬性的值賦值給其他名稱的變量：
JavaScript
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // 顯示: John
console.log(personAge); // 顯示: 30
3. 預設值
如果對象中不存在某個屬性，可以設定預設值：
JavaScript
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // 顯示: true
4. 嵌套解構賦值
可以從嵌套對象中提取值：
JavaScript
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // 顯示: New York
console.log(country); // 顯示: USA
5. 函數參數中的解構賦值
解構賦值可以用在函數參數中：
JavaScript
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // 顯示: Hello, my name is John and I am 30 years old.
8.2 解構賦值數組
1. 基本語法
解構賦值數組允許從數組中提取元素的值並賦值給變量：
JavaScript
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // 顯示: apple
console.log(second); // 顯示: banana
console.log(third); // 顯示: cherry
2. 跳過元素
可以跳過不需要提取的數組元素：
JavaScript
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // 顯示: apple
console.log(third); // 顯示: cherry
3. 預設值
可以為數組元素設置預設值：
JavaScript
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // 顯示: banana
4. 嵌套解構賦值
可以從嵌套數組中提取值：
JavaScript
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // 顯示: 2
console.log(three); // 顯示: 3
5. 函數參數中的解構賦值
解構賦值可以用在函數參數中對數組進行處理：
JavaScript
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // 顯示: John Doe
8.3 解構賦值的應用範例
1. 交換變量值
解構賦值可以輕鬆交換變量的值：
JavaScript
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 顯示: 2
console.log(b); // 顯示: 1
2. 從對象中提取數據
解構賦值簡化了從對象中提取數據的過程，例如，從 API 響應中：
JavaScript
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // 顯示: John Doe
console.log(email); // 顯示: john@example.com
3. 函數中的預設設置
解構賦值允許輕鬆設置函數參數的預設值：
JavaScript
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// 顯示: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// 顯示: { name: 'Anonymous', age: 0, isAdmin: false }
4. 數組和函數
解構賦值簡化了數組的操作，特別是在使用數組方法時：
JavaScript
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 顯示: 1
console.log(second); // 顯示: 2
console.log(rest); // 顯示: [3, 4, 5]
GO TO FULL VERSION