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