如何在 JavaScript 中更好地利用数组

本文短小精悍，我保证。在过去的数个月里，我注意到在我审阅的 pull request 中有四个（关于数组使用的）错误经常出现。同时，我自己也会犯这些错误，因此有了这篇文章。让我们一起学习，以确保以后能正确地使用数组方法！

使用 Array.includes 替代 Array.indexOf

"如果需要在数组中查找某个元素，请使用 Array.indexOf。"

我记得在我学习 JavaScript 的课程中有类似的这么一句话。毫无疑问，这完全正确！

在 MDN 文档中，对 Array.indexOf 的描述是：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。因此，如果在之后的代码中需要用到（给给定元素的）索引，那么 Array.indexOf 是不二之选。

然而，如果我们仅需要知道数组中是否包含给定元素呢？这意味着只是是与否的区别，这是一个布尔问题（boolean question）。针对这种情况，我建议使用直接返回布尔值的 Array.includes。

'use strict';const characters = [ 'ironman', 'black_widow', 'hulk', 'captain_america', 'hulk', 'thor',];console.log(characters.indexOf('hulk'));// 2console.log(characters.indexOf('batman'));// -1console.log(characters.includes('hulk'));// trueconsole.log(characters.includes('batman'));// false

使用 Array.find 替代 Array.filter

Array.filter 是一个十分有用的方法。它通过回调函数过滤原数组，并将过滤后的项作为新数组返回。正如它的名字所示，我们将这个方法用于过滤，（一般而言）会获得一个长度更短的新数组。

然而，如果知道经回调函数过滤后，只会剩余唯一的一项，那么我不建议使用 Array.filter。比如：使用等于某个唯一 ID 为过滤条件去过滤一个数组。在这个例子中，Array.filter 返回一个仅有一项的新数组。然而，我们仅仅是为了获取 ID 为特定 ID 的那一项，这个新数组显得毫无用处。

让我们讨论一下性能。为了获取所有符合回调函数过滤条件的项，Array.filter 必须遍历整个数组。如果原数组中有成千上万项，回调函数需要执行的次数是相当多的。
为避免这些情况，我建议使用 Array.find。它与 Array.filter 一样需要一个回调函数，（但只是返回）符合条件的第一项。当找到符合回调函数过滤条件的第一个元素时，它会立即停止往下的搜寻。不再遍历整个数组。

'use strict';

const characters = [ { id: 1, name: 'ironman' }, { id: 2, name: 'black_widow' }, { id: 3, name: 'captain_america' }, { id: 4, name: 'captain_america' },];function getCharacter(name) { return character => character.name === name;}console.log(characters.filter(getCharacter('captain_america')));// [//  { id: 3, name: 'captain_america' },//  { id: 4, name: 'captain_america' },// ]console.log(characters.find(getCharacter('captain_america')));// { id: 3, name: 'captain_america' }