js array的所有方法(js 数组 find,some,filter,reduce区别详解)
类别:编程学习 浏览量:1843
时间:2021-11-05 14:29:11 js array的所有方法
js 数组 find,some,filter,reduce区别详解区分清楚Array中filter、find、some、reduce这几个方法的区别,根据它们的使用场景更好的应用在日常编码中。
Array.find 返回一个对象(第一个满足条件的对象)后停止遍历
const arrTest = [ { id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "b" }, { id: 4, name: "c" } ] // 过滤条件 function getName(val) { return arrTest => arrTest.name === val }
// 如果我们是想找到第一个满足条件的数据,应该使用`Array.find` console.log(arrTest.find(getName("b"))) // { id: 2, name: "b" }
Array.some 返回是否满足条件的布尔值
const arrTest = [ { id: 1, name: "a", status: "loading" }, { id: 2, name: "b", status: "loading" }, { id: 3, name: "b", status: "success" } ] // 过滤条件 function getStatus(val) { return arrTest => arrTest.status === val }
// 如果我们需要查找一个数组中是否存在某个数据的时候,使用Array.some直接拿到结果 console.log(arrTest.some(getStatus("success"))) // true
Array.filter 遍历整个Array返回一个数组(包含所有满足条件的对象)
const arrTest = [ { id: 1, name: "a", status: "loading" }, { id: 2, name: "b", status: "loading" }, { id: 3, name: "b", status: "success" } ] // 过滤条件 function getStatus(val) { return arrTest => arrTest.status === val } // 如果我们是需要过滤出一个数组中所有满足条件的数据,应该使用Array.filter console.log(arrTest.filter(getStatus("loading"))) // [ // { id: 1, name: "a", status: "loading" }, // { id: 2, name: "b", status: "loading" } // ]
Array.reduce 为数组的归并方法,使用场景很多,比如求和、求乘积,计次,去重,多维转一维,属性求和等...
本节示例主要实现Array.reduce对一组数据进行条件过滤后,返回一个新的数组
const arrTest = [ { id: 1, status: "loading" }, { id: 2, status: "loading" }, { id: 3, status: "success" } ] console.log( arrTest.reduce((acc, character) => { return character.status === "loading" ? acc.concat( Object.assign({}, character, { color: "info" }) ) : acc }, []) ) // [ // { id: 1, status: "loading", color: "info" }, // { id: 2, status: "loading", color: "info" } // ]
与Array.filter返回的数组的不同,filter返回的是原数组中符合条件的对象集合,filter与 Array.map 结合也可以实现上面的结果,为什么使用reduce更好呢?
// Array.map 和 Array.filter 组合 console.log( arrTest .filter(character => character.status === "loading") .map(character => Object.assign({}, character, { color: "info" }) ) ) // [ // { id: 1, status: "loading", color: "info" }, // { id: 2, status: "loading", color: "info" } // ]
结论:同时使用 Array.filter 和 Array.map 的时候,对整个数组循环了 2 遍。第一次是过滤返回一个新的数组,第二次通过 map 又构造一个新的数组。使用了两个数组方法,每一个方法都有各自的回调函数,而且 filter 返回的数组以后再也不会用到。
使用 Array.reduce 同样的结果,代码更优雅。
到此这篇关于js 数组 find,some,filter,reduce区别详解的文章就介绍到这了,更多相关js 数组 find,some,filter,reduce内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- js中事件的三个阶段(JavaScript中事件冒泡机制示例详析)
- pandasjson格式(对pandas处理json数据的方法详解)
- js RegExp用法
- extjs tabPanel的用法
- python3json序列化(Python3.5 Json与pickle实现数据序列化与反序列化操作示例)
- Extjs中文乱码
- ExtJs中怎么上传文件
- js闭包可以解决哪些问题(JavaScript中let避免闭包造成问题)
- 火狐查看json数据
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- js中toFixed() 的使用
- js 原生事件代理(如何利用原生JS实现触摸滑动监听事件)
- JS脚本中Null与Undefined的区别
- dedecms中的有些功能如何修改(织梦DEDECMS中用JS方式调用评论总数的技巧)
- sqlserver技术文档(sql server2016里面的json功能浅析)
- js日历图片(js实现简单日历效果)
- ()
- SCI检索 SSCI检索 EI检索 ISTP检索 CSCD检索简介(SCI检索SSCI检索EI检索)
- 参考文献里期刊名称的写法,你知道吗(参考文献里期刊名称的写法)
- 硕博期刊 SCI SSCI CSSCI分不清 一文带你看懂主流期刊分类(硕博期刊SCISSCI)
- 辱华品牌新百伦官宣新代言人IU,个别粉丝希望get爱豆同款(辱华品牌新百伦官宣新代言人IU)
- 巅峰时期被爆床照,曾被选国民最讨厌女星,IU不为人知的黑历史(巅峰时期被爆床照)
热门推荐
- vue实现添加一段代码功能(Vue实现动态查询规则生成组件)
- cookie政策及设置(详解操作cookie的原生方法cookieStore)
- laravel测试重连数据库(Laravel关系模型指定条件查询方法)
- dedecms 图片不显示(dedecms图片集添加水印的方法)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- html5+css3动画效果图(纯DOM+CSS3实现简单的小风车动画)
- mysql多核cpu利用(mysql CPU高负载问题排查)
- python怎么进行参数传递(在Python中如何传递任意数量的实参的示例代码)
- docker服务重启容器是否重启(docker自定义网桥docker0及docker的开启,关闭,重启命令操作)
- Ext.query与Ext.select 的用法