1. 首页

优秀的攻城狮都如何使用JavaScript数组的?

优秀的攻城狮都如何使用JavaScript数组的?

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

用 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的值, 我们将把它添加到累加器中,或者让这个累加器保持原样。

就是这样!

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

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

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:优秀的攻城狮都如何使用JavaScript数组的?

链接:https://www.javascriptc.com/1942.html

原文链接:https://www.zcfy.cc/article/here-s-how-you-can-make-better-use-of-javascript-arrays

« 你好,请问Shadow DOM是什么?
JavaScript: 什么是纯函数以及为什么要用纯函数?»
Flutter 中文教程资源

相关推荐

QR code