陣列的擴充套件

1. 擴充套件運算子三個點（…），可以展開陣列

console.log(...[1, 2, 3])；// 1 2 3
console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
 [...document.querySelectorAll('div')]；// [<div>, <div>, <div>] 	

擴充套件運算子的應用

• 複製陣列

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

• 合併陣列（淺拷貝，原陣列修改會反映到新陣列上）

  const arr1=['a','b'];  
  const arr2=['c'];  
  const arr1=['d','e']; 
  [...arr1,...arr2,...arr3]
  //['a','b','c','d','e']
   
  

• 與解構賦值結合，但是隻能放在最後一位

  const [first, ...rest] = [1, 2, 3, 4, 5];
  first // 1
  rest  // [2, 3, 4, 5]
  
  const [...butLast, last] = [1, 2, 3, 4, 5];
  // 報錯
  const [first, ...middle, last] = [1, 2, 3, 4, 5];
  // 報錯
  

• 將字串轉換成陣列

   //將字串轉換成陣列
   [...'hello']
   // [ "h", "e", "l", "l", "o" ]
    ```
  

• 實現了 Iterator 介面的物件
  任何 Iterator 介面的物件，都可以用擴充套件運算子轉為真正的陣列
• Map 和 Set 結構，Generator 函式
  擴充套件運算子內部呼叫的是資料結構的 Iterator 介面，因此只要具有 Iterator 介面的物件，都可以使用擴充套件運算子，比如 Map 結構。

  let map=new map([
    [1,'one'],
    [2,'two'],
    [3,'three']
  ]);
  let arr=[...map.keys()];//[1,2,3]
  

2. Array.from()

Array.from方法用於將兩類物件轉為真正的陣列：類似陣列的物件和可遍歷的物件。

• 將常見的類似陣列物件：DOM操作返回的NodeList集合，以及函式內部的arguments物件轉換成真正的陣列

    // NodeList物件
    let ps = document.querySelectorAll('p');
       Array.from(ps).filter(p => {
         return p.textContent.length > 100;
    });
  
    // arguments物件
    function foo() {
       var args = Array.from(arguments);
       // ...
     }
   
  

• 只要是部署了Iterator介面的資料結構，都能將其轉換為陣列，如字串，new Set()
• 如果引數是真正的陣列，則返回原陣列
• 任何具有length屬性的物件，都可以通過Array.from方法轉換成陣列，而擴充套件運算子不行
• Array.from可以接受第二個引數，作用類似於陣列的map方法，用來對每個元素進行處理，將處理後的值放入返回的陣列。

  Array.from(arrayLike, x => x * x);
  // 等同於
  Array.from(arrayLike).map(x => x * x);
  Array.from([1, 2, 3], (x) => x * x)；//[1,4,9]
  
  //將陣列中的布林值為false的成員轉為0
  Array.from([1, ,2, ,3],(n)=>n||0);//[1,0,2,0,3]
  

3. Array.of() 方法用於將一組值，轉換為陣列

Array.of總是返回引數值組成的陣列。如果沒有引數，就返回一個空陣列。

Array.of(3,11,8) //[3,11,8]
Array.of(3).length //1

4. Array.of() 方法用於將一組值，轉換為陣列

在當前陣列的內部，將指定位置的成員複製到其他位置（會覆蓋原有成員），然後返回當前陣列，這個方法會修改當前陣列。

它接受三個引數：
1.target（必需）：從該位置開始替換資料。如果為負值，表示倒數。
2.start（可選）：從該位置開始讀取資料，預設為 0。如果為負值，表示倒數。
3.end（可選）：到該位置前停止讀取資料，預設等於陣列長度。如果為負值，表示倒數。

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

//將3到結束位置的資料複製到從0開始的位置去
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

5. 陣列例項的 find() 和 findIndex()

• find()用於查詢陣列中的第一個滿足條件的陣列成員，它的引數是一個回撥函式，所有成員依次執行該函式，直到找到滿足條件的陣列成員並返回true，如果沒有符合條件的成員則返回undefined

  [1, 4, -5, 10].find((n) => n < 0)
  // -5
  
  [1, 5, 10, 15].find(function(value, index, arr) {
     return value > 9;
  }) // 10
  

• findIndex()用於返回第一個符合條件的陣列成員的位置，如果沒有則返回-1

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

• 這兩個方法都可以接受第二個引數，用來繫結回撥函式的this物件

  //回撥函式中的this指向person物件
  function f(v){
      return v > this.age;
   }
  let person = {name: 'John', age: 20};
  [10, 12, 26, 15].find(f, person);    // 26
  

• 彌補陣列的indexOf（）方法不能發現NaN的不足

6. 陣列例項的 fill()

fill方法使用給定值，填充一個數組

//陣列中的已有元素，被全部抹去
['a','b','c'].fill(7);//[7,7,7]


//fill方法還可以接受第二個和第三個引數，用於指定填充的起始位置和結束位置。

//從 1 號位開始，向原陣列填充 7，到 2 號位之前結束
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

7. 陣列例項的 entries()，keys() 和 values()

• 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'
  }
  

8. 陣列例項的 includes()

Array.prototype.includes方法返回一個布林值，表示某個陣列是否包含給定的值

該方法的第二個引數表示搜尋的起始位置，預設為0。如果第二個引數為負數，則表示倒數的位置，如果這時它大於陣列長度（比如第二個引數為-4，但陣列長度為3），則會重置為從0開始。

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

9. 陣列例項的 flat()，flatMap()

• 陣列的成員有時還是陣列，Array.prototype.flat()用於將巢狀的陣列“拉平”，變成一維的陣列。該方法返回一個新陣列，對原資料沒有影響。
  flat()預設只會“拉平”一層，如果想要“拉平”多層的巢狀陣列，可以將flat()方法的引數寫成一個整數，表示想要拉平的層數，預設為1。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

//如果不管有多少層巢狀，都要轉成一維陣列，可以用Infinity關鍵字作為引數。
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

//如果原陣列有空位，flat()方法會跳過空位。
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

• flatMap()方法對原陣列的每個成員執行一個函式，然後對返回值組成的陣列執行flat()方法，該方法返回一個新陣列，不改變原陣列。

  // 相當於 [[2, 4], [3, 6], [4, 8]].flat()
  [2, 3, 4].flatMap((x) => [x, x * 2])
  // [2, 4, 3, 6, 4, 8]
  
  //flatMap()只能展開一層陣列
  // 相當於 [[[2]], [[4]], [[6]], [[8]]].flat()
  [1, 2, 3, 4].flatMap(x => [[x * 2]])
  // [[2], [4], [6], [8]]