ES6+ copyWithin()

1. 前言

在 ES5 中沒有對數(shù)組內(nèi)元素的復(fù)制和替換，如果要實現(xiàn)數(shù)組內(nèi)的替換需要針對性的操作。而在 ES6 中提供了 copyWithin 方法輕易地實現(xiàn)數(shù)組內(nèi)元素的復(fù)制，不會改變原數(shù)組的長度。

2. 方法詳情

2.1 基本語法

copyWithin 復(fù)制原數(shù)組指定的項，從 start 到 end 之間的元素；然后替換原數(shù)組指定的位置，從 target 開始替換。原數(shù)組的長度不會被改變。

使用語法：

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

參數(shù)解釋：

2.2 一個參數(shù)

當?shù)谝粋€參數(shù)是 0 或者沒有參數(shù)時會復(fù)制整個數(shù)組，并從起始位置開始替換復(fù)制的數(shù)據(jù)。

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

上面的代碼中，第一個參數(shù)是 0，會從第一個位置的元素開始復(fù)制整個數(shù)組，然后替換整個數(shù)組，所以數(shù)組沒有變，0 可以省略不填。沒有參數(shù)時默認第一個參數(shù)是 0。當?shù)谝粋€參數(shù)大于 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]

上面的代碼中，第一個參數(shù)大于 0，復(fù)制整個數(shù)組從指定的位置替換，如果參數(shù)大于數(shù)組的長度時，則返回原數(shù)組。

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

上面的代碼中，參數(shù)小于 0 時，則從末尾開始計算起始替換的位置，在上面的例子中起始的位置的值是 3，則從此項開始替換。

2.2 兩個參數(shù)

第二個參數(shù)是，開始復(fù)制數(shù)組的起始位置，因為沒有第三個參數(shù)，所以結(jié)尾是數(shù)組的最后一項。

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

上面的代碼中，起始位置是 3 則復(fù)制的數(shù)組是 [4, 5]，替換的起始位置是 0，所以替換數(shù)組中的第一項和第二項的值。

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

上面的代碼中，代碼第二個參數(shù)是 - 3，start 將從末尾開始計算，會復(fù)制 [3, 4, 5]，然后從數(shù)組的起始位置開始替換。

2.2 三個參數(shù)

第三個參數(shù)是開始復(fù)制元素的結(jié)束位置，但是不包括這個位置。

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

上面的代碼中，可以知道復(fù)制的元素是數(shù)組中的 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]

上面的代碼中，第三個參數(shù)是負值，則從末尾開始計算。只有第三個參數(shù)是負數(shù)時，不會賦值任何元素，所以會返回原數(shù)組。這里要注意的是，在起始和結(jié)束位置之間有沒有數(shù)據(jù)可以被復(fù)制，上面第二個例子，在 - 2 和 - 1 之間只有 4，所以會替換原數(shù)組中的起始位置的值。

3. 小結(jié)

本節(jié)講解了數(shù)組的 copyWithin 方法的使用，主要注意的是在參數(shù)為負值的幾種情況，特別是在起始和結(jié)束的參數(shù)為負值時，它們是從數(shù)組的結(jié)尾開始計算的，而且要看起始和結(jié)束之間有沒有值可以被復(fù)制，如果沒有則原數(shù)組中的元素不會被替換，則返回原數(shù)組。