数组常用方法（一） - 过滤

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 也只能跳出单次循环。