编程教育资源分享平台

网站首页 > 后端开发 正文

JavaScript数组之map、filter、reduce使用详解

luoriw 2024-01-31 12:32:36 后端开发 16 ℃ 0 评论

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个函数底层有优化,用它们比自己写循环的运行效率要高,代码也更简洁。它们都是前端程序员处理数据时经常要用到的!

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言