在 ES6 中的数组解构

在 ES6 中，数组解构（Array Destructuring）是一种从数组中提取值并赋值给变量的简洁语法。它允许你以一种更直观和灵活的方式处理数组中的元素。

基本语法

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

在上面的例子中，数组 [1, 2, 3] 被解构为变量 a、b 和 c，分别赋值为 1、2 和 3。

---

常见用法

1. 跳过元素

如果不想解构某些元素，可以使用逗号跳过它们：

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

2. 默认值

如果解构的数组中没有对应的值，可以为变量设置默认值：

const [a, b = 2, c = 3] = [1];
console.log(a); // 1
console.log(b); // 2 (默认值)
console.log(c); // 3 (默认值)

3. 剩余元素

可以使用扩展运算符（...）将剩余的元素解构到一个新数组中：

const [a, ...rest] = [1, 2, 3, 4];
console.log(a); // 1
console.log(rest); // [2, 3, 4]

4. 嵌套解构

如果数组是嵌套的，可以嵌套解构：

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

---

实际应用场景

1. 交换变量

使用数组解构可以轻松交换两个变量的值：

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

2. 函数返回多个值

函数可以返回一个数组，然后使用解构来获取多个返回值：

function getValues() {
  return [1, 2, 3];
}

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

3. 从数组中提取部分值

如果只需要数组中的某些值，可以使用解构来提取：

const arr = [1, 2, 3, 4, 5];
const [first, second] = arr;
console.log(first); // 1
console.log(second); // 2

---

注意事项

1. 解构的数组长度：如果解构的变量数量多于数组中的元素数量，多余的变量会被赋值为 undefined，除非设置了默认值。

   const [a, b, c] = [1, 2];
   console.log(a); // 1
   console.log(b); // 2
   console.log(c); // undefined

2. 解构非数组对象：如果解构的不是一个数组，而是一个类似数组的对象（如字符串、arguments 对象等），解构仍然可以工作，因为它们具有 length 属性。

   const [a, b] = "hi";
   console.log(a); // 'h'
   console.log(b); // 'i'

3. 解构空数组：如果解构一个空数组，所有变量都会被赋值为 undefined，除非设置了默认值。

   const [a, b = 2] = [];
   console.log(a); // undefined
   console.log(b); // 2

---

总结

数组解构是 ES6 中非常强大且简洁的特性，能够极大地简化从数组中提取值的操作。它支持跳过元素、设置默认值、剩余元素解构以及嵌套解构，适用于多种场景，如交换变量、函数返回多个值等。