网站首页 > 技术文章 正文
map、filter、reduce都是高阶函数,它们的功能非常强大,可以搭配箭头函数来完成复杂的数组数据处理。关于它们的用法很多人写过,但少有人写结合案例来写。在这里我会对这3个函数的用法结合案例来详细讲述,并额外写了for循环版本用来帮助理解。
模拟数据
要详细讲述这3个高阶函数的用法必须结合实际案例来讲。现在有一个这样的数组,这个数组是任务清单:
let todo = [
{id: 1, name: "吃饭", done: true},
{id: 2, name: "睡觉", done: true},
{id: 3, name: "编程", done: false},
{id: 4, name: "写作", done: false},
{id: 5, name: "逛街", done: true},
]
map方法
参数:只接收一个参数,必须是处理数据的函数。
作用:对数组成员调用传来的参数函数,进行处理后给出返回值。
返回值:返回由返回值构成的新数组。
需求
写一个可以更新todo数组数据的函数,例如对todo数组中id为3的done字段更新为true。
代码
map版本:
function updateTodo(arr, id, state) { // arr是数组,id是要处理的id,state是要更新的状态
return arr.map(item => {
if (item.id === id) return {...item, done: state} // 若找到指定id,那么更新数据
else return item // 若没找到指定id,返回原值
})
}`
for循环版本:
function updateFor(arr, id, state) {
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i].id === id) newArr[i] = {...arr[i], done: state}
else newArr[i] = arr[i]
}
return newArr
}`
测试
const newTodo1 = updateTodo(todo,3,true) // 检查运行结果可以看到id是3的记录的状态已更新为true
todo = newTodo1 // 将新内容更新到原数组
const newTodo2 = updateFor(todo,1,false) // 检查运行结果可以看到id是1的记录的状态已更新为false
todo = newTodo2 // 将新内容更新到原数组`
filter方法
参数:只接收一个参数,必须是处理数据的函数。
作用:对数组成员调用传来的参数函数,进行处理后给出true或false的返回值。
返回值:返回由返回值为true的数组成员构成的新数组。
需求
写一个可以删除todo数组指定行的函数,例如将todo数组中id为3那行数据删除。
代码
filter版本:
function deleteTodo(arr, id) { // arr是数组,id是要处理的id,state是要更新的状态
return arr.filter(item => {
if (item.id === id) return false // 若找到指定id,那么返回false,表示该行数据不要
else return true // 其他行数据返回true,表示该行数据需要
})
}`
for循环版本:
function deleteFor(arr, id) {
let newArr = []
for (let i of arr) {
if (i.id !== id) newArr.push(i)
}
return newArr
}`
测试
const newTodo1 = deleteTodo(todo,3) // 检查运行结果可以看到id是3的记录不存在
todo = newTodo1 // 将新内容更新到原数组
const newTodo2 = deleteFor(todo,4) // 检查运行结果可以看到id是4的记录不存在
todo = newTodo2 // 将新内容更新到原数组
reduce方法
参数:接收两个参数,第一个必须是处理数据的函数,第二个是初始值(数字型)。注意:该参数函数可以接收到4个参数,第一个参数是累加值,第二个参数是当前的数组成员,第三个参数是索引,第四个参数是数组,一般后2个可忽略。
作用:对数组成员调用传来的参数函数,进行处理后给出数字,然后将该数字累加到累加值上。
返回值:返回累加值。
需求
写一个可以统计todo数组中done为true的记录数量的函数。
代码
reduce版本:
function countTodo(arr) {
return arr.reduce((total,item) => total+(item.done?1:0),0)
}
for循环版本:
function countFor(arr) {
let count = 0
for (let i of arr) {
if (i.done) count++
}
return count
}
测试
const count1 = countTodo(todo) // 检查运行结果可以看到统计结果是3
const count2 = countFor(todo) // 检查运行结果可以看到统计结果也是3
结束语
写完了,希望对还没彻底掌握map、filter、reduce这3个高阶函数用法的朋友能有所帮助。请参考数据、需求和代码,尝试理解,自己敲一遍,然后尝试自己写一下。这样就能彻底掌握map、filter、reduce这3个常用的高阶函数了。
请注意:这3个函数底层有优化,用它们比自己写循环的运行效率要高,代码也更简洁。它们都是前端程序员处理数据时经常要用到的!
猜你喜欢
- 2024-11-24 赶快收藏!图灵前端图书学习路线图
- 2024-11-24 什么是BitMap?BitMap技术的原理和应用
- 2024-11-24 何时使用 Map 来代替普通的 JS 对象
- 2024-11-24 go语言深入Gin框架内幕(二)
- 2024-11-24 WeakMap和Map的区别,WeakMap原理,为什么能被 GC?
- 2024-11-24 2.7k star!MindMap 助你轻松绘制思维导图,高效工作必备!
- 2024-11-24 Python小知识,如何使用 Map, Filter 和 Reduce 内置函数
- 2024-11-24 解密 JavaScript 中的数据结构:Map vs Object
- 2024-11-24 Vue短文:如何使 Map 和 Set 类型的数据具有响应性?
- 2024-11-24 前端最常用的25个正则表达式,代码效率提高 80%
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 601℃几个Oracle空值处理函数 oracle处理null值的函数
- 593℃Oracle分析函数之Lag和Lead()使用
- 581℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 578℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 573℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 566℃【数据统计分析】详解Oracle分组函数之CUBE
- 552℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 547℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)