數組的擴展

1：擴展運算符

主要做用就是展開當前數組；通常應用於淺拷貝、合併數組、解構

console.log(1, ...[2, 3, 4], 5);
// 1  2  3  4  5

...[2, 3, 4]
// VM71: 1 Uncaught SyntaxError: Unexpected token...

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

• 淺拷貝

  const arr1 = [1,2];
     const arr2 = [...arr1];
     // arr2 --> [1,2]
     
     
     // 狀況二
     const arry1 = [3, 4];
     const arry2 = [...arry1, ...arry1];
     // arry2 --> [3,4,3,4]

• 合併數組

  const arr1 = [1, 2];
     const arr2 = [2, 2];
     const arr3 = [3, 2];
     [...arr1, ...arr2, ...arr3];
     // (6)[1, 2, 2, 2, 3, 2]

• 解構

  const [first, ...rest] = [1, 2, 3, 4, 5];
    // first --> 1
    // rest --> [2, 3, 4, 5]

• 拆分字符串

  [...'hello']
    // [ "h", "e", "l", "l", "o" ]

• 轉換Iterator接口的對象

  [...'abcabcabc'.matchAll('ab')]; //matchAll返回一個迭代器
    // [Array(1), Array(1), Array(1)]
    
    
    let nodeList = document.querySelectorAll('div');
    let array = [...nodeList];
    // [Array(1), Array(1), Array(1)]

2：Array.from，從類數組(包含length)的對象和迭代器對象轉換爲數組

用法1

let arrayLike = {
 '0': 'a',
 '1': 'b',
 '2': 'c',
 length: 3
 };
 
 Array.from(arrayLike);
 // ['a', 'b', 'c'] 
 // 若是去掉 '0': 'a',這一行，那麼也是會返回一個數組只是去掉的位置換成了undefined。

用法2 querySelectorAll

Array.from([...'abcabcabc'.matchAll('ab')]);
 // [Array(1), Array(1), Array(1)]
 
 Array.from([1, 2, 3]);
 // [1, 2, 3] 
 
 Array.from({length: 3});
 // [ undefined, undefined, undefined ] 
 
 
 Array.from({
   length: 100
 }).fill(0);
 
 // (100) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]    fill表明返回的值
 
 
 // 接收函數
 Array.from([1, 2, 3], (x) => x * x);
 //  [1, 4, 9]

3：Array.of，將一組值, 轉換爲數組

Array();
 // [] 
 
 Array(3);
 // [, , ,] 
 
 Array(3, 11, 8);
 // [3, 11, 8]
 
 Array.of();
 // [] 
 
 Array.of(undefined);
 // [undefined] 
 
 Array.of(1);
 // [1] 
 
 Array.of(1, 2);
 // [1, 2]

4：copyWithin ，將指定位置的成員複製到其餘位置

也就是說在當前數組裏面它會把指定位置的元素或者數複製到其餘地方，它會修改當前數組。它接收三個參數：

• Array.prototype.copyWithin(target, start = 0, end = this.length);
• target(必需)： 從該位置開始替換數據(負值表示倒數)，也就是說從哪裏開始替換
• start(可選)：從該位置開始讀取數據(默認爲 0), 負值表示從末尾開始計算

• end(可選)：到該位置前中止讀取數據(默認爲數組長度), 負值表示從末尾開始計算 start - end 決定了一個範圍，而後範圍裏面的成員複製到target裏面開始

  [1, 2, 3, 4, 5].copyWithin(0, 3);
   // [4, 5, 3, 4, 5] 
   
   [1, 2, 3, 4, 5].copyWithin(0, 3, 4);
   // [4, 2, 3, 4, 5] 
   
    
   [1, 2, 3, 4, 5].copyWithin(0, -2, -1);
   // 等於：-2 + length = 3 ，-1 + length = 4 
   // [4, 2, 3, 4, 5]

5：find，找出第一個符合條件的數組成員

[1, -24, -5, 10].find((value, index, arr) => value < 0);
 //  -24

6：findIndex，找出第一個符合條件的數組成員位置下標

[-11, 4, -5, 10].findIndex((value, index, arr) => value < 0);
 // 0

7：fill，使用給定值填充一個數組(處理模式和copywithin同樣)

fill的第一個參數是填充的值，第二個參數和第三個參數相似於copywithin的start end。

['a', 'b', 'c'].fill(7);
 // [7, 7, 7] 
 
 new Array(3).fill(7);
 // [7, 7, 7]
 
 ['a', 'b', 'c'].fill(7, 1, 2);
 // ['a', 7, 'c']
 
 ['a', 'b', 'c'].fill(7, 1);
 // ['a', 7, 7]

8：entries、keys、values，遍歷數組, 返回一個遍歷器對象。

['a', 'b'].keys() 返回一個迭代器Array Iterator {}，[...['a', 'b'].keys()]擴展一下返回一個數組[0,1]

• keys：返回一個下標

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

• values：返回字符自己值

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

• entries：返回既包含下標也包含值

  for (let [index, elem] of ['a', 'b'].entries()) {
       console.log(index, elem);
     }
     // 0 "a" 
     // 1 "b" 
     
     let letter = ['a', 'b', 'c'];
     let entries = letter.entries();
     
     // 依次遍歷
     console.log(entries.next().value);
     // [0, 'a'] 
     console.log(entries.next().value);
     // [1, 'b']
     console.log(entries.next().value);
     // [2, 'c']

9：includes，某個數組是否包含給定的值，第二個參數表示起始位置。

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

10：flat，數組下降維度

[1, 2, [3, 4]].flat(); //[1, 2, [3, 4]]數組裏面嵌套一個數組是一個二維數組，使用flat下降維度
 // [1, 2, 3, 4]
 
 [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]

11：flatMap，執行map函數再執行flat，也就是說把裏面自己值先處理一遍輸出而後再展開運算下一個值。

[2, 3, 4].flatMap((x) => [x, x * 2]);
 
 // [2, 4, 3, 6, 4, 8]

12：數組空位，ES6將空位轉爲undefined, ES5不一樣方法處理方式不一致。

Array(3);
 // [, , ,] 或者 [empty × 3]
 
 Array.from(['a', , 'b']);
 // [ "a", undefined, "b" ] 
 
 [...['a', , 'b']];
 // [ "a", undefined, "b" ]