ES7 中的 Array.prototype.copyWithin 函数详解

Array.prototype.copyWithin 是 ES7 新增的数组方法，它允许我们在数组内部复制、粘贴和替换元素。本文将详细介绍其用法、示例和应用场景。

用法

Array.prototype.copyWithin 的用法非常简单，它接收三个参数：

Array.prototype.copyWithin(target, start = 0, end = this.length);

其中，target 表示复制到哪个位置；start 和 end 分别表示选取了哪些元素，选取的范围是 [start, end)。如果不传入 start 和 end，则默认为数组的头到尾。接下来我们通过示例来说明：

const array1 = ['a', 'b', 'c', 'd', 'e'];

array1.copyWithin(0, 3);
// [ 'd', 'e', 'c', 'd', 'e' ]

上面的例子，我们将数组 array1 中第 0 个位置开始，复制了其后面的所有元素，将其粘贴到数组头部，从而实现了对数组的修改。

示例

1. 用 copyWithin 实现数组反转

const array1 = [1, 2, 3, 4, 5];
array1.copyWithin(0, array1.length - 1);

console.log(array1); // [5, 4, 3, 2, 5]

1. 用 copyWithin 实现数组交换

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

const array2 = [1, 2, 3, 4, 5];
[array2[2], array2[3]] = [array2[3], array2[2]]; // [1, 2, 4, 3, 5]

两个数组的结果是相同的。我们通过 copyWithin 函数将数组元素进行交换，非常实用。

应用场景

copyWithin 的应用场景非常广泛，比如：

• 数组元素的滚动显示
• 数组元素的截取和粘贴
• 字符串的处理

在实际开发中，有很多地方可以应用 copyWithin，比如将表格中某一列的信息移到表头，或者将大段的字符串按照规律抽取出某几个区域进行处理等等。

结论

本文详细介绍了 ES7 的新增方法 Array.prototype.copyWithin 的用法、示例和应用场景，希望能对读者进行指导，提高前端开发技能。

参考资料

• Array.prototype.copyWithin() - JavaScript | MDN

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