ES7 中的 Array#copyWithin 方法使用教程

在 ECMAScript 2016 (ES7) 中，JavaScript 引入了 Array#copyWithin 方法，该方法可以让开发者根据指定的起始下标和终止下标对数组进行复制操作。本文将详细介绍 Array#copyWithin 方法的使用方法，并给出实际应用案例。

语法

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

参数说明：

• target：必需，目标索引，从该位置开始替换数据。
• start：可选，源起始位置索引，默认值为 0。
• end：可选，源结束位置索引，默认值为 arr.length。

使用示例

替换数组元素

假设我们有一个长度为 5 的数组，我们想要将第二个和第三个元素替换为第四个和第五个元素。可以使用 copyWithin 方法来实现：

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

上述代码中，target 参数为 1，表示从数组索引为 1 的位置开始替换。start 和 end 参数为 3 和 5，分别表示源数组中的起始位置和结束位置（不包括结束位置，即取到的是索引 3~4 处的元素）。执行 copyWithin 方法后，数组变为 [1, 4, 5, 4, 5]。

复制数组元素

我们也可以使用 copyWithin 方法将数组的一部分复制到另一部分：

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

上述代码中，target 参数为 0，表示从数组索引为 0 的位置开始替换。start 和 end 参数为 2 和 4，分别表示源数组中的起始位置和结束位置（不包括结束位置，即取到的是索引 2~3 处的元素）。执行 copyWithin 方法后，数组变为 [3, 4, 3, 4, 5]。

拷贝定长子数组

Array#copyWithin 方法还支持拷贝定长的子数组。假设我们有一个长度为 10 的数组，我们要将下标为 0-4 的元素拷贝到下标为 5-9 的位置，则可以这样实现：

const arr = Array.from({length: 10}, (v, k) => k + 1);
arr.copyWithin(5, 0, 5);
console.log(arr); // 输出 [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

Array.from 方法用于创建一个指定长度和默认值的数组，该代码中创建了一个长度为 10，元素从 1 到 10 的数组。然后使用 copyWithin 方法将下标为 0-4 的元素拷贝到下标为 5-9 的位置。

总结

Array#copyWithin 方法可以方便地对数组进行复制操作，既能替换数据也能拷贝子数组。在实际项目中，开发者可以使用该方法进行批量修改或数据迁移等操作，提高代码的可维护性和效率。

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