ES7 中的 Array.prototype.copyWithin() 方法详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES7 中，新增了一个 Array.prototype.copyWithin() 方法，该方法可以在数组内部进行复制操作。下面我们来详细了解一下该方法的用法及其指导意义。

语法

array.copyWithin(target[, start[, end]])

参数说明：

target：必选参数，表示进行复制操作的目标位置。
start：可选参数，表示复制的起始位置，默认为 0。
end：可选参数，表示复制的结束位置，默认为数组长度。

用法

Array.prototype.copyWithin() 方法的作用是将数组中指定的一段元素复制到另一个指定的位置，并覆盖原有元素。

下面是一个简单的示例：

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 4);
console.log(arr); // [4, 2, 3, 4, 5]

该例子中，我们将从下标为 3 的元素开始，复制长度为 1 的一段元素，复制到从下标为 0 的位置开始的位置，也就是替换原有的元素，结果为 [4, 2, 3, 4, 5]。

如果我们将参数 start 和 end 都省略，相当于复制整个数组到头部，如下例子：

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0);
console.log(arr); // [1, 2, 3, 4, 5]

通过该方法，我们可以将数组内部的元素进行调整，得到我们需要的结果。

应用场景

该方法通常用于在数组内部进行复制和移动操作，比如：

移动数组元素

我们可以将数组的一部分元素移动到数组的开头或结尾，比如下面这个例子：

let arr = ['a', 'b', 'c', 'd', 'e'];
arr.copyWithin(0, 3);
console.log(arr); // ['d', 'e', 'c', 'd', 'e']

let arr2 = ['a', 'b', 'c', 'd', 'e'];
arr2.copyWithin(2, 0, 2);
console.log(arr2); // ['a', 'b', 'a', 'b', 'e']

第一个例子将从下标为 3 的元素开始，复制到开头，结果为 ['d', 'e', 'c', 'd', 'e']；第二个例子将从下标为 0 的元素开始，复制长度为 2 的一段元素，复制到从下标为 2 的位置开始的位置，结果为 ['a', 'b', 'a', 'b', 'e']。

替换数组元素

我们还可以将数组的一部分元素复制到其他位置上，实现替换的效果，比如下面这个例子：

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 3, 4);
console.log(arr); // [1, 4, 3, 4, 5]

该例子中，我们将从下标为 3 的元素开始，复制长度为 1 的一段元素，复制到从下标为 1 的位置开始的位置，也就是替换 2，结果为 [1, 4, 3, 4, 5]。

总结

Array.prototype.copyWithin() 方法为我们提供了一种在数组内部进行复制和移动元素的便捷方式，能够极大地方便我们的编码工作。但需要注意的是，在使用该方法的时候需要注意目标位置和复制范围的正确性，以避免出现不必要的错误。

希望本文能够对您理解 JavaScript 中的 Array.prototype.copyWithin() 方法有所帮助，感谢您的阅读。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6544f5a17d4982a6ebebd781