ES6:Array陣列的特性擴充套件（查詢，包含，複製，合併）

摘要： 1、擴充套件運算子[...] 擴充套件運算子（spread）是三個點（... ）。它好比 rest 引數的逆運算，將一個數組轉為用逗號分隔的引數序列。 function p...

1、擴充套件運算子[...]

擴充套件運算子（spread）是三個點（... ）。它好比 rest 引數的逆運算，將一個數組轉為用逗號分隔的引數序列。

function push(array, ...items) {
array.push(...items);
}

function add(x, y) {
return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

上面的程式碼中 擴充套件運算子 分別把原本的陣列引數給分解成了多個引數並按下標順序傳入到函式中。

合理使用可以大大的簡化傳參的複雜性。

特性應用

• 陣列克隆

  陣列是複合的資料型別，直接複製的話，只是複製了指向底層資料結構的指標，而不是克隆一個全新的陣列。

  const a1 = [1, 2];
  const a2 = a1;// 只是傳遞了引用，並沒有在記憶體中新生成一個數組
  
  a2[0] = 2;
  a1 // [2, 2]

  使用... 可以很好的解決這個問題

  const a1 = [1,2]
   const a2 = [...a1] // 在記憶體中完全克隆一個新的陣列

• 數組合並

  const arr1 = ['a', 'b'];
  const arr2 = ['c'];
  const arr3 = ['d', 'e'];
  
  // ES5 的合併陣列
  arr1.concat(arr2, arr3);
  // [ 'a', 'b', 'c', 'd', 'e' ]
  
  // ES6 的合併陣列
  [...arr1, ...arr2, ...arr3]
  // [ 'a', 'b', 'c', 'd', 'e' ]

  這兩種方法都是淺拷貝 ，對於參與合併陣列中元素的改動會影響合併後的陣列。

• 將字串轉換成陣列

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

  在能使用ES6 的前提下，更推薦使用這種方式來判斷字串的長，因為可以正確的識別Unicode 字元。

  'x\uD83D\uDE80y'.length // 4
  [...'x\uD83D\uDE80y'].length // 3

所以在ES6 前提下關於Unicode 字元的問題，都應該使用... 來進行操作，保證正確性。

2、Array.find()與Array.findIndex()

• Array.find()

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

  接收三個引數 [當前值 ，下標 ，原陣列 ]

  [1,2,3,-1,-10].find((value, index, arr) => n < 0) 
  // -1

• Array.findIndex()

  與find() 使用方式相同，但是返回的是第一個符合條件的物件的下標，如果沒有符合條件的返回-1

  [1, 5, 10, 15].findIndex((value, index, arr) => value > 9)
   // 2

• Array.includes()

  Array.prototype.includes方法返回一個布林值，表示某個陣列是否包含給定的值，與字串的includes方法類似。ES2016 引入了該方法。

  接收兩個引數[需要判斷的元素 ,起始位置 ]

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

  在可以使用ES6 的前提下，應使用此方法判斷陣列中是否包含某元素，而不是使用ES5 中的indexof 判斷是否>-1