随笔 - 5,  文章 - 0,  评论 - 8,  阅读 - 61920

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() 方法没有返回值。

注意:

  1. forEach() 不会改变原数组,但是可以通过第三个参数给原数组重新赋值。
  2. 在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 也只能跳出单次循环。
posted on   夜千灯  阅读(3551)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示