关注迅速公众平台
关注微信联系人
企业电话:021-64391578
干货分享:JavaScript编程趋势,用map和filter替换forEach
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是干什么的了,接下来我们会看到一个例子,在这个例子中会展示我更偏向于怎么写前面的例子:.filter(person => person.age < 15)
.map(person => ({ id: person.id, name: person.name }));
如果你想了解用在map方法里面的lambda表达式的语法,查看这个 Stack Overflow回答 了解详情。使用map和filter有很多好处,比如关注点分离、易于测试、可读性和异步编程的支持。因此,对我来说这是一个明智的选择。但是,我经常遇到使用forEach的开发人员。虽然函数式编程可能有点儿吓人,但是这些方法并没有什么好害怕的,即使它们有一些函数式编程的特征。map和filter在 响应式编程 中也被大量的用到。由于 RxJS ,现在响应式编程在JavaScript中被越来越多的用到。但请注意,它们可能会永久地改变你的编码方式。
上海安卓开发,找上海安卓开发专家迅速网络,4006080061,张先生,13916016158
特别申明:本站的主旨在于收集互联网运营相关的干货知识,给运营小伙伴提供便利。 网站所收集到的公开内容均来自于互联网或用户投稿,并不代表本站认同其观点, 也不对网站内容的真实性负责,如有侵权,请联系站长删除
您可以联系我们
彼此协助, 彼此信任
方能将美好的蓝图兑现