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打开新窗口同时关闭旧窗口
Jan 16 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 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
提高php运行速度的一些小技巧分享
2012/07/03 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php的hash算法介绍
2014/02/13 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
网络安全方面的面试题
2015/11/04 面试题
捷科时代的软件测试笔试题
2015/11/09 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
校园安全检查制度
2014/02/03 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
2014年化验室工作总结
2014/11/21 职场文书
思想道德自我评价2015
2015/03/09 职场文书
《我是什么》教学反思
2016/02/16 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS