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]

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

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

上面的代碼中，代碼第二個參數是 - 3，start 將從末尾開始計算，會復制 [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 方法的使用，主要注意的是在參數為負值的幾種情況，特別是在起始和結束的參數為負值時，它們是從數組的結尾開始計算的，而且要看起始和結束之間有沒有值可以被復制，如果沒有則原數組中的元素不會被替換，則返回原數組。