by pacdiv

由pacdiv

这是如何更好地利用JavaScript数组的方法 (Here’s how you can make better use of JavaScript arrays)

Quick read, I promise. Over the last few months, I noticed that the exact same four mistakes kept coming back through the pull requests I checked. I’m also posting this article because I’ve made all these mistakes myself! Let’s browse them to make sure we correctly use Array methods!

我保证，请快速阅读。 在过去的几个月中，我注意到在我检查的拉取请求中，又出现了同样的四个错误。 我也发布了这篇文章，因为我自己犯了所有这些错误！ 让我们浏览它们以确保我们正确使用Array方法！

用Array.includes替换Array.indexOf (Replacing Array.indexOf with Array.includes)

“If you’re looking for something in your Array, use Array.indexOf.” I remember reading a sentence like this one in my course when I was learning JavaScript. The sentence is quite true, no doubt!

“如果要在数组中查找内容，请使用Array.indexOf。” 我记得在学习JavaScript的过程中读过这样的句子。 毫无疑问，这句话是真的！

Array.indexOf “returns the first index at which a given element can be found,” says the MDN documentation. So, if we use the returned index later in our code, and Array.indexOf is the solution.

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

But, what if we only need to know if our array contains a value or not? Seems like a yes/no question, a boolean question I would say. For this case, I recommend using Array.includes which returns a boolean.

但是，如果我们只需要知道数组是否包含值怎么办？ 好像是/否的问题，我会说一个布尔问题。 对于这种情况，我建议使用Array.includes返回一个布尔值。

使用Array.find代替Array.filter (Using Array.find instead of Array.filter)

Array.filter is a very helpful method. It creates a new array from another one with all items passing the callback argument. As indicated by its name, we must use this method for filtering, and for getting a shorter array.

Array.filter是一个非常有用的方法。 它从另一个数组创建一个新数组，所有项目都传递回调参数。 顾名思义，我们必须使用此方法进行过滤并获得较短的数组。

But, if we know our callback function can return only one item, I would not recommend it — for example, when using a callback argument filtering through a unique ID. In this case, Array.filter would return a new array containing only one item. By looking for a specific ID, our intention may be to use the only value contained in the array, making this array useless.

但是，如果我们知道回调函数只能返回一项，那么我不建议您使用它，例如，当使用通过唯一ID进行过滤的回调参数时。 在这种情况下，Array.filter将返回一个仅包含一项的新数组。 通过查找特定的ID，我们的意图可能是使用数组中包含的唯一值，从而使该数组无用。

Let’s talk about the performance. To return all items matching the callback function, Array.filter must browse the entire array. Furthermore, let’s imagine that we have hundreds of items satisfying our callback argument. Our filtered array would be pretty big.

让我们谈谈性能。 若要返回所有与回调函数匹配的项目，Array.filter必须浏览整个数组。 此外，让我们想象一下，有数百个满足回调参数的项。 我们过滤后的数组会很大。

To avoid these situations, I recommend Array.find. It requires a callback argument like Array.filter, and it returns the value of the first element satisfying this callback. Furthermore, Array.find stops as soon as an item satisfies the callback. There is no need to browse the entire array. Also, by using Array.find to find an item, we give a clearer idea about our intention.

为了避免这些情况，我建议使用Array.find。 它需要像Array.filter这样的回调参数，并返回满足此回调的第一个元素的值。 此外，只要项满足回调，Array.find就会停止。 无需浏览整个阵列。 另外，通过使用Array.find查找项目，我们可以更清楚地了解我们的意图。

用Array.some替换Array.find (Replacing Array.find with Array.some)

I admit I’ve made this mistake many times. Then, a kind friend told me to check the MDN documentation for a better way. Here’s the thing: this is very similar to our Array.indexOf/Array.includes case above.

我承认我犯了很多错误。 然后，一个好心的朋友告诉我检查MDN文档以寻求更好的方法。 事情是这样：这与我们上面的Array.indexOf / Array.includes情况非常相似。

In the previous case, we saw Array.find requires a callback as an argument and returns an element. Is Array.find the best solution if we need to know whether our array contains a value or not? Probably not, because it returns a value, not a boolean.

在前一种情况下，我们看到Array.find需要将回调作为参数并返回一个元素。 如果我们需要知道数组是否包含值，Array.find是否是最佳解决方案？ 可能不是，因为它返回一个值，而不是布尔值。

For this case, I recommend using Array.some which returns the needed boolean. Also, semantically, using Array.some highlights the fact that we don’t need the found item.

对于这种情况，我建议使用Array.some返回所需的布尔值。 同样，从语义上讲，使用Array.some可以突出表明我们不需要找到的项目。

使用Array.reduce而不是链接Array.filter和Array.map (Using Array.reduce instead of chaining Array.filter and Array.map)

Let’s face it, Array.reduce isn’t simple to understand. It’s true! But, if we run Array.filter, then Array.map it feels like we’re missing something, right?

面对现实，Array.reduce并不容易理解。 这是真的！ 但是，如果我们运行Array.filter，那么Array.map就像我们缺少了什么，对吗？

I mean, we browse the array twice here. The first time to filter and create a shorter array, the second time to create a new array (again!) containing new values based on the ones we obtained from Array.filter. To get our new array, we used two Array methods. Each method has its own callback function and an array that we cannot use later — the one created by Array.filter.

我的意思是，我们在这里浏览了两次数组。 第一次过滤并创建一个较短的数组，第二次创建一个新数组(再次！)，该数组包含基于从Array.filter获得的值的新值。 为了获得新的数组，我们使用了两个Array方法。 每个方法都有其自己的回调函数和一个以后不能使用的数组-由Array.filter创建的数组。

To avoid low performances on this subject, my advice is to use Array.reduce instead. Same result, better code! Array.reduce allows us to filter and add the satisfying items into an accumulator. As an example, this accumulator can be a number to increment, an object to fill, a string or an array to concat.

为了避免在此主题上表现不佳，我的建议是改用Array.reduce。 结果相同，代码更好！ Array.reduce允许我们过滤令人满意的项目并将其添加到累加器中。 例如，此累加器可以是要递增的数字，要填充的对象，字符串或要连接的数组。

In our case, since we’ve been using Array.map, I recommend using Array.reduce with an array to concat as an accumulator. In the following example, depending on the value of env, we will add it into our accumulator or leave this accumulator as is.

在我们的例子中，由于我们一直在使用Array.map，因此我建议将Array.reduce与一个数组结合起来用作累加器。 在下面的示例中，根据env的值，我们将其添加到累加器中或将该累加器保持原样。

而已！ (That’s it!)

Hope this helps. Be sure to leave comments if you have any thoughts on this article or have any other use cases to show. And if you found it helpful, give me some claps ? and share it. Thanks for reading!

希望这可以帮助。 如果您对本文有任何想法或需要展示的其他用例，请务必发表评论。 如果您觉得有帮助，请给我一些鼓掌吗？ 并分享。 谢谢阅读！

PS: You can follow me on Twitter here.

PS：您可以在Twitter上关注我 。

Note: As mentioned by malgosiastp and David Piepgrass in the comments, please check the support before using Array.find and Array.includes, which are currently not supported by Internet Explorer.

注意：如malgosiastp和David Piepgrass在评论中所述，请在使用Array.find和Array.includes之前检查支持，这些是Internet Explorer目前不支持的。

翻译自: https://www.freecodecamp.org/news/heres-how-you-can-make-better-use-of-javascript-arrays-3efd6395af3c/