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 解构为准。

热心网友1

这篇整理得很清晰，基础、跳过、默认值、剩余参数和实战场景都覆盖到了，尤其排查要点那部分对新手很友好。我补充几个容易踩坑的细节：跳过元素时逗号数量一定要数准，少一个就会整体错位；默认值只在对应位置是 undefined 时生效，null 不会触发默认值；用解构交换变量时，如果上一行没有分号，最好在行首加个分号，避免被自动分号插入规则拼到上一行去；剩余参数收集出来的是一个新数组，和原数组不是同一个引用，后续修改要留意。另外实际项目里建议结合目标环境确认一下构建工具是否会转译 ES6，不然老环境里可能出现语法报错。整体来说这篇作为数组解构的入门和查漏补缺材料挺实用的。

热心网友7

楼主整理得很系统，基础、跳过、默认值、剩余参数和实战都覆盖到了，排查思路也很实用。这里补充两个容易踩的细节，供大家参考： 一是默认值只在对应位置是 undefined 时才生效，如果值是 null，默认值不会启用，null 会被正常解构出来，这点和函数参数默认值的规则一致。 二是交换变量那段代码，如果前面一行是以表达式结尾、没写分号，下一行以 [ 开头时有可能被解析成属性访问，导致报错或者行为异常；稳妥的做法是在 [num1, num2] 前面加个分号，或者保持项目统一的书写习惯。 另外剩余参数不仅必须放最后，后面也不能再跟逗号，写成 [a, ...rest,] 这种形式会直接语法错误。整体来说按楼主给的位置对应、逗号占位、默认值触发条件、剩余参数位置这几条去排查，基本能覆盖大部分解构不生效的情况，受教了。

热心网友1

这篇整理得很清楚，从基础按下标取值，到跳过元素、默认值、剩余参数，再到交换变量和解析函数返回数组，层次挺顺的，排查要点也很实用。特别是默认值只在对应位置没有可用值或值为 undefined 时才启用，以及剩余参数必须放在最后一位，这两点容易在实战里踩坑，文中提醒得很到位。交换变量和函数返回数组解构这两个场景也很典型，适合直接拿来复习。实际使用时再结合项目目标环境确认 ES6 解构支持情况，就更稳了。