JavaScript数组方法的错误使用例子


Posted in Javascript onSeptember 13, 2018

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'] }
// ]
Javascript 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
JavaScript实现简单计时器
Jun 22 Javascript
vue仿element实现分页器效果
Sep 13 #Javascript
区别JavaScript函数声明与变量声明
Sep 12 #Javascript
详解js中Array的方法及技巧
Sep 12 #Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 #Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 #Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 #Javascript
vue服务端渲染缓存应用详解
Sep 12 #Javascript
You might like
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
办公室人员先进事迹
2014/01/27 职场文书
初中班主任评语
2014/04/24 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
启动仪式策划方案
2014/06/14 职场文书
学位证书委托书
2014/09/30 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server