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

ES6 给数组加了两个「偷懒糖」：解构（一把把格子里的东西全抓出来摆桌上）和 ... 三个点（把整排格子摊平散开）。代码能短一半，但藏着一个大坑——直接写 = 不是复制一份，而是两个人共用同一间房。

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

点按钮看解构、去重，以及最容易踩的「引用赋值 / reverse 改原数组」两个坑。

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

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

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

let arr = [10, 20, 30];
// 解构：按位置一个个接出来
let [a, b, c] = arr;     // a接10，b接20，c接30
console.log(a, b, c);     // 10 20 30

// 只想要前两个，后面不管
let [x, y] = arr;

// 交换两个数，一行搞定
let m = 5, n = 10;
[m, n] = [n, m];          // m 和 n 互换，不用临时杯

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

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

// ① 复制一份全新数组
const arr = [10, 20, 30];
const newArr = [...arr];          // 摊开后重新包一遍，互不相干

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

// ③ 配 Set 去重（工作中最常用）
const dup = [1,2,2,3,3,3];       // 有重复
const unique = [...new Set(dup)]; // Set 自动去重，...再转回数组 → [1,2,3]

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

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

let arr1 = [1,2,3];
let arr2 = arr1;          // 只是再配一把钥匙进同一间房
arr2.push(99);            // 用钥匙往房里加了个99
console.log(arr1);        // 开门一看，arr1 也变成 [1,2,3,99]

let arr3 = [...arr1];     // 这次是真复制了一份新房
arr3.push(7);             // 改新房
console.log(arr1);        // 老房不受影响，还是 [1,2,3,99]

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

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

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

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

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

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

一句话记住：解构按顺序取值；... 用来复制/合并/去重 [...new Set(arr)]；arr2=arr1 是共用钥匙要小心；reverse() 原地改，想不动原数组就 [...arr].reverse()。