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

更新日期: 2018-09-17阅读: 2.7k标签: 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


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

原生js获取数组中的最大值max和最小值min的方法总结

JavaScript获取数组中的最大值和最小值:方法一:传统循环遍历,方法二:利用Math.max和Math.min,方式三.利用sort排序...

原生js数组扁平化方法总汇,JavaScript多维数组如何实现扁平化处理返回一维数组

js数组扁平化就是指将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。 JavaScript方法包括 递归、es5 Array 的reduce函数用法、toString方法、ES6扩展运算符...

数组去重_原生js对普通数组去重算法的7种方法总结

JavaScript实现普通数组去重,讲解各种算法的思想和改进方法,已经他们的优缺点...利用数组的reduce方法,使用了filter方法,利用ES6去重,相对来说更为简单

如何快速的创建一个包含100个元素的数组

如何快速的创建一个包含100个元素的数组, 最初见到的问题是如何创建100个为元素为0 的数组,研究了一系列的方法,包含Es6 新的API ,不得不说, ES6 好强大!

js中数组创建的多种方式,数组中常用方法总汇

javascript创建数组的几种方式:1、字面量形式直接创建数组,2、Array构造函数创建数组。js数组常用的方法有哪些:join(),push()和pop(),shift() 和 unshift(),sort(),reverse(),concat()等

Array的 every、some、filter、map的区别,以及和reduce的区别

every、some、filter、map这几个方法有时候总是傻傻分不清,尤其map,总是一下子有点懵逼记不清和其他方法的区别,每次都需要查一下API,他们的相同点都是需要遍历数组中的每一项,重点是他们的区别.

从非数组对象转数组方法小结

从非数组对象转数组方法:Array.prototype.slice.call(obj、Array.from(obj)、[…obj]、Object.values(obj)等

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

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

JavaScript数组中的22个常用方法

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

js中split()和join() 的使用_数组对象和字符串的相互转换

在前端开发中,相信大家都遇到过数组和字符串相互转换的情况 ,JavaScript提供了split()和join()这2个函数来进行转换,下面就介绍数组对象和字符串的相互转换。

点击更多...

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