随着关于.map()、.reduce()和.filter()的文章疯狂增长的阅读数,我认为应该再分享两个数组方法,它们在JS开发者工具库总非常好使: .some() 和 .find() 。
一起探索吧!
.some()
这个数组方法帮你确定是否其存在一个及以上的元素与你要查找的内容相对应。如果你还困惑,让我用一个例子来说明…
这里有一个关于超级秘密组织的特工名单:
var operatives = [{ id: 12, name: 'Baze Malbus', pilot: false },{ id: 44, name: 'Bodhi Rook', pilot: true },{ id: 59, name: 'Chirrut Îmwe', pilot: false },{ id: 122, name: 'Jyn Erso', pilot: false }];
你想知道组织中是否有特工是飞行员(pilot)。有很多方法可以达到目的。大部分人会像这样使用 .forEach() :
var listHasPilots = false;operatives.forEach(function (operative) {if (operative.pilot) {listHasPilots = true;}});
仅仅是为了确认组织是否包含飞行员,这代码也太多行了吧。让我们试试 .some() !
var listHasPilots = operatives.some(function (operative) {return operative.pilot;});
我们用箭头函数会更加简洁(要求支持ES6、Babel或者Typescript)
const listHasPilots = operatives.some(operative => operative.pilot);
原理
当然,如果你将一个函数作为参数传递给 .some() 。这个回调函数将遍历数组中的每个值。然后,就可以判断数组元素是否符合你写的条件。回调函数会返回一个布尔类型。一旦匹配, .some() 返回 true 。如果没有符合条件的值, .some() 将返回 false 。
需要注意的是,一旦找到找到这样的元素, .some() 则停止检查余下的数组元素。在这个例子中,回调函数仅跑了两次,因为第二个特工Bodhi Rook是一个飞行员。不需要再检查其他飞行员。
.every()
正如在评论中所提出的,也可以通过 .every() 来检查是否每个元素都与条件匹配。它和 .some() 很相似,但是仅在所有元素都匹配下返回 true 。
.find()
这个数组方法正如其名:它会找到你想搜寻的东西。简而言之, .find() 将会返回匹配到条件的第一个值。让我们用回之前的数据。
这是我们的特工名单:
var operatives = [{ id: 12, name: 'Baze Malbus', pilot: false },{ id: 44, name: 'Bodhi Rook', pilot: true },{ id: 59, name: 'Chirrut Îmwe', pilot: false },{ id: 122, name: 'Jyn Erso', pilot: false }];
It’s the same as before, except this time instead of asking ourselves if we have a pilot in our ranks, we want the profile of that pilot! Let’s output the value we need using .find() :
和前面一样,不过这次不是查找我们队伍中是否有飞行员,而是想要队伍中飞行员的简介!我们需要 .find() 输出值:
var firstPilot = operatives.find(function (operative) {return operative.pilot;});
ES6的箭头函数非常短:
const firstPilot = operatives.find(operative => operative.pilot);
可以看到和 .some() 的代码非常相似,唯一的区别就是把方法名称换成了 find !不过不是返回一个布尔值,而是返回在列表中的第一个飞行员。
让我强调一下: .find() 返回第一个匹配值。如果有多个值与你的条件相匹配,它仅仅会返回第一个匹配值。如果你需要输出一个所有匹配项的列表,那应该使用.filter()。
如果没有找到, .find() 将会返回 undefined 。
优势
相比普通循环类似 .for() 或 .forEach() ,使用.find()或 .some() 不仅让你的代码简短,而且显得逻辑清晰。循环可以做任何事,但使用 .find() 表示你正在数组中寻找某个特殊的数组元素。至于 .some() 则可以表示你正明确地查找数组是否包含符合需求的元素。
That’s it!
希望你已经学到新东西了。与你的开发同行分享知识!你知道更多可以帮助JS社区编写更整洁、简单代码的Javascript技巧吗?如果知道,留个评论,我会试着写一篇关于它的博文。
Keep coding!
原文地址:https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d 原文作者:Etienne Talbot
