数组常用方法---过滤

时间：2025-03-20 09:17:00

js 数组的方法十分强大，但也有一些长得很相似，常常会让人脸盲，所以我花了一点时间整理了一份数组中关于过滤的方法，以便记忆和查阅。

// 原始数组：  
const arr = [3, 10, 8, 5.6, 54]

find()

  • find() 方法返回数组中符合判断条件的第一个元素的值。
  • find() 方法为数组中的每个元素依次调用了一次函数执行。
  • 当数组中的元素在内部函数中返回 true 时，find() 返回符合条件的该元素的值，并且之后的元素不会再执行内部函数。
  • 如果数组中没有符合条件的元素，则返回 undefined。

实例：

const resultFind = ((num) => {
  return num > 9
})
(resultFind)   // 10

findIndex()

  • findIndex() 方法返回数组中符合条件的第一个元素的索引。
  • find() 方法为数组中的每个元素依次调用了一次函数执行。
  • 当数组中的元素在内部函数中返回 true 时，findIndex() 返回符合条件的该元素的索引，并且之后的元素不会再执行内部函数。
  • 如果数组中没有符合条件的元素，则返回 -1。

实例：

const resultFindIndex = ((num) => {
  return num > 9
})
(resultFindIndex)   // 1

some()

  • some() 方法用于检测数组中的元素是否符合条件，返回 Boolean 值。
  • some() 方法为数组中的每个元素依次调用了一次函数执行。
  • 如果有一个元素满足条件，则表达式返回 true ，剩余的元素不会再执行。
  • 如果数组中没有满足条件的元素，则返回false。

实例：

const resultSome = ((num) => {
  return num = 5.6
})
(resultSome)   // true

every()

  • every() 方法用于检测数组中的所有元素是否都符合指定条件，返回 Boolean 值。
  • every() 方法为数组中的每个元素依次调用了一次函数执行。
  • 如果有一个元素不满足条件，则整个表达式返回 false ，剩余的元素不会再执行。
  • 如果数组中所有元素都满足条件，则返回 true。

实例：

const resultEvery = ((num) => {
  return num > 1
})
(resultEvery)   // true

filter()

  • filter() 方法返回一个新数组，新数组中的元素是通过原数组中符合条件的所有元素。

实例：

const resultFilter = ((num) => {
  return num > 5
})
(resultFilter)   // [10, 8, 5.6, 54]

map()

  • map() 方法返回一个新数组，数组中的元素为原数组调用函数处理后的值。
  • map() 方法为原数组中的每个元素依次调用了一次函数执行。

实例：

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

forEach()

  • forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
  • forEach() 方法没有返回值。

注意：

  1. forEach() 不会改变原数组，但是可以通过第三个参数给原数组重新赋值。
  2. 在forEach中，不能使用 continue 和 break ，可以使用 return 或 return false 跳出循环，注意该方法无法一次结束所有循环，需要一次性结束所有循环，还是老老实实使用for方法。

实例：

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

总结

  1. find 方法和 findIndex 可以结合记忆；
  2. some 方法和 every 方法可以结合记忆；
  3. filter 方法和 map 方法可以结合记忆；
  4. 上面五个方法对于空数组，均不会执行函数；
  5. 上面五个方法都不会改变原数组；
  6. foreEach() 不能跳出全部循环，即使使用 return 也只能跳出单次循环。

转载于：/wl0804/p/

相关文章