数组解构的基本用法

数组解构的概念

数组解构是ES6引入的一种语法特性，允许按照一定模式从数组或可迭代对象中提取值，然后对变量进行赋值。这种写法本质上属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

// 基本示例
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

基本解构模式

最简单的解构形式是将数组中的元素按顺序赋值给变量。解构时，左侧的变量名放在方括号中，与右侧数组的位置一一对应。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors;
console.log(firstColor);  // "red"
console.log(secondColor); // "green"

可以跳过不需要的元素，使用逗号占位：

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

默认值设置

当解构的值严格等于undefined时，可以使用默认值：

const [a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

const [x = 1, y = 2] = [undefined, null];
console.log(x); // 1
console.log(y); // null

嵌套数组解构

对于嵌套数组，解构同样适用：

const nested = [1, [2, 3], 4];
const [i, [j, k], l] = nested;
console.log(i); // 1
console.log(j); // 2
console.log(k); // 3
console.log(l); // 4

剩余模式

可以使用剩余模式将数组剩余部分赋值给一个变量：

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

注意剩余元素必须是解构模式中的最后一个元素：

// 会报错
const [...rest, last] = [1, 2, 3, 4];

变量交换

数组解构可以轻松实现变量值的交换，无需临时变量：

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

函数参数解构

函数参数也可以使用数组解构：

function sum([x, y]) {
  return x + y;
}
console.log(sum([1, 2])); // 3

可迭代对象解构

数组解构不仅适用于数组，也适用于任何可迭代对象：

const [a, b, c] = 'xyz';
console.log(a); // 'x'
console.log(b); // 'y'
console.log(c); // 'z'

const [first, ...rest] = new Set([1, 2, 3]);
console.log(first); // 1
console.log(rest); // [2, 3]

解构失败情况

当解构不成功时，变量的值等于undefined：

const [missing] = [];
console.log(missing); // undefined

实际应用场景

数组解构在多种场景下非常有用：

1. 函数返回多个值：

function getCoordinates() {
  return [12.345, 67.890];
}
const [latitude, longitude] = getCoordinates();

2. 正则表达式匹配结果：

const url = 'https://example.com/users/123';
const matches = url.match(/\/users\/(\d+)/);
const [, userId] = matches;
console.log(userId); // "123"

3. 处理CSV数据：

const csvLine = '1997,Ford,E350';
const [year, make, model] = csvLine.split(',');

注意事项

使用数组解构时需要注意以下几点：

• 解构赋值的右侧必须是可迭代对象
• 如果解构目标不是可迭代对象，会抛出TypeError
• 剩余元素必须是最后一个元素
• 默认值只在undefined时生效
• 解构不会影响原始数组

// 错误示例
const [a, b] = {}; // TypeError: {} is not iterable

与对象解构的区别

虽然数组解构和对象解构都是解构赋值的表现形式，但它们有几个关键区别：

1. 数组解构使用方括号[]，对象解构使用花括号{}
2. 数组解构按位置匹配，对象解构按属性名匹配
3. 数组解构可以跳过元素，对象解构不能跳过属性

// 数组解构
const [x, , y] = [1, 2, 3];

// 对象解构
const {a, c} = {a: 1, b: 2, c: 3};

高级用法示例

结合其他ES6特性，数组解构可以实现更复杂的操作：

1. 与展开运算符结合：

const [first, ...others] = ['a', 'b', 'c', 'd'];
console.log(others.join('-')); // "b-c-d"

2. 在循环中使用：

const users = [
  ['John', 30],
  ['Jane', 25]
];

for (const [name, age] of users) {
  console.log(`${name} is ${age} years old`);
}

3. 多层嵌套解构：

const metadata = [
  { title: 'Scratchpad', tags: ['javascript', 'css'] },
  { title: 'Work', tags: ['react', 'redux'] }
];

const [, { tags: [, framework] }] = metadata;
console.log(framework); // "redux"