ES6+ copyWithin()

1. 前言

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

2. 方法詳情

2.1 基本語(yǔ)法

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

使用語(yǔ)法：

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

參數(shù)解釋?zhuān)?/strong>

2.2 一個(gè)參數(shù)

當(dāng)?shù)谝粋€(gè)參數(shù)是 0 或者沒(méi)有參數(shù)時(shí)會(huì)復(fù)制整個(gè)數(shù)組，并從起始位置開(kāi)始替換復(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]

上面的代碼中，第一個(gè)參數(shù)是 0，會(huì)從第一個(gè)位置的元素開(kāi)始復(fù)制整個(gè)數(shù)組，然后替換整個(gè)數(shù)組，所以數(shù)組沒(méi)有變，0 可以省略不填。沒(méi)有參數(shù)時(shí)默認(rèn)第一個(gè)參數(shù)是 0。當(dāng)?shù)谝粋€(gè)參數(shù)大于 0時(shí)，看如下示例：

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

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

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

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

2.2 兩個(gè)參數(shù)

第二個(gè)參數(shù)是，開(kāi)始復(fù)制數(shù)組的起始位置，因?yàn)闆](méi)有第三個(gè)參數(shù)，所以結(jié)尾是數(shù)組的最后一項(xiàng)。

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

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

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

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

2.2 三個(gè)參數(shù)

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

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

上面的代碼中，可以知道復(fù)制的元素是數(shù)組中的 4，然后從第二個(gè)元素開(kāi)始替換。

[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]

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

3. 小結(jié)

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