25. ES6+ copyWithin() 方法

1. 前言

在 ES5 中没有对数组内元素的复制和替换，如果要实现数组内的替换需要针对性的操作。而在 ES6 中提供了 copyWithin 方法轻易地实现数组内元素的复制，不会改变原数组的长度。

2. 方法详情

2.1 基本语法

copyWithin 复制原数组指定的项，从 start 到 end 之间的元素；然后替换原数组指定的位置，从 target 开始替换。原数组的长度不会被改变。

使用语法：

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

参数解释：

2.2 一个参数

当第一个参数是 0 或者没有参数时会复制整个数组，并从起始位置开始替换复制的数据。

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

上面的代码中，第一个参数是 0，会从第一个位置的元素开始复制整个数组，然后替换整个数组，所以数组没有变，0 可以省略不填。没有参数时默认第一个参数是 0。当第一个参数大于 0 时，看如下示例：

[1, 2, 3, 4, 5].copyWithin(2);      // [1, 2, 1, 2, 3]
[1, 2, 3, 4, 5].copyWithin(6);      // [1, 2, 3, 4, 5]

上面的代码中，第一个参数大于 0，复制整个数组从指定的位置替换，如果参数大于数组的长度时，则返回原数组。

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

上面的代码中，参数小于 0 时，则从末尾开始计算起始替换的位置，在上面的例子中起始的位置的值是 3，则从此项开始替换。

2.2 两个参数

第二个参数是，开始复制数组的起始位置，因为没有第三个参数，所以结尾是数组的最后一项。

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

2.2 三个参数

第三个参数是开始复制元素的结束位置，但是不包括这个位置。

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

上面的代码中，可以知道复制的元素是数组中的 4，然后从第二个元素开始替换。

[1, 2, 3, 4, 5].copyWithin(1, 3, -4);     // [1, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, -2, -1);    // [4, 2, 3, 4, 5]

上面的代码中，第三个参数是负值，则从末尾开始计算。只有第三个参数是负数时，不会赋值任何元素，所以会返回原数组。这里要注意的是，在起始和结束位置之间有没有数据可以被复制，上面第二个例子，在 – 2 和 – 1 之间只有 4，所以会替换原数组中的起始位置的值。

3. 小结

本节讲解了数组的 copyWithin 方法的使用，主要注意的是在参数为负值的几种情况，特别是在起始和结束的参数为负值时，它们是从数组的结尾开始计算的，而且要看起始和结束之间有没有值可以被复制，如果没有则原数组中的元素不会被替换，则返回原数组。

以上关于25. ES6+ copyWithin() 方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。