如何在 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 相关文章推荐
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
最小化数据传输――在客户端存储数据
2006/10/09 PHP
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
如何在PHP中读写文件
2020/09/07 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
javascript对象的创建和访问
2016/03/08 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
浅析Vue自定义组件的v-model
2017/11/26 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
three.js实现圆柱体
2018/12/30 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
Python编程中的异常处理教程
2015/08/21 Python
Python如何telnet到网络设备
2021/02/18 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
会计自荐书
2013/12/02 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
简易版租房协议书范本
2014/10/13 职场文书
2014年路政工作总结
2014/12/10 职场文书