请解释 ES6 中的解构赋值 (Destructuring Assignment) 的用法。如何交换两个变量的值？

推荐答案

ES6 解构赋值允许你从数组或对象中提取数据，并将其赋值给独立的变量。

数组解构：

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

对象解构：

let obj = { name: 'Alice', age: 30 };
let { name, age } = obj;
console.log(name, age); // 输出: Alice 30

交换两个变量的值：

利用数组解构，可以简洁地交换两个变量的值。

let x = 10;
let y = 20;

[x, y] = [y, x]; // 使用解构交换值

console.log(x, y); // 输出: 20 10

本题详细解读

解构赋值的基本概念

解构赋值是一种语法糖，它使得从数组或对象中提取数据变得更加简洁和直观。它避免了繁琐的通过索引或属性名访问数据的方式。

数组解构

数组解构按照数组中元素的顺序进行赋值。可以忽略某些元素，也可以使用剩余运算符 ... 来收集剩余的元素。

• 基本用法:

  let arr = [1, 2, 3, 4];
  let [first, second, third] = arr; // first = 1, second = 2, third = 3

• 忽略元素:

  let arr = [1, 2, 3, 4];
  let [first, , third] = arr; // first = 1, third = 3, 忽略了第二个元素

• 剩余运算符:

  let arr = [1, 2, 3, 4];
  let [first, ...rest] = arr; // first = 1, rest = [2, 3, 4]

• 默认值:

  let arr = [1];
  let [first, second = 2] = arr; // first = 1, second = 2, 当数组中没有对应元素时，使用默认值

对象解构

对象解构根据属性名进行赋值。可以给变量起别名，也可以设置默认值。

• 基本用法:

  let obj = { name: 'Bob', age: 25 };
  let { name, age } = obj; // name = 'Bob', age = 25

• 起别名:

  let obj = { name: 'Bob', age: 25 };
  let { name: personName, age: personAge } = obj; // personName = 'Bob', personAge = 25

• 默认值:

  let obj = { name: 'Bob' };
  let { name, age = 30 } = obj; // name = 'Bob', age = 30, 当对象中没有对应属性时，使用默认值

• 嵌套解构:

  let obj = { info: { name: 'Bob', age: 25 }};
  let { info: { name, age } } = obj; // name = 'Bob', age = 25

使用解构交换变量的值

在 ES6 之前，交换两个变量的值通常需要借助一个临时变量：

let x = 10;
let y = 20;
let temp = x;
x = y;
y = temp;

而使用解构赋值，可以简化这个过程：

let x = 10;
let y = 20;
[x, y] = [y, x]; // 交换x和y的值

console.log(x, y); // 输出：20 10

这里， [y, x] 创建了一个临时的数组，其元素顺序与原来变量的顺序相反。然后通过数组解构，将这个临时数组的元素分别赋值给了 x 和 y，从而实现了变量值的交换。这种方式更加简洁易懂。