ECMAScript 2016 (ES7) 中新增的 Array.prototype.copyWithin() 方法详解

在 ECMAScript 2016 (ES7) 中，新增了一个 Array.prototype.copyWithin() 方法，用于在数组内部进行元素复制。这个方法非常有用，可以帮助我们在数组中快速地进行元素复制和移动，提高了代码的效率和可读性。本文将对这个方法进行详细的解释和示例演示。

什么是 Array.prototype.copyWithin() 方法

Array.prototype.copyWithin() 方法是一个在数组内部进行元素复制的方法。它接受三个参数：target、start 和 end。

• target：从这个位置开始替换数据。如果是负数，表示从数组末尾开始计算的位置。
• start：从这个位置开始读取数据。如果是负数，表示从数组末尾开始计算的位置。
• end：到这个位置前停止读取数据。如果是负数，表示从数组末尾开始计算的位置。

这个方法会从 start 开始读取数据，然后将数据复制到 target 开始的位置，直到 end 为止。如果 end 没有指定，那么默认为数组的长度。如果 start 没有指定，那么默认为 0。

Array.prototype.copyWithin() 方法的语法

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

其中，

• arr：要操作的数组。
• target：从这个位置开始替换数据。如果是负数，表示从数组末尾开始计算的位置。
• start：从这个位置开始读取数据。如果是负数，表示从数组末尾开始计算的位置。
• end：到这个位置前停止读取数据。如果是负数，表示从数组末尾开始计算的位置。

Array.prototype.copyWithin() 方法的示例

示例一：复制数组元素

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

在这个示例中，我们将 arr 数组中从索引 3 开始到索引 4 前面的元素复制到了索引 1 开始的位置。因此，原数组中的索引 3 的元素 4 被复制到了索引 1 的位置，而原数组中的索引 1 的元素 2 被覆盖掉了。

示例二：移动数组元素

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

在这个示例中，我们将 arr 数组中从索引 3 开始到数组末尾的元素复制到了索引 0 开始的位置。因此，原数组中的索引 3 的元素 4 被复制到了索引 0 的位置，而原数组中的索引 0 到索引 2 的元素被覆盖掉了。

示例三：使用负数索引

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

在这个示例中，我们将 arr 数组中从索引 -3 开始到索引 -2 前面的元素复制到了索引 -2 开始的位置。因此，原数组中的索引 -2 的元素 4 被复制到了索引 -2 的位置，而原数组中的索引 -4 的元素 2 被覆盖掉了。

总结

Array.prototype.copyWithin() 方法是一个非常有用的方法，可以帮助我们在数组中快速地进行元素复制和移动。在实际开发中，我们可以使用它来优化代码，提高效率和可读性。但是需要注意的是，它会对原数组进行修改，因此需要谨慎使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6628bb9bc9431a720c5e1f4e