如何在 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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python实现百万答题自动百度搜索答案
2018/01/16 Python
python用户管理系统
2018/03/13 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
Unix控制后台进程都有哪些进程
2016/09/22 面试题
求职者怎样写自荐信
2014/04/13 职场文书
高三励志标语
2014/06/05 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
骨干教师申报材料
2014/12/17 职场文书
二年级数学教学反思
2016/02/16 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL