ES6 数组解构赋值与实战案例

ES6 数组解构赋值：零基础看懂、面试直接满分

在前端开发和面试中，解构赋值是 ES6 最常用、性价比最高的语法之一。其中数组解构赋值简洁、高效，能极大简化数组取值代码，也是前端面试的基础必考点。今天用通俗的语言 + 实战案例，一次性讲透数组解构赋值。

一、什么是数组解构赋值？（面试标准答案）

数组解构赋值是 ES6 新增语法，允许按照数组的位置顺序，通过模式匹配，快速从数组中提取值，批量赋值给一组变量。

核心特点：按位置匹配、顺序一一对应。

和对象解构最大的区别：

• 数组解构：看下标、看顺序
• 对象解构：看属性名、不看顺序

二、基础语法示例（最核心）

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

// 传统写法 const arr = [10, 20, 30]; const a = arr[0]; const b = arr[1]; const c = arr[2];

ES6 数组解构赋值，一行代码批量取值：

// 数组解构赋值写法 const arr = [10, 20, 30]; const [a, b, c] = arr; console.log(a); // 10 console.log(b); // 20 console.log(c); // 30

原理：左边变量和右边数组按顺序、按下标一一匹配，自动完成赋值。

三、常用进阶用法

1. 按需取值、跳过元素

不需要的元素可以用逗号占位，直接跳过，精准获取所需值。

const arr = [10, 20, 30, 40]; // 跳过第一个、第三个元素，只取第二个和第四个 const [, b, , d] = arr; console.log(b); // 20 console.log(d); // 40

2. 解构默认值（防止 undefined）

当数组元素不足、对应位置值为undefined 时，默认值自动生效，避免变量为 undefined 的报错问题。

const arr = [10]; // 给变量设置默认值 const [a = 1, b = 2] = arr; console.log(a); // 10（有原值，优先用原值） console.log(b); // 2（无原值，启用默认值）

3. 剩余参数解构（收集剩余元素）

配合 ... 剩余参数，快速截取前几项，剩余元素统一打包成新数组。

const arr = [1, 2, 3, 4, 5]; const [first, second, ...rest] = arr; console.log(first); // 1 console.log(second); // 2 console.log(rest); // [3, 4, 5] 剩余元素组成新数组

⚠️ 注意：剩余参数 ... 只能放在解构的最后一位。

四、经典实用场景（开发高频用）

1. 无需临时变量，交换两个变量值

这是数组解构最经典的用法，摆脱传统临时变量中转的写法，代码极简。

let num1 = 1; let num2 = 2; // 一行代码完成变量交换 [num1, num2] = [num2, num1]; console.log(num1, num2); // 2 1

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

当函数返回数组时，可直接解构取值，无需多次通过下标获取。

// 函数返回坐标数组 function getPosition() { return [100, 200]; } // 直接解构取值 const [x, y] = getPosition(); console.log(x, y); // 100 200

五、核心特点总结（面试速背）

• 匹配规则：按数组位置、下标顺序匹配，和变量名无关；
• 支持按需取值、跳过元素、设置默认值、剩余参数收集；
• 简化代码，告别繁琐的数组下标取值，代码更简洁优雅；
• 可实现无临时变量交换数值，开发、面试高频使用。

六、一句话速记口诀

数组解构看顺序，按位取值超省心，可跳可补可收纳，简化代码一级棒。

到此这篇关于ES6 数组解构赋值与实战案例的文章就介绍到这了,更多相关ES6 数组解构赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！