ES6数组解构赋值：跳过元素、默认值与剩余参数实战

脚本专家

ES6 数组解构赋值是前端开发中高频使用的语法，也是面试基础考点。它的核心是：按照数组位置顺序做模式匹配，从右侧数组提取值，并批量赋值给左侧变量。数组解构看下标、看顺序；对象解构看属性名、不看顺序。下面按基础语法、进阶用法和实战场景整理。

一、基础用法：从逐个下标到一行解构

传统数组取值需要逐个通过下标获取，代码冗余：

2. const arr = [10, 20, 30];
3. const a = arr[0];
4. const b = arr[1];
5. const c = arr[2];

复制代码

ES6 数组解构可以一行完成批量取值：

2. const arr = [10, 20, 30];
3. const [a, b, c] = arr;
4. console.log(a); // 10
5. console.log(b); // 20
6. console.log(c); // 30

复制代码

原理是左侧变量和右侧数组按顺序、按下标一一匹配，自动完成赋值。变量名本身不参与匹配，位置才决定取到哪个值。

二、跳过元素与默认值

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

2. const arr = [10, 20, 30, 40];
3. const [, b, , d] = arr;
4. console.log(b); // 20
5. console.log(d); // 40

复制代码

当数组元素不足、对应位置为 undefined 时，解构默认值会生效：

2. const arr = [10];
3. const [a = 1, b = 2] = arr;
4. console.log(a); // 10，有原值优先用原值
5. console.log(b); // 2，无原值启用默认值

复制代码

这里要注意：默认值不是覆盖已有值，只有对应位置没有可用值或值为 undefined 时才启用。

三、剩余参数收集

配合 ... 剩余参数，可以截取前几项，并把剩余元素统一打包成新数组：

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

复制代码

关键限制是：剩余参数 ... 只能放在解构的最后一位。位置放错时，后续元素无法按预期被收集。

四、实战场景

1. 不借助临时变量交换两个变量值：

2. let num1 = 1;
3. let num2 = 2;
4. [num1, num2] = [num2, num1];
5. console.log(num1, num2); // 2 1

复制代码

这是数组解构最经典的用法之一，省去临时变量中转，代码更简洁。

2. 快速解析函数返回的数组：

2. function getPosition() {
3.   return [100, 200];
4. }
6. const [x, y] = getPosition();
7. console.log(x, y); // 100 200

复制代码

函数返回数组时，直接解构取值，不需要多次通过下标访问。

五、核心特点与排查要点

数组解构按位置和下标顺序匹配，和变量名无关；支持按需取值、跳过元素、设置默认值、剩余参数收集；适合简化数组下标取值、解析函数返回数组、交换变量等场景。

如果解构结果不符合预期，可以按以下顺序排查：检查左右两侧位置是否对应；跳过元素时逗号占位是否写对；默认值是否因为对应位置存在原值而未生效；剩余参数是否放在了最后一位。原文没有给出具体浏览器或 Node 版本，实际使用时应以项目目标环境是否支持 ES6 解构为准。