在JavaScript中为什么应该用map和filter替换forEach?

更新日期: 2018-09-17阅读量: 1636标签: Array

当你需要拷贝一个数组的全部或者部分到一个新数组的时候,优先使用map和filter而不是forEach。

咨询工作的好处之一是我可以看到无数的项目。这些项目在规模、使用的编程语言和开发人员的能力方面差别很大。虽然有很多我觉得应该废弃的模式,但是在JavaScript中,我觉得最应该废弃的是使用forEach创建新的数组。事实上,这个模式非常简单,看起来如下所示:

const kids = [];
people.forEach(person => {
  if (person.age < 15) {
    kids.push({ id: person.id, name: person.name });
  }
});

上面代码做的操作就是处理包含所有人的数组,并找出年龄小于15的人。然后把每一个符合条件的’孩子‘的部分属性组成的新对象添加到kids数组中。

虽然可以满足需求,但是有一种势在必行的编码方式(查看编程范式)。所以,你可能会想哪里出了问题?要理解这一点,让我们先熟悉两个”朋友“:map和filter。


map & filter

map和filter是在2015年作为ES6特征集的一部分引入到JavaScript中的。它们是数组的方法,允许在JavaScript中使用更函数式的编码风格。和在函数式编程的世界里一样,这两个方法也不会修改原数组,而是返回一个新数组。它们都接受一个类型是函数的单一变量。然后,这个函数会在原数组的每一项上被调用去产生最终结果。让我们看下这两个方法做了什么:

  • map:每一项调用函数的返回结果会放在这个方法返回的新数组里。

  • filter:每一项调用函数的返回结果决定这一项是否会被该方法返回的数组包含。

类似的还有一个方法,只是很少被用到,也就是reduce

以下是查看实际操作的简单例子:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
const even = numbers.filter(number => number % 2 === 0); // [2, 4]

现在我们知道map和filter是干什么的了,接下来我们会看到一个例子,在这个例子中会展示我更偏向于怎么写前面的例子:

const kids = people
  .filter(person => person.age < 15)
  .map(person => ({ id: person.id, name: person.name }));

如果你想了解用在map方法里面的lambda表达式的语法,查看这个Stack Overflow回答了解详情。

所以,这种实现方式的好处如下:

  • 关注点分离:过滤和改变数据的格式是两个不相关的关注点,对两个关注点分别使用各自的方法可以达到关注点分离的目的。

  • 易于测试:两种目的都使用了简单的纯函数,使得各种行为的单元测试变得简单。值得一提的是最初的实现版本并不是纯粹的,因为依赖一些作用域外边的状态(keys数组)。

  • 可读性:因为这两个方法有明确的目的,一个是过滤数据,一个是改变数据的格式,所以很容易看出对数据做了哪些处理。尤其是像reduce这样的同类函数。

  • 异步编程:forEach和async/await不能很好地结合在一起。但是map提供了一种有用的模式,可以和promises和async/await一起使用。更多关于这一点的内容会在下一篇博客中介绍。

同样值得注意的是,当你想产生副作用的时候,比如修改全局状态,不要使用map。尤其是当map方法的返回值并不会被保存或者使用的时候。


总结

使用map和filter有很多好处,比如关注点分离、易于测试、可读性和异步编程的支持。因此,对我来说这是一个明智的选择。但是,我经常遇到使用forEach的开发人员。虽然函数式编程可能有点儿吓人,但是这些方法并没有什么好害怕的,即使它们有一些函数式编程的特征。map和filter在响应式编程中也被大量的用到。由于RxJS,现在响应式编程在JavaScript中被越来越多的用到。但请注意,它们可能会永久地改变你的编码方式。


原文链接: gofore.com  
翻译来源:www.zcfy.cc


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1083

JavaScript数组中的22个常用方法

数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍

arguments转化成Array数组的方法

简单说一下arguments,arguments 就是函数内一个內建对象,它包含函数接收到的所有变量;所以,在实际开发中,我们使用arguments可以很方便的获取到所有的实参,并且也需要对其使用是写数组的方法

JS实现遍历不规则多维数组的方法

这篇文章主要介绍了JS实现遍历不规则多维数组的方法,涉及javascript数组递归遍历相关实现与使用技巧,需要的朋友可以参考下

js实现一维数组转换为树形结构数组

在设计树形结构的数据时候,数据库一般为:id,name,parent...如果后端不处理直接返给前端,前端就需要把这个一维数组转换为树形结构数组。下面整理了下如何通过js实现一维数组转换为树形结构数组。

js实现交换数组元素位置的方法总汇

交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式:第三方变量、splice方法、解构赋值

在 Array.filter 中正确使用 Async

在第一篇文章中,我们介绍了 async / await 如何帮助处理异步事件,但在异步处理集合时却无济于事。在本文中,我们将研究该filter函数,它可能是支持异步函数的最直观的方法。

es6中 Array.from()函数的用法

ES6为Array增加了from函数用来将其他对象转换成数组,Array.from可以接受三个参数,我们看定义:Array.from(arrayLike [, mapFn [, thisArg]])。arrayLike:被转换的的对象。 mapFn:map函数。 thisArg:map函数中this指向的对象。

js 数组方法,包含ES6方法

JavaScript常用数组操作方法:concat() 方法用于连接两个或多个数组。join() 方法用于把数组中的所有元素放入一个字符串。push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。pop() 方法用于删除并返回数组的最后一个元素。

Js Array对象常用方法

不改变原数组:concat();join();slice();toString(),改变原数组:pop();push();reverse();shift();unshift();sort();splice(),array.concat(array)连接两个或多个数组,返回被连接数组的一个副本

es6之Array.of()和Array.from()

es6新增了二种方法:Array.of()和Array.from(),它们有什么用途呢?在平时的开发中能给我们带来什么方便呢?本篇将从一个创建数组的小问题开始,逐步揭开它们的面纱。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!