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


Posted in Javascript onSeptember 27, 2018

本文短小精悍,我保证。在过去的数个月里,我注意到在我审阅的 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' },
// ]

console.log(characters.find(getCharacter('captain_america')));
// { id: 3, name: 'captain_america' }

使用 Array.some 替代 Array.find

我承认我经常犯这个错误。之后,一位朋友建议我去查看 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

译者注:补充一下 Array.some 与 Array.includes 使用上的区别。两者都返回一个布尔值,表示某项是否存在于数组之中,一旦找到对应的项,立即停止遍历数组。不同的是 Array.some 的参数是回调函数,而 Array.includes 的参数是一个值(均不考虑第二个可选参数)。

假设希望知道值为 value 的项是否存在于数组中,既可以编写代码:[].includes(value), 也可以给 Array.some 传入 item => item === value 作为回调函数。Array.includes  使用更简单,Array.some 可操控性更强。

使用 Array.reduce 替代 Array.filter 与 Array.map 的组合

事实上说,Array.reduce 不太容易理解。然而,如果我们先使用 Array.filter 过滤原数组,之后(对结果)再调用 Array.map (以获取一个新数组)。这看起似乎有点问题,是我们忽略了什么吗?

这样做的问题是:我们遍历了两次数组。第一次是过滤原数组以获取一个长度稍短的新数组,第二次遍历(译者注:指 Array.map)是对 Array.filter 的返回的新数组进行加工,再次创造了一个新数组!为得到最终的结果,我们结合使用了两个数组方法。每个方法都有它自己的回调函数,而且供 Array.map 使用的临时数组是由 Array.filter 提供的,(一般而言)该数组无法复用。

为避免如此低效场景的出现,我的建议是使用 Array.reduce 。一样的结果,更好的代码!Array.reduce 允许你将过滤后切加工过的项放进累加器中。累加器可以是需要待递增的数字、待填充的对象、 待拼接的字符串或数组等。

在上面的例子中,我们使用了 Array.map,(但更)建议使用累加器为待拼接数组的 Array.reduce 。在下面的例子中,根据变量 env 的值,我们会将它加进累加器中或保持累加器不变(即不作任何处理)。

'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 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
js中的string.format函数代码
Aug 11 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
axios 封装上传文件的请求方法
Sep 26 #Javascript
axios取消请求的实践记录分享
Sep 26 #Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 #Javascript
在vue中获取token,并将token写进header的方法
Sep 26 #Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 #Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 #Javascript
基于JavaScript实现一个简单的Vue
Sep 26 #Javascript
You might like
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
解决Python安装后pip不能用的问题
2018/06/12 Python
悬挂训练绳:TRX
2017/12/14 全球购物
行政管理专业推荐信
2013/11/02 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
python异常中else的实例用法
2021/06/15 Python