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() 方法没有返回值。
注意:
- forEach() 不会改变原数组,但是可以通过第三个参数给原数组重新赋值。
- 在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]
总结
- find 方法和 findIndex 可以结合记忆;
- some 方法和 every 方法可以结合记忆;
- filter 方法和 map 方法可以结合记忆;
- 上面五个方法对于空数组,均不会执行函数;
- 上面五个方法都不会改变原数组;
- foreEach() 不能跳出全部循环,即使使用 return 也只能跳出单次循环。
小伙伴们觉得有用的麻烦留下推荐再走哈 (¬_¬)瞄,转载请备注下出处,谢谢哈!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!