JavaScript 数组 copyWithin() 方法

JavaScript copyWithin() 语法

copyWithin() 是 JavaScript 数组的一个方法，它用于将数组的一部分截取下来，并浅复制到同一数组中的另一个位置。

语法：

arr.copyWithin(target, start, end)

说明：

copyWithin() 方法接收以下 3 个参数。

• target（必选）：将元素复制到的下标位置。
• start（可选）：复制元素的开始下标（包含）。如果省略，则表示从下标 0 开始复制。
• end（可选）：复制元素的结束下标（不含）。如果省略，则表示复制到数组最后一个元素。

copyWithin() 方法的 3 个参数都可以是负数，比如 -1 表示最后一个元素，-2 表示倒数第二个元素，依次类推。

JavaScript copyWithin() 摘要

JavaScript copyWithin() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript copyWithin() 方法是如何使用的。

示例 1：带 2 个参数的 copyWithin()

const arr = ["红", "橙", "黄", "绿", "蓝"];
arr.copyWithin(0, 2);
console.log(arr);

运行结果如下。

[ '黄', '绿', '蓝', '绿', '蓝' ]

分析：

arr.copyWithin(0, 2) 其实很好理解，它表示截取范围为 “下标2至结尾” 的部分，也就是 ["黄", "绿", "蓝"]。然后将其插入到下标 0 的位置。

需要注意的是，copyWithin() 会保证数组长度不变，因此 ["黄", "绿", "蓝"] 会直接覆盖最开始的 3 个元素，最终 arr 的值就是 ["黄", "绿", "蓝", "绿", "蓝"]。

示例 2：带 3 个参数的 copyWithin()

const arr = ["红", "橙", "黄", "绿", "蓝"];
arr.copyWithin(0, 2, 4);
console.log(arr);

运行结果如下。

[ '黄', '绿', '黄', '绿', '蓝' ]

分析：

arr.copyWithin(0, 2, 4) 表示截取范围为 [2, 4) 的部分（包含 2 但不包含 4），也就是 ["黄", "绿"]。然后将其插入到下标 0 的位置。

copyWithin() 会保证数组长度不变，因此 ["黄", "绿"] 会直接覆盖最开始的 2 个元素，最终 arr 的值就是 ["黄", "绿", "黄", "绿", "蓝"]。

示例 3：带负参数的 copyWithin()

const arr = ["红", "橙", "黄", "绿", "蓝"];
arr.copyWithin(0, -2);
console.log(arr);

运行结果如下。

[ '绿', '蓝', '黄', '绿', '蓝' ]

分析：

arr.copyWithin(0, -2) 表示截取范围为 “倒数第2至结尾” 的部分，也就是 ["绿", "蓝"]。然后将其插入到下标 0 的位置。

copyWithin() 会保证数组长度不变，因此 ["绿", "蓝"] 会直接覆盖最开始的 2 个元素，最终 arr 的值就是 ["绿", "蓝", "黄", "绿", "蓝"]。

此外，ES6 还有一个与 copyWithin() 方法比较相似的方法，具体可以查看：

fill() 方法