js array map【js array map用法】 收藏 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数组中 forEach() 和 map() 的区别

本文已经原作者 Ashish Lahoti 授权翻译。

今天我们来看一下 Array中 Array.forEach()和 Array.map()方法之间的区别。

forEach()和map()方法通常用于遍历Array元素，但几乎没有区别，我们来一一介绍。

1.返回值

forEach()方法返回undefined ，而map()返回一个包含已转换元素的新数组。

由于forEach()返回undefined，所以我们需要传递一个空数组来创建一个新的转换后的数组。map()方法不存在这样的问题，它直接返回新的转换后的数组。在这种情况下，建议使用map()方法。

2.链接其他方法

map()方法输出可以与其他方法(如reduce()、sort()、filter())链接在一起，以便在一条语句中执行多个操作。

另一方面，forEach()是一个终端方法，这意味着它不能与其他方法链接，因为它返回undefined。

我们使用以下两种方法找出数组中每个元素的平方和：

当需要多个操作时，使用forEach()方法是一项非常乏味的工作。我们可以在这种情况下使用map()方法。

3.性能

这是在MacBook Pro的 **Google Chrome v83.0.4103.106（64位）**上运行上述代码后的结果。建议复制上面的代码，然后在自己控制台中尝试一下。

显然，map()方法比forEach()转换元素要好。

4.中断遍历

这两种方法都不能用 break 中断，否则会引发异常：

上面代码会抛出 SyntaxError：

如果需要中断遍历，则应使用简单的for循环或for-of/for-in循环。

5. 最后

建议使用map()转换数组的元素，因为它语法短，可链接且性能更好。

如果不想返回的数组或不转换数组的元素，则使用forEach() 方法。

最后，如果要基于某种条件停止或中断数组的便利，则应使用简单的for循环或for-of /for-in循环。

译者：前端小智 作者：Ashish Lahoti 来源：odingnconcepts 原文：https://codingnconcepts.com/javascript/difference-between-foreach-and-map-in-javascript-array/

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