如何在 JavaScript 中更好地利用数组
76 浏览量
2020-12-01
04:32:27
上传
评论
收藏 75KB PDF 举报
如何在如何在 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'));
// 2
console.log(characters.indexOf('batman'));
// -1
console.log(characters.includes('hulk'));
// true
console.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' },
资源评论
