在 ECMAScript 2016 中，引入了一个新的方法 Array.prototype.copyWithin，该方法可以在数组内部进行元素复制和移动的操作。这个方法虽然不常用，但在某些场景下可以提高代码效率和可读性，本文将详细介绍该方法的用法和注意事项，以及示例代码。
基础用法
copyWithin 方法接收两个参数：target 和 start，分别表示要复制到的目标位置和复制的起始位置。
---------------------- ------- -----
下面是一个简单的示例，将数组 [1, 2, 3, 4, 5] 中从第 2 位到第 4 位的元素复制到第 0 位：
----- --- - --- -- -- -- --- ----------------- -- --- -- --- -- -- -- --
上述代码中，0 表示目标位置，1 和 4 表示起始位置和结束位置。这样就可以将 [2, 3, 4] 复制到数组的开头。
需要注意的是，如果 target 大于等于 start，则复制位置会出现重叠，后面的元素会覆盖掉前面的元素。示例如下：
----- --- - --- -- -- -- --- ----------------- -- --- -- --- -- -- -- --
上述代码中，要复制的数组片段是 [1, 2, 3]，复制到 target 为 2 的位置，期望结果是 [1, 2, 1, 2, 3]，但由于 target >= start，因此在复制时会出现重叠的情况，最终结果为 [1, 2, 1, 2, 3]。
end 参数
copyWithin 方法还可以接收一个可选参数 end，表示结束位置，默认值为数组长度。
---------------------- ------- -----
如果指定了 end，则复制的位置会在 start 和 end 之间。
----- --- - --- -- -- -- --- ----------------- -- --- -- --- -- -- -- -- ----------------- --- -- --- -- -- -- --
上述代码中，第一个示例中 end 被设置为 4，因此只复制到了第 3 个位置；第二个示例中没有指定 end，默认为 5，因此复制了到最后一个位置。
负数位置
copyWithin 方法还支持负数位置，表示从数组末尾开始计算的位置。例如，如果 start 为负数，则表示从倒数第几个元素开始复制。示例如下：
----- --- - --- -- -- -- --- ----------------- --- ---- -- --- -- -- -- --
上述代码中，-2 表示从倒数第二个元素开始复制，-1 表示复制到倒数第一个元素。
需要注意的是，负数位置如果超出了数组范围，则不会有任何复制操作，而是直接返回原数组。示例如下：
----- --- - --- -- -- -- --- ----------------- ---- --- -- --- -- -- -- --
上述代码中，-10 小于数组的长度，因此无论复制到哪个位置，都不会有任何操作。
将元素移动到末尾
copyWithin 方法的另一个常见用途是将数组中一定范围内的元素移动到末尾。例如，将数组 [1, 2, 3, 4, 5] 中前三个元素移动到末尾，则可以使用下面的代码：
----- --- - --- -- -- -- --- ----------------- -- ----------------- -- --- -- -- -- --
上述代码中，先将数组中前三个元素复制到数组末尾，然后使用 copyWithin 操作将前三个元素覆盖到了移动后的位置。这样就实现了将元素移动到末尾的效果。
结论
copyWithin 方法是一个非常实用的数组方法。通过使用它，可以将数组中的元素进行灵活的复制和移动，提高代码的效率和可读性。需要注意的是，在使用该方法时一定要注意复制和移动的范围，避免出现位置重叠或越界的情况。
参考链接
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6723513a2e7021665e0f6afe