经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js 数组 find,some,filter,reduce区别详解
来源:jb51  时间:2021/6/15 14:18:27  对本文有异议

区分清楚Array中filter、find、some、reduce这几个方法的区别,根据它们的使用场景更好的应用在日常编码中。

Array.find

Array.find 返回一个对象(第一个满足条件的对象)后停止遍历

  1. const arrTest = [
  2. { id: 1, name: "a" },
  3. { id: 2, name: "b" },
  4. { id: 3, name: "b" },
  5. { id: 4, name: "c" }
  6. ]
  7.  
  8. // 过滤条件
  9. function getName(val) {
  10. return arrTest => arrTest.name === val
  11. }
  1. // 如果我们是想找到第一个满足条件的数据,应该使用`Array.find`
  2. console.log(arrTest.find(getName("b")))
  3. // { id: 2, name: "b" }
  4.  

Array.some

Array.some 返回是否满足条件的布尔值

  1. const arrTest = [
  2. { id: 1, name: "a", status: "loading" },
  3. { id: 2, name: "b", status: "loading" },
  4. { id: 3, name: "b", status: "success" }
  5. ]
  6.  
  7. // 过滤条件
  8. function getStatus(val) {
  9. return arrTest => arrTest.status === val
  10. }
  11.  
  1. // 如果我们需要查找一个数组中是否存在某个数据的时候,使用Array.some直接拿到结果
  2. console.log(arrTest.some(getStatus("success")))
  3. // true
  4.  

Array.filter

Array.filter 遍历整个Array返回一个数组(包含所有满足条件的对象)

  1. const arrTest = [
  2. { id: 1, name: "a", status: "loading" },
  3. { id: 2, name: "b", status: "loading" },
  4. { id: 3, name: "b", status: "success" }
  5. ]
  6.  
  7. // 过滤条件
  8. function getStatus(val) {
  9. return arrTest => arrTest.status === val
  10. }
  11.  
  12. // 如果我们是需要过滤出一个数组中所有满足条件的数据,应该使用Array.filter
  13. console.log(arrTest.filter(getStatus("loading")))
  14. // [
  15. // { id: 1, name: "a", status: "loading" },
  16. // { id: 2, name: "b", status: "loading" }
  17. // ]
  18.  

Array.reduce

Array.reduce 为数组的归并方法,使用场景很多,比如求和、求乘积,计次,去重,多维转一维,属性求和等...
本节示例主要实现Array.reduce对一组数据进行条件过滤后,返回一个新的数组

  1. const arrTest = [
  2. { id: 1, status: "loading" },
  3. { id: 2, status: "loading" },
  4. { id: 3, status: "success" }
  5. ]
  6.  
  7. console.log(
  8. arrTest.reduce((acc, character) => {
  9. return character.status === "loading"
  10. ? acc.concat(
  11. Object.assign({}, character, { color: "info" })
  12. )
  13. : acc
  14. }, [])
  15. )
  16. // [
  17. // { id: 1, status: "loading", color: "info" },
  18. // { id: 2, status: "loading", color: "info" }
  19. // ]
  20.  

与Array.filter返回的数组的不同,filter返回的是原数组中符合条件的对象集合,filter与 Array.map 结合也可以实现上面的结果,为什么使用reduce更好呢?

  1. // Array.map 和 Array.filter 组合
  2.  
  3. console.log(
  4. arrTest
  5. .filter(character => character.status === "loading")
  6. .map(character =>
  7. Object.assign({}, character, { color: "info" })
  8. )
  9. )
  10. // [
  11. // { id: 1, status: "loading", color: "info" },
  12. // { id: 2, status: "loading", color: "info" }
  13. // ]
  14.  

结论:同时使用 Array.filter 和 Array.map 的时候,对整个数组循环了 2 遍。第一次是过滤返回一个新的数组,第二次通过 map 又构造一个新的数组。使用了两个数组方法,每一个方法都有各自的回调函数,而且 filter 返回的数组以后再也不会用到。
使用 Array.reduce 同样的结果,代码更优雅。

到此这篇关于js 数组 find,some,filter,reduce区别详解的文章就介绍到这了,更多相关js 数组 find,some,filter,reduce内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号