changer

如何更好的使用JavaScript数组

原文链接: medium.freecodecamp.org

快速阅读,我保证。在过去几个月,在我检查拉取请求时,确切相同的四个错误不断出现。我也发表了这篇文章,因为我自己也犯过这些错误!让我们浏览它们以确保正确使用数组方法!

用 Array.includes代替Array.indexOf

“如果想在数组中查找某些内容,请使用Array. indexof”。我记得在学习JavaScript的时候,我在课上读过这样一句话。毫无疑问,这句话是千真万确的!

Array.indexOf “返回可以找到给定元素的第一个索引”,MDN文档这样说。因此,如果我们稍后在代码和数组中使用返回的索引。indexOf是解决方案。

但是,如果我们只需要知道数组是否包含一个值,该怎么办?看起来像是一个是/否的问题,一个布尔问题。像这种情况,我推荐使用返回布尔值的Array.includes。

使用Array.find 代替Array.filter

Array.filter是一个非常有用的方法。它从另一个数组中创建一个新数组,所有项都传递回调参数。 如其名称所示,我们必须使用此方法进行过滤,并获得更短的数组。

但是,如果知道我们的回调函数只能返回一个项,我将不会推荐它,例如,当使用一个通过唯一ID过滤的回调参数时。在这种情况,Array.filter 将会返回一个新的只含有一个项数组。通过查找特定的ID,我们的意图可能是使用数组中包含的唯一值,使这个数组无用。

一起讨论下性能,为了返回所有与回调函数数组匹配的项。Array.filter必须遍历整个数组。 此外, 想象一下,如果返回值有数百个是符合的项 ,过滤数组将变得非常庞大。

为了避免这些情况,我推荐Array.find.它需要一个像 Array.filter的回调参数,它返回满足这个回调的第一个元素的值。此外,Array.find 当项返回回调的时停止,它不需要浏览全部数组。

使用Array.some代替Array.find

我承认我犯过很多次这个错误,然而,一个好朋友告诉我,检查 MDN documentation 是一个很好的方法。事情是这样的:这与我们的Array. indexof /Array.includes 非常相似。

在前面的例子中,我们看到了Array.find需要一个回调作为参数,并返回一个元素。如果我们需要知道数组中是否包含值,那么Array.find是最佳解决方案?可能不会,因为它返回一个值,而不是一个布尔值。

像这种情况,我推荐使用Array.some 返回一个需要的布尔值。

使用Array.reduce代替Array.filter连接Array.map

事实上,理解Array.reduce并不简单。这是真的,但是,如果我们执行 Array.filter, 然后执行Array.map 看起来像遗漏了些什么对吧?

我的意思是,这里我们遍历了两遍数组。第一次过滤并生成一个短数组,第二次通过Array.filter又创造了新的数组,包含基于获得的新值。为了得到新的数组,我们使用了两个Array方法。每个方法有自己的回调函数和一个以后不能使用的数组—由Array.filter创建数组。

为了避免在这个问题上表现不佳, 我建议使用Array.reduce 来代替.同样的结果,更完美的代码!Array.reduce 允许您过滤和添加满意的项目累加器。例如, 这个累加器可以是要递增的数字、要填充的对象、要连接的字符串或数组。

在我们的例子中,自从我们使用 Array.map,我推荐使用Array.reduce 作为数组累加器. 在下面的例子中, 根据env的值, 我们将把它添加到累加器中,或者让这个累加器保持原样。

就是这样!

希望这个有帮助. 如果你对这篇文章有什么想法或者有其他例子要展示,一定要留下评论。如果你发现这篇文章对你有帮助,一定要给我个赞并将它分享出去。感谢阅读!

PS: 你可以在twitter(https://twitter.com/pacdiv_io)上关注我。

Note:在评论中 ,正如前面提到的malgosiastpDavid Piepgrass , 使用前请检查框架是否支持 Array.find 和 Array.includes,目前Internet Explorer是不支持的。