什么是解构赋值？

推荐答案

解构赋值是 ECMAScript 6（ES6）引入的一种语法，允许从数组或对象中提取值，并将这些值赋给变量。它提供了一种简洁的方式来从复杂的数据结构中提取数据。

数组解构赋值

const [a, b] = [1, 2];
console.log(a); // 输出: 1
console.log(b); // 输出: 2

对象解构赋值

const { name, age } = { name: 'Alice', age: 25 };
console.log(name); // 输出: Alice
console.log(age); // 输出: 25

本题详细解读

数组解构赋值

数组解构赋值允许你从数组中提取值，并将这些值赋给变量。语法是通过在赋值语句的左边使用方括号 [] 来匹配数组中的元素。

const [x, y, z] = [10, 20, 30];
console.log(x); // 输出: 10
console.log(y); // 输出: 20
console.log(z); // 输出: 30

你还可以使用默认值，当数组中的某个元素为 undefined 时，变量将使用默认值。

const [a = 1, b = 2] = [10];
console.log(a); // 输出: 10
console.log(b); // 输出: 2

对象解构赋值

对象解构赋值允许你从对象中提取属性，并将这些属性值赋给变量。语法是通过在赋值语句的左边使用花括号 {} 来匹配对象中的属性。

const { firstName, lastName } = { firstName: 'John', lastName: 'Doe' };
console.log(firstName); // 输出: John
console.log(lastName); // 输出: Doe

你也可以为变量指定不同的名称，或者使用默认值。

const { firstName: fn = 'Anonymous', lastName: ln } = { lastName: 'Smith' };
console.log(fn); // 输出: Anonymous
console.log(ln); // 输出: Smith

嵌套解构

解构赋值还支持嵌套结构，可以从嵌套的数组或对象中提取数据。

const [a, [b, c]] = [1, [2, 3]];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3

const { user: { name, age } } = { user: { name: 'Alice', age: 25 } };
console.log(name); // 输出: Alice
console.log(age); // 输出: 25

解构赋值的应用场景

解构赋值在函数参数、模块导入、处理 API 响应等场景中非常有用，能够简化代码并提高可读性。

function getUserInfo({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

getUserInfo({ name: 'Bob', age: 30 }); // 输出: Name: Bob, Age: 30

解构赋值是 ES6 中一个非常强大的特性，能够显著提升代码的简洁性和可维护性。