ES6數組常用擴展方法

1.擴展運算符

擴展運算符可以將數組內容展開，可以用於替代函數的apply方法。 

function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);//參數數組展開

 

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);//擴展運算符可以用於數組的push方法

另一方面，數組擴展運算符可以用於數組複製，從而避免了引用。

const a1 = [1, 2];
// 寫法一
const a2 = [...a1];
// 寫法二
const [...a2] = a1;

 只要帶有遍歷器接口的對象，都可以使用擴展運算符轉換爲數組。

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];//類數組對象，但具有遍歷器接口

2.find()與findIndex()

 find方法，用於找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，然後返回該成員。如果沒有符合條件的成員，則返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5

數組實例的findIndex用法與find方法類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。 

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

這兩個方法都可以接受第二個參數，用來綁定回調函數的this對象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

 3.entries(),keys(),values()

entries()，keys()和values()三種方法均用於遍歷數組。它們都返回一個遍歷器對象，可以用for...of循環進行遍歷，唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

 4.includes()

includes()方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法類似。

該方法的第二個參數表示搜索的起始位置，默認爲0。如果第二個參數爲負數，則表示倒數的位置，如果這時它大於數組長度（比如第二個參數爲-4，但數組長度爲3），則會重置爲從0開始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

另外，Map 和 Set 數據結構有一個has方法，需要注意與includes區分。

• Map 結構的has方法，是用來查找鍵名的，比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。
• Set 結構的has方法，是用來查找值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)。