擴展運算符的使用

擴展運算符是由三個點組成 ...，可以用于將一個數(shù)組轉(zhuǎn)為逗號分隔的一個參數(shù)序列。主要作用就是展開當(dāng)前數(shù)組，一般用于復(fù)制數(shù)組，合并數(shù)組，解構(gòu)，拆分字符串和轉(zhuǎn)換 Iterator 接口的對象。

復(fù)制數(shù)組

數(shù)組是復(fù)合的數(shù)據(jù)類型，如果我們直接復(fù)制一個數(shù)組，只是復(fù)制了指向底層數(shù)據(jù)結(jié)構(gòu)的指針，而不是克隆一個全新的數(shù)組。

示例：

在 ES5 中，我們只能通過方法來復(fù)制數(shù)組，如下所示：

const a = [1, 2, 3];
const b = a.concat();
console.log(b); // 輸出：[ 1, 2, 3 ]

b[0] = 10;
console.log(b); // 輸出： [ 10, 2, 3 ]

而 ES6 中不需要使用方法，直接通過擴展運算符，就可以復(fù)制數(shù)組，如下所示：

const a = [1, 2, 3];
const b = [...a];
console.log(b);  // 輸出：[ 1, 2, 3 ]

上述代碼還有一種寫法，如下所示：

const a = [1, 2, 3];
const [...b] = a;
console.log(b); // 輸出：[ 1, 2, 3 ]

這兩種寫法其實是一樣， b 都是 a 的克隆。

合并數(shù)組

擴展運算符除了可以讓我們更方便的復(fù)制數(shù)組，還提供了數(shù)組合并的新寫法。

示例：

如果我們在 ES5 中合并數(shù)組，可以像下面這樣寫，需要用到一個 concat() 方法：

const arr1 = ['xkd'];
const arr2 = ['mark'];
const arr3 = ['summer', 'sun'];

console.log(arr1.concat(arr2, arr3));  // 輸出：[ 'xkd', 'mark', 'summer', 'sun' ]

而在 ES6 中合并數(shù)組可以使用擴展運算符：

const arr1 = ['xkd'];
const arr2 = ['mark'];
const arr3 = ['summer', 'sun'];

console.log([...arr1, ...arr2, ...arr3]); // 輸出：[ 'xkd', 'mark', 'summer', 'sun' ]

解構(gòu)

擴展運算符可以與解構(gòu)賦值結(jié)合起來，用于生成數(shù)組。

示例：

將數(shù)組解構(gòu)成兩部分：

const [x, ...y] = [1, 2, 3, 4, 5];
console.log(x);  // 輸出：1
console.log(y);  // 輸出：[ 2, 3, 4, 5 ]

拆分字符串

擴展運算符還可以拆分字符串，將字符串轉(zhuǎn)為真正的數(shù)組。

示例：

console.log([...'hello']);  // 輸出：[ 'h', 'e', 'l', 'l', 'o' ]
console.log([...'xkd']);    // 輸出：[ 'x', 'k', 'd' ]

Array.form()方法

Array.form() 方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組，兩類對象就是：類似數(shù)組的對象（array-like object）和可遍歷的的對象。

示例：

例如將一個類似數(shù)組的對象轉(zhuǎn)為真正的數(shù)組：

let arr1 = {
    '0': 'x',
    '1': 'k',
    '2': 'd',
    length: 3   
};

console.log(Array.from(arr1));  // 輸出：[ 'x', 'k', 'd' ]

Array.of()方法

Array.of() 方法用于將一組值，轉(zhuǎn)換為數(shù)組。

示例：

console.log(Array.of(1, 6, 9));   // 輸出：[ 1, 6, 9 ]
console.log(Array.of('xkd', 'summer').length)  // 輸出：2

這個方法的主要目的，是彌補數(shù)組構(gòu)造函數(shù) Array() 的不足。因為參數(shù)個數(shù)的不同，會導(dǎo)致 Array() 的行為有差異。

示例：

如下所示，只有當(dāng)參數(shù)個數(shù)不少于 2 個時，Array() 才會返回由參數(shù)組成的新數(shù)組：

console.log(Array());  // 輸出：[]
console.log(Array(2)); // 輸出：[, , ]
console.log(Array(1, 4, 7)); // 輸出：[ 1, 4, 7 ]

copyWithin()

copyWithin() 方法用于將指定位置的成員復(fù)制到其他位置，也就是修改當(dāng)前數(shù)組里面它會把指定位置的元素或者復(fù)制到其他地方，它會修改當(dāng)前數(shù)組。

語法：

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

• target：必需參數(shù)，從該位置開始替換數(shù)據(jù)，負值表示倒數(shù)。
• start：必需參數(shù)，從該位置開始讀取數(shù)據(jù)，默認為0，負值表示從末尾開始計算。
• end：可選參數(shù)，到該位置前停止讀取數(shù)據(jù)，默認數(shù)組長度，負值表示從末尾開始計算。

示例：

從下標為0的數(shù)字1開始替換數(shù)據(jù)，然后從下標為3的數(shù)字4開始讀取數(shù)據(jù)：

let arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(3, 4)); // 輸出：[ 1, 2, 3, 5, 5 ] 

console.log(arr.copyWithin(1, 4)); // 輸出：[ 1, 5, 3, 4, 5 ]

console.log(arr.copyWithin(0, 2, 4)); // 輸出：[ 3, 4, 3, 4, 5 ]

數(shù)組查找方法

• find() 方法：查找數(shù)組中符合條件的元素,若有多個符合條件的元素，則返回第一個元素。

示例：

let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 1)); // 輸出：2

• findIndex() 方法：查找數(shù)組中符合條件的元素索引，若有多個符合條件的元素，則返回第一個元素索引。

示例：

let arr = Array.of(1, 2, 3);
console.log(arr.findIndex(item => item = 1));  // 輸出： 0
console.log([, 1].findIndex(n => true));       // 輸出： 0

數(shù)組填充方法

fill() 方法用于將一定范圍索引的數(shù)組元素內(nèi)容填充為單個指定的值。方法中第一個參數(shù)為用來填充的值，第二個參數(shù)為被填充的起始索引，第三個參數(shù)為填充的結(jié)束索引，默認為數(shù)組末尾。

示例：

let arr = Array.of(1, 2, 3, 4, 5);
console.log(arr.fill(0, 1, 2)); // 輸出：[ 1, 0, 3, 4, 5 ]
console.log(arr.fill(0, 3));    // 輸出：[ 1, 0, 3, 0, 0 ]

遍歷數(shù)組

• entries() 方法：遍歷鍵值對。

示例：

for(let [key, value] of ['xkd', 'summer'].entries()) {
    console.log(key, value);
}

輸出：

0 xkd
1 summer

• keys() 方法：遍歷鍵名。

示例：

for(let key of ['a', 'b', 'c'].keys()) {
    console.log(key);
}

輸出：

0
1
2

• values() 方法：遍歷鍵值。

示例：

for(let value of ['a', 'b', 'c'].values()) {
    console.log(value)
}

輸出：

a
b
c