【Javascript】如何硬拷贝一个数组？

答案是使用splice。以下面这句代码为例：

boxList.splice(0, boxList.length, ...theRoom.boxes);

这行代码的作用是 彻底清空 boxList 数组，然后将 theRoom.boxes 数组中的所有元素逐个添加到 boxList 中。

让我们分解一下这行代码：

1. boxList: 这是一个数组变量。

2. .splice(): 这是 JavaScript 数组的一个非常强大的方法，用于改变数组的内容——可以删除、替换或添加元素。它的基本语法是：
   array.splice(startIndex, deleteCount, item1, item2, ...)

   • startIndex: 必需。从哪个索引位置开始修改数组。
   • deleteCount: 必需。要从 startIndex 位置开始删除多少个元素。
   • item1, item2, ...: 可选。要从 startIndex 位置开始添加的元素。

3. 0 (第一个参数):

   • 这是 startIndex。表示从 boxList 数组的第一个元素（索引为 0）开始操作。

4. boxList.length (第二个参数):

   • 这是 deleteCount。表示从索引 0 开始，删除 boxList 中所有现有的元素。因为 boxList.length 就是数组的当前长度，所以这个参数会删除从开头到结尾的所有元素。
   • 效果：清空 boxList 数组。

5. ...theRoom.boxes (第三个及后续参数):

   • 这是使用 扩展运算符 (Spread syntax ...)。
   • theRoom.boxes 应该也是一个数组（或任何可迭代对象）。
   • 扩展运算符 ... 会将 theRoom.boxes 数组中的所有元素“展开”或“解构”成独立的参数。
     • 例如，如果 theRoom.boxes 是 [box1, box2, box3]，那么 ...theRoom.boxes 就会变成 box1, box2, box3。
   • 这些独立的元素会被 splice 方法作为要添加的新元素，插入到 startIndex (即索引 0) 的位置。
   • 效果：将 theRoom.boxes 中的所有元素添加到已经被清空的 boxList 数组中。

总结起来，这行代码做了两件事：

1. 删除所有现有元素： boxList.splice(0, boxList.length) 这部分清空了 boxList。
2. 添加新元素： , ...theRoom.boxes) 这部分将 theRoom.boxes 中的所有元素复制到 boxList 中。

最终效果：boxList 数组的内容被完全替换为 theRoom.boxes 数组的内容。

为什么这么做，而不是直接 boxList = theRoom.boxes;？

如果直接使用 boxList = theRoom.boxes;，boxList 变量将指向一个新的数组（即 theRoom.boxes 所在内存地址）。
但如果 boxList 是通过引用传递给其他函数的，或者其他变量也持有 boxList 的引用，那么通过 splice 方法修改 boxList 会改变 原始数组 的内容，所有持有该数组引用的地方都会看到更新。而直接赋值会使这些旧引用仍然指向旧的（现在已经失去引用的）数组。

splice 这种方式确保了在不改变 boxList 变量本身内存地址（即它引用的对象）的情况下，更新了该数组的内容。