JavaScript中的解构赋值
1. 数组解构赋值
1.1 提取数组中的元素
const [first, second, third] = [1, 2, 3];
console.log(first); // 输出 1
console.log(second); // 输出 2
console.log(third); // 输出 3
1.2 跳过数组中的某些元素
const [, second, ] = [1, 2, 3];
console.log(second); // 输出 2
1.3 使用剩余运算符（…）获取剩余元素
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 输出 1
console.log(rest); // 输出 [2, 3, 4, 5]
2. 对象解构赋值
2.1 提取对象的属性
const person = { name: 'Alice', age: 30, city: 'New York' };
const { name, age, city } = person;
console.log(name); // 输出 'Alice'
console.log(age); // 输出 30
console.log(city); // 输出 'New York'
2.2 重命名变量以匹配对象属性
const person = { firstName: 'Alice', age: 30 };
const { firstName: name, age } = person;
console.log(name); // 输出 'Alice'
console.log(age); // 输出 30
2.3 设置默认值
const person = { name: 'Alice' };
const { name = 'Unknown', age = 0 } = person;
console.log(name); // 输出 'Alice'
console.log(age); // 输出 0，因为age在person对象中不存在
2.4 解构嵌套对象
const person = { name: 'Alice', address: { city: 'New York', country: 'USA' }
};
const { name, address: { city, country } } = person;
console.log(name); // 输出 'Alice'
console.log(city); // 输出 'New York'
console.log(country); // 输出 'USA'
3. 函数参数解构
解构赋值也可以用于函数参数，使得函数签名更加简洁。
function greet({ name, age }) { console.log(`Hello, my name is ${name} and I'm ${age} years old.`);
} greet({ name: 'Bob', age: 25 }); // 输出 "Hello, my name is Bob and I'm 25 years old."
4. 解构与展开（…）运算符的结合
你可以在解构时使用展开运算符来复制对象或数组的一部分到新的变量中。
const person = { name: 'Alice', age: 30, city: 'New York' };
const { name, ...otherInfo } = person;
console.log(name); // 输出 'Alice'
console.log(otherInfo); // 输出 { age: 30, city: 'New York' }