數組常用方法（一） - 過濾

js 數組的方法十分強大，但也有一些長得很相似，常常會讓人臉盲，所以我花了一點時間整理了一份數組中關於過濾的方法，以便記憶和查閱。

// 原始數組：  
const arr = [3, 10, 8, 5.6, 54]

find()

• find() 方法返回數組中符合判斷條件的第一個元素的值。
• find() 方法為數組中的每個元素依次調用了一次函數執行。

• 當數組中的元素在內部函數中返回 true 時，find() 返回符合條件的該元素的值，並且之后的元素不會再執行內部函數。
• 如果數組中沒有符合條件的元素，則返回 undefined。

實例：

const resultFind = arr.find((num) => {
  return num > 9
})
console.log(resultFind)   // 10

findIndex()

• findIndex() 方法返回數組中符合條件的第一個元素的索引。
• find() 方法為數組中的每個元素依次調用了一次函數執行。

• 當數組中的元素在內部函數中返回 true 時，findIndex() 返回符合條件的該元素的索引，並且之后的元素不會再執行內部函數。
• 如果數組中沒有符合條件的元素，則返回 -1。

實例：

const resultFindIndex = arr.findIndex((num) => {
  return num > 9
})
console.log(resultFindIndex)   // 1

some()

• some() 方法用於檢測數組中的元素是否符合條件，返回 Boolean 值。
• some() 方法為數組中的每個元素依次調用了一次函數執行。

• 如果有一個元素滿足條件，則表達式返回 true ，剩余的元素不會再執行。
• 如果數組中沒有滿足條件的元素，則返回false。

實例：

const resultSome = arr.some((num) => {
  return num = 5.6
})
console.log(resultSome)   // true

every()

• every() 方法用於檢測數組中的所有元素是否都符合指定條件，返回 Boolean 值。
• every() 方法為數組中的每個元素依次調用了一次函數執行。

• 如果有一個元素不滿足條件，則整個表達式返回 false ，剩余的元素不會再執行。
• 如果數組中所有元素都滿足條件，則返回 true。

實例：

const resultEvery = arr.every((num) => {
  return num > 1
})
console.log(resultEvery)   // true

filter()

• filter() 方法返回一個新數組，新數組中的元素是通過原數組中符合條件的所有元素。

實例：

const resultFilter = arr.filter((num) => {
  return num > 5
})
console.log(resultFilter)   // [10, 8, 5.6, 54]

map()

• map() 方法返回一個新數組，數組中的元素為原數組調用函數處理后的值。
• map() 方法為原數組中的每個元素依次調用了一次函數執行。

實例：

const resultMap = arr.map((num) => {
  return num + 1
})
console.log(resultMap)   // [4, 11, 9, 6.6, 55]

forEach()

• forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數。
• forEach() 方法沒有返回值。

注意：

2. forEach() 不會改變原數組，但是可以通過第三個參數給原數組重新賦值。
3. 在forEach中，不能使用 continue 和 break ，可以使用 return 或 return false 跳出循環，注意該方法無法一次結束所有循環，需要一次性結束所有循環，還是老老實實使用for方法。

實例：

arr.forEach((num, index, arr) => {
  arr[index] = num * 2;
})
console.log(arr)   // [6, 20, 16, 11.2, 108]

總結

1. find 方法和 findIndex 可以結合記憶；
2. some 方法和 every 方法可以結合記憶；
3. filter 方法和 map 方法可以結合記憶；
4. 上面五個方法對於空數組，均不會執行函數；
5. 上面五個方法都不會改變原數組；
6. foreEach() 不能跳出全部循環，即使使用 return 也只能跳出單次循環。