ES7 中的 Array.prototype.copyWithin 方法

在 ES7 中，新增了一个 Array.prototype.copyWithin 方法，用于在数组内部将指定位置的元素复制到其他位置，从而实现数组的部分覆盖。本文将详细介绍该方法的用法和应用场景，并给出示例代码。

方法介绍

Array.prototype.copyWithin 方法接受三个参数：target，start 和 end。其中，target 表示复制到的目标位置，start 和 end 表示要复制的源位置范围。具体语法如下：

arr.copyWithin(target, start, end)

该方法会修改原数组，并返回修改后的数组。需要注意的是，该方法并不会改变数组的长度，即使目标位置在源位置之前也不会影响到源位置的值。

应用场景

Array.prototype.copyWithin 方法在一些场景下非常有用，比如：

• 在数组内部实现元素的移动或交换。
• 在数组内部实现部分元素的覆盖。
• 在数组内部实现元素的填充。

下面我们将分别介绍这几个应用场景并给出示例代码。

元素的移动或交换

通过指定源位置和目标位置，可以将数组中的元素移动到其他位置，或者将两个元素交换位置。示例代码如下：

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 3, 4); // 将第 4 个元素复制到第 2 个元素，得到 [1, 4, 3, 4, 5]
arr.copyWithin(0, 3, 5); // 将第 4、5 个元素复制到第 1、2 个元素，得到 [4, 5, 3, 4, 5]
arr.copyWithin(2, 0, 2); // 将第 1、2 个元素复制到第 3、4 个元素，得到 [1, 2, 1, 2, 5]

部分元素的覆盖

通过指定源位置和目标位置，可以将数组中的部分元素覆盖到其他位置。示例代码如下：

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 3, 4); // 将第 4 个元素复制到第 2 个元素，得到 [1, 4, 3, 4, 5]
arr.copyWithin(0, 3, 5); // 将第 4、5 个元素复制到第 1、2 个元素，得到 [4, 5, 3, 4, 5]
arr.copyWithin(2, 0, 2); // 将第 1、2 个元素复制到第 3、4 个元素，得到 [1, 2, 1, 2, 5]

元素的填充

通过指定源位置和目标位置，可以将数组中的部分元素复制到其他位置，从而实现元素的填充。示例代码如下：

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(2, 0, 1); // 将第 1 个元素复制到第 3 个元素，得到 [1, 2, 1, 4, 5]
arr.copyWithin(0, 2, 3); // 将第 3 个元素复制到第 1 个元素，得到 [3, 2, 1, 4, 5]
arr.copyWithin(3, 1, 2); // 将第 2 个元素复制到第 4 个元素，得到 [3, 2, 1, 2, 5]

指导意义

Array.prototype.copyWithin 方法可以极大地简化一些数组操作，使代码更加简洁和易于理解。在实际开发中，我们可以使用该方法来实现数组的部分覆盖、元素的移动或交换、元素的填充等操作。需要注意的是，该方法会修改原数组，因此在使用时需要注意不要影响到其他代码的正确性。

总结

本文介绍了 ES7 中的 Array.prototype.copyWithin 方法，包括该方法的语法、应用场景和示例代码。通过该方法，我们可以轻松地实现数组的部分覆盖、元素的移动或交换、元素的填充等操作，提高代码的简洁性和可读性。

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