面试题：什么是 ES6 的数组解构和对象解构？

ES6（ECMAScript 2015）引入的解构赋值（Destructuring Assignment）是一种非常强大且优雅的语法，它允许你从数组或对象中提取数据，并将其赋值给变量。这极大地简化了数据提取的代码，使其更简洁、可读性更强。

解构赋值的核心思想是：“模式匹配”。赋值语句左边的模式与右边的数据结构相匹配，匹配成功后，相应的值就被赋给了左边的变量。

---

一、 数组解构 (Array Destructuring)

数组解构是根据元素的位置（索引）来提取值的。

基本语法：

const [variable1, variable2, ..., variableN] = array;

示例：

const colors = ['red', 'green', 'blue'];

// 基本解构：按位置提取
const [first, second] = colors;
console.log(first);  // 'red'
console.log(second); // 'green'

// 跳过元素：用逗号占位
const [ , , third] = colors; // 跳过前两个
console.log(third); // 'blue'

// 使用 Rest 元素：收集剩余元素
const [primary, ...others] = colors;
console.log(primary); // 'red'
console.log(others);  // ['green', 'blue'] (一个新数组)

// 默认值：当对应位置没有值时使用
const [a, b, c, d = 'yellow'] = colors;
console.log(d); // 'yellow' (因为 colors 只有3个元素)

应用场景：

• 交换变量值：
  javascript let a = 1, b = 2; [a, b] = [b, a]; // 交换 a 和 b 的值
• 函数返回多个值：
  

  function getDimensions() {
    return [100, 200]; // 返回一个数组
  }
  const [width, height] = getDimensions(); // 直接解构

---

二、 对象解构 (Object Destructuring)

对象解构是根据属性的名称来提取值的。变量名通常与属性名相同。

基本语法：

const { property1, property2, ..., propertyN } = object;

示例：

const person = {
  name: 'Alice',
  age: 30,
  city: 'Beijing',
  job: {
    title: 'Engineer',
    company: 'Tech Co.'
  }
};

// 基本解构：按属性名提取
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age);  // 30

// 重命名变量：使用 `属性名: 新变量名`
const { city: location, job: occupation } = person;
console.log(location);   // 'Beijing'
console.log(occupation); // { title: 'Engineer', company: 'Tech Co.' }

// 深度解构：提取嵌套对象的属性
const { job: { title, company } } = person;
console.log(title);  // 'Engineer'
console.log(company); // 'Tech Co.'

// 使用 Rest 属性：收集剩余属性 (ES2018)
const { name: personName, ...otherInfo } = person;
console.log(personName); // 'Alice'
console.log(otherInfo);  // { age: 30, city: 'Beijing', job: { ... } } (一个新对象)

// 默认值：当属性不存在时使用
const { hobby = 'Reading', age: years = 0 } = person;
console.log(hobby); // 'Reading' (因为 person 没有 hobby 属性)

应用场景：

• 提取函数参数（特别是配置对象）：
  

  function createUser({ name, email, role = 'user' }) {
    // 函数体内可以直接使用 name, email, role
    console.log(`Creating ${role} named ${name}`);
  }
  createUser({ name: 'Bob', email: 'bob@example.com' }); // role 使用默认值

• 提取 API 响应数据：
  

  const response = { data: { id: 1, username: 'alice' }, status: 200 };
  const { data: { username }, status } = response;

---

三、 解构赋值的核心特点与优势

1. 简洁性：一行代码即可完成多个变量的赋值，替代了多行的点号访问。
2. 可读性：代码意图非常明确，一眼就能看出要提取哪些数据。
3. 灵活性：
   • 支持默认值，提高代码健壮性。
   • 支持重命名，避免变量名冲突。
   • 支持嵌套解构，轻松处理复杂数据结构。
   • 支持 Rest 操作符（...），可以收集剩余元素或属性。
4. 不修改原数据：解构只是提取数据，不会改变原始的数组或对象。
5. 广泛适用：不仅用于变量声明 (const, let)，也可用于变量赋值 (=) 和函数参数。

---

总结

• 数组解构：基于位置提取数据。语法是 [变量] = 数组。
• 对象解构：基于属性名提取数据。语法是 {变量} = 对象。
• 共同点：都使用“模式匹配”的思想，支持默认值、重命名、嵌套和 Rest 操作符。
• 目的：简化从复杂数据结构中提取数据的过程，写出更清晰、更现代的 JavaScript 代码。

在面试中，除了说明定义，最好能结合代码示例展示其用法和优势，并提及它在函数参数、API 数据处理等实际场景中的应用。