JavaScript编程趋势:用map和filter替换forEach

308.png

当你需要拷贝一个数组的全部或者部分到一个新数组的时候,优先使用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中被越来越多的用到。但请注意,它们可能会永久地改变你的编码方式。

这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

神级程序员教你如何写代码——十年编程内功心法

写代码就是学一门语言然后开始撸代码吗?看完了我一系列文章的同学或者本身已经就是老鸟的同学显然不会这么认为。编程是一项非常严谨的工作!虽然我们自嘲为码农,但是这工...

2185
来自专栏Golang语言社区

厚土Go学习笔记 | 01. Hello World开篇

Go语言的众多特性,是我很长时间以来一直寻找的集合体。一直想在服务器编程方面有一个更舒适的语言。想舒适的实现跨平台,想舒适的实现并发,想舒适的实现纯代码解决问题...

3678
来自专栏ytkah

dedecms提取某栏目及子栏目名称到首页怎么弄

  我们建网站时有不同的需求,例如为页面创建一个栏目导航,用dedecms如何提取某栏目及子栏目名称和链接呢?如下图所示,先列出指定的顶级栏目,在下方再列出此栏...

2994
来自专栏CSDN技术头条

6个编写优质干净代码的技巧

编写干净的代码并不是一件容易的事情,这需要尝试不同的技巧和实践。问题是,在这个问题上有太多的实践和技巧,因此开发人员很难进行选择,所以要把这个问题简化一下。在本...

19810
来自专栏美团技术团队

Hades:移动端静态分析框架

作为全球最大的互联网 + 生活服务平台,美团点评近年来在业务上取得了飞速的发展。为支持业务的快速发展,移动研发团队规模也逐渐从零星的小作坊式运营,演变为千人级研...

1113
来自专栏IT派

那些神奇的一行 Python 代码

Python 这门语言非常的有趣,不仅可以做高大上的人工智能、大数据、机器学习。还可以用来做 Web、爬虫。还有其它很多的应用。今天我就给大家展示下一行 Pyt...

1704
来自专栏PPV课数据科学社区

关于python的编解码(decode, encode)

总结总结,本文仅适用于python2.x 默认编码与开头声明 首先是开头的地方声明编码 # coding: utf8 这个东西的用处是声明文件编码为utf8(要...

3717
来自专栏Android群英传

华山论剑之契约式编程与防御式编程

1913
来自专栏机器之心

比Python还好用的Go语言要出2.0了,你想怎么设计?

在昨天的 Go contributor 年度峰会上,与会者对错误处理和泛型的设计草案有了一个初步的了解。Go 2 的开发项目是去年宣布的,今天谷歌公布了这一语言...

1311
来自专栏非著名程序员

编程内功心法:如何写代码?

写代码就是学一门语言然后开始撸代码吗?看完了我的《GoF 设计模式》系列文章的同学或者本身已经就是老鸟的同学显然不会这么认为。编程是一项非常严谨的工作!

68713

扫码关注云+社区

领取腾讯云代金券