JavaScript数组方法的错误使用例子
1. 不要使用Array.indexOf，使用Array.includes
“如果你要在数组中查找元素，使用Array.indexOf!”。记得在我学习JavaScript课程时候，有这样一句话。这句话没错，确实可以这么使用！
根据MDN文档：“Array.indexOf会返回被查找元素第一个匹配的位置的下标。”因此，如果后面需要用到这个索引，Array.indexOf是一个很好的解法。但是，我们要解决的问题是：查找数组中是否包含某个元素。这是一个Yes/No的问题，是一个返回布尔类型的真假问题。因此，我建议使用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
2. 不要使用Array.filter，使用Array.find
Array.filter是一个很有用的函数，它返回一个满足过滤条件的新数组。正如其名字表达的含义，它是用来做过滤的。
但是，如果我们知道我们要的结果只有一个元素的时候，我就不建议使用它了。比如，如果我们的回调函数定义用一个唯一的ID来过滤，那么结果必然唯一了。在这个情况下，Array.filter会返回只有一个元素的数组。因为既然能通过一个特定的ID来查找，我们已经确定只有一个元素了，那么使用数组就没有意义。
另外，我们再来聊聊性能问题。为了返回所有匹配的元素，Array.filter需要查找整个数组。可以想象一下，如果有上百个元素满足过滤条件，那么返回的数组就很大。
为了避免这样的情况，我建议使用Array.find。它仅仅返回第一个满足过滤条件的元素。而且，Array.find会在查找到第一个满足条件的元素后就结束执行，而不会查找整个数组。
'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' }
3. 不要使用Array.find，使用Array.some
我承认我犯过很多次错误。后来，一个很要好的朋友让我去看看MDN的文档，说有更好的解决方案。这个情况和刚刚提到的Array.indexOf/Array.includes很像。
在前面的例子中，我们看到Array.find接受一个过滤函数，返回满足的元素。那么，如果我们要查找一个数组是否包含某个元素的时候，Array.find是否是最佳的方案呢？可能不是，因为它返回的是元素具体的值，而不是布尔值。
我推荐大家使用Array.some，它会返回布尔值。
'use strict';
const characters = [
{ id: 1, name: 'ironman', env: 'marvel' },
{ id: 2, name: 'black_widow', env: 'marvel' },
{ id: 3, name: 'wonder_woman', env: 'dc_comics' },
];
function hasCharacterFrom(env) {
return character => character.env === env;
}
console.log(characters.find(hasCharacterFrom('marvel')));
// { id: 1, name: 'ironman', env: 'marvel' }
console.log(characters.some(hasCharacterFrom('marvel')));
// true
4. 不要使用Array.map和Array.filter组合，使用Array.reduce
Array.reduce有点难以理解！但是，如果我们每次在同时使用Array.filter和Array.map的时候，你是否觉察到需要点东西，对不？
我的意思是：我们对整个数组循环了2遍。第一次是过滤返回一个新的数组，第二次通过map又构造一个新的数组。我们使用了两个数组方法，每一个方法都有各自的回调函数，而且Array.filter返回的数组以后再也不会用到。
为了避免低效率，我建议使用Array.reduce。同样的结果，更优雅的代码！请看下面的例子：‘'
'use strict';
const characters = [
{ name: 'ironman', env: 'marvel' },
{ name: 'black_widow', env: 'marvel' },
{ name: 'wonder_woman', env: 'dc_comics' },
];
console.log(
characters
.filter(character => character.env === 'marvel')
.map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
);
// [
// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
console.log(
characters
.reduce((acc, character) => {
return character.env === 'marvel'
? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
: acc;
}, [])
)
// [
// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
相关文章
右下角弹出提示框想必大家不会陌生吧，本文简单的为大家实现一个，具体代码如下，有需求的朋友可以参考下2013-08-08
这篇文章主要为大家详细介绍了使用js编写实现拼图游戏，一种是拖拽拼图，一种是经典的九宫格拼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细解析了复杂的javascript窗口分帧，什么是窗口分帧，JavaScript中帧窗口之间的关系，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了使用D3.js构建实时图形的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
分页这种组件，几乎每一种框架都有这样的组件，这篇文章主要介绍了MVVM框架下实现分页功能示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本文主要介绍了Echarts实现点击列表联动饼图的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效，软件应用，后台应用JS计算器插件代码免费下载。2015-05-05
这篇文章主要为大家详细介绍了bootstrap select下拉搜索插件的使用方法，动态加载自己数据的二级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了JavaScript this在函数中的指向及实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
JavaScript 有Date、Array、String等这样的内置对象，功能强大使用简单，人见人爱，但在处理一些复杂的逻辑的时候，内置对象就很无力了，往往需要开发者自定义对象2013-08-08
最新评论