javascript array filter 收藏 0

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

map、filter、reduce都是高阶函数，它们的功能非常强大，可以搭配箭头函数来完成复杂的数组数据处理。关于它们的用法很多人写过，但少有人写结合案例来写。在这里我会对这3个函数的用法结合案例来详细讲述，并额外写了for循环版本用来帮助理解。

要详细讲述这3个高阶函数的用法必须结合实际案例来讲。现在有一个这样的数组，这个数组是任务清单：

参数：只接收一个参数，必须是处理数据的函数。

作用：对数组成员调用传来的参数函数，进行处理后给出返回值。

返回值：返回由返回值构成的新数组。

需求

写一个可以更新todo数组数据的函数，例如对todo数组中id为3的done字段更新为true。

代码

map版本：

for循环版本：

测试

参数：只接收一个参数，必须是处理数据的函数。

作用：对数组成员调用传来的参数函数，进行处理后给出true或false的返回值。

返回值：返回由返回值为true的数组成员构成的新数组。

需求

写一个可以删除todo数组指定行的函数，例如将todo数组中id为3那行数据删除。

代码

filter版本：

for循环版本：

测试

参数：接收两个参数，第一个必须是处理数据的函数，第二个是初始值(数字型)。注意：该参数函数可以接收到4个参数，第一个参数是累加值，第二个参数是当前的数组成员，第三个参数是索引，第四个参数是数组，一般后2个可忽略。

作用：对数组成员调用传来的参数函数，进行处理后给出数字，然后将该数字累加到累加值上。

返回值：返回累加值。

需求

写一个可以统计todo数组中done为true的记录数量的函数。

代码

reduce版本：

for循环版本：

测试

写完了，希望对还没彻底掌握map、filter、reduce这3个高阶函数用法的朋友能有所帮助。请参考数据、需求和代码，尝试理解，自己敲一遍，然后尝试自己写一下。这样就能彻底掌握map、filter、reduce这3个常用的高阶函数了。

请注意：这3个函数底层有优化，用它们比自己写循环的运行效率要高，代码也更简洁。它们都是前端程序员处理数据时经常要用到的！

JS数组filter、map、reduce、reduceRight函数的详细使用说明

程序员语录：

把时髦的技术挂在嘴边，还不如把过时的技术记在心里。

• 在JS中数组的filter方法是常用的方法，它的主要作用是对数组进行过滤。
• map（） 方法返回一个新数组，常用于根据原数组来生成新的数组。
• reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
• reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

返回数组arr中所有大于8的元素，filter不会影响原数组：

map() 方法返回一个新数组（原数组中的数据也会改变），数组中的元素为原始数组元素调用函数处理后的值。

完整的语法如下：

• currentValue 必须。当前元素的值
• index 可选。当前元素的索引值
• arr 可选。当前元素属于的数组对象

如这里有一组数据如下：

JS数组的 reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值，如这里计算数组中数据的总和：

数组执行的reduce函数，回调这里定义的getSum函数，其中 total 为上一次累加的数据：

第一次计算时，total 默认取数组中的第一个数据也就是10，num 为数组中的第二个数据10，第一次计算的结果就是20；

第二次计算时 total 取值为上一次的计算结果 20，num 为数组中的第三个数据20，本次计算结果为 40；

第三次计算时 total 取值为上一次的计算结果 40，num 为数组中的第四个数据20，本次计算结果为 60；

数组执行的reduce函数，回调这里定义的getSum函数，并设置了默认的参数值1：

第一次计算时，total 默认取数组中的第一个数据也就是1，num 为数组中的第1个数据10，第一次计算的结果就是11；

第二次计算时 total 取值为上一次的计算结果 11，num 为数组中的第二个数据10，本次计算结果为 21；

第三次计算时 total 取值为上一次的计算结果 21，num 为数组中的第三个数据20，本次计算结果为 41；

第四次计算时 total 取值为上一次的计算结果 41，num 为数组中的第四个数据20，本次计算结果为 61；

数组执行的reduce函数，回调这里定义的getSum函数，其中参数三 index 是参数二 num 取值的数组角标：

• 当执行reduce函数 没有设置默认值时，index 第一次执行时值为1，total 为数组中的第一个元素的值，num 为数组角标为1，也就是第二个元素的值。
• 当执行reduce函数 设置默认值时，index 第一次执行时值为0。

完毕

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com