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实现省市联动效果)
- 常用的几种jsp开发环境搭建(怎么一键安装Jsp网站程序?Jsp环境一键配置软件JspStudy推荐)
- js的三种使用方法(JS带你深入领略Proxy的世界)
- nodejs的广播机制(node.js如何自定义实现一个EventEmitter)
- JS函数前面感叹号的作用
- js回调函数
- next js上线(Next.js入门使用教程)
- js如何访问xml
- nodejs如何识别接口(Node实现搜索框进行模糊查询)
- sqlserver技术文档(sql server2016里面的json功能浅析)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- js时间日期处理
- js淘宝购物车效果代码(JavaScript实现电商平台商品细节图)
- lombok 代码行数(Lombok实现方式JSR-269)
- JS中prototype
- JS中错误处理
- 8月23日11时16分将迎处暑,逐渐进入气象意义上的秋天(8月23日11时16分将迎处暑)
- 花不语 下 如果重来一次的话,你还会这么选择吗(花不语下如果重来一次的话)
- 城市记忆之上海 最难忘的是老弄堂里的市井味道(城市记忆之上海)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
热门推荐
- asp.net中fileupload上传文件的方法
- sqlserver基础数据类型(SQL Server中T-SQL 数据类型转换详解)
- tensorflow自定义初始化(Tensorflow分类器项目自定义数据读入的实现)
- idea docker使用(最新IDEA快速实现Docker镜像部署运行的过程详解)
- python测试websocket接口(Python如何爬取实时变化的WebSocket数据的方法)
- thinkphp远程代码执行教程(ThinkPHP 5.x远程命令执行漏洞复现)
- win10怎么安装apache(apache启动失败怎么办 快速解决Win10系统apache启动失败的方法教程)
- nginx常见错误码(Nginx常见的错误配置举例)
- python字符串找一个最大字符(Python查找最长不包含重复字符的子字符串算法示例)
- css竖排显示技巧(css魔法之左边竖条的多种实现方法)