5. 数组解构与扩展运算符

数组解构就是一次把数组里的多个值拆开赋值给多个变量，扩展运算符 ... 就是把数组摊平。

核心两种：
① 解构——let [a,b,c] = [1,2,3]
② ...扩展——...arr 把数组展开成一个个值

坑：解构要按位置对应、... 只能在赋值左边或函数参数里用、默认值用 = 设。

5.1 互动演示（解构 / 拷贝 vs 引用 / 去重 / reverse 坑）

5.2 知识点逐条讲解（配合代码）

① 数组解构：一行把格子里的东西拆进变量

以前取前三个值得写三行，ES6 解构一行按顺序对齐赋值。注意是按格子顺序对上，不是按名字。

// 解构：按位置一个个接出来
let arr = [10, 20, 30];

// a接10，b接20，c接30
let [a, b, c] = arr;

// 10 20 30
console.log(a, b, c);

// 只想要前两个，后面不管
// 交换两个数，一行搞定
let [x, y] = arr;

let m = 5,
  n = 10;

// m 和 n 互换，不用临时杯
[m, n] = [n, m];

② 三个点 ...：把整排格子「摊平」

三个点 ... 能把数组拆成一个个单独的值，常用三件事：复制一份、合并、去重。

// ① 复制一份全新数组
const arr = [10, 20, 30];

// 摊开后重新包一遍，互不相干
const newArr = [...arr];

// ② 把两排拼成一排
let arr1 = [1, 2],
  arr2 = [3, 4];

// [1,2,3,4]
let merge = [...arr1, ...arr2];

// ③ 配 Set 去重（工作中最常用）
// 有重复
const dup = [1, 2, 2, 3, 3, 3];

// Set 自动去重，...再转回数组 → [1,2,3]
const unique = [...new Set(dup)];

③ 大坑：直接 arr2 = arr1 不是复制！

如果你写 arr2 = arr1 以为是复制了一份，就会踩坑。因为数组是「引用类型」（第11节细讲），= 只是把同一间房的钥匙又配了一把给 arr2，两个变量指向同一排格子。改一个，另一个也跟着变。真想复制一份，必须用 [...arr]。

let arr1 = [1, 2, 3];

// 只是再配一把钥匙进同一间房
let arr2 = arr1;

// 用钥匙往房里加了个99
arr2.push(99);

// 开门一看，arr1 也变成 [1,2,3,99]
console.log(arr1);

// 这次是真复制了一份新房
let arr3 = [...arr1];

// 改新房
arr3.push(7);

// 老房不受影响，还是 [1,2,3,99]
console.log(arr1);

④ reverse() 反转：会直接把原数组反过来！

如果你用 arr.reverse() 又不想动原数组，就会踩坑。因为它是「原地」反转，原来的数组就变了。不想动原数组，就先复制再反转：[...arr].reverse()。点下面按钮对比两种写法。

⑥ X.3 实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：交换两个变量、合并两个列表、标签去重 [...new Set(arr)]。

② 常见坑：arr2 = arr1 后改 arr2 连累 arr1；reverse() 把原列表反过来了。

③ 怎么解决：要独立就 [...arr] 复制；要反着用就 [...arr].reverse()，别直接动原数组。

本页重点

let [a, b] = [10, 20];

let copy = [...arr];  // 展开复制

let s = new Set([1, 1, 2]);  // 去重

let uniq = [...new Set(arr)];

arr.reverse();  // 原地倒序