标签：map arr true reduce JS done 数组 todo id
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的记录的状态已更新为true
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,1,false) // 检查运行结果可以看到id是1的记录的状态已更新为true
todo = newTodo2 // 将新内容更新到原数组
reduce方法
参数：接收两个参数，第一个必须是处理数据的函数，第二个是初始值(数字型)。注意：该参数函数可以接收到4个参数，第一个参数是累加值，第二个参数是当前的数组成员，第三个参数是索引，第四个参数是数组。
作用：对数组成员调用传来的参数函数进行处理后给出数字，然后将该数字累加到累加值上。
返回值：返回累加值。
需求
写一个可以统计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个在JavaScript中经常用到的高阶函数。
注意，这3个函数底层有优化，用它们比自己写循环的运行效率要高，代码也更简洁。它们是前端程序员处理数据时经常会用到的。希望各位读者都能掌握。
标签：map,arr,true,reduce,JS,done,数组,todo,id 来源： https://blog.csdn.net/m0_47670683/article/details/120323462
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。