如何在 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 window对象属性整理
Oct 24 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 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
我的群发邮件程序
2006/10/09 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php分页查询的简单实现代码
2017/03/14 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
python爬取网站数据保存使用的方法
2013/11/20 Python
Python易忽视知识点小结
2015/05/25 Python
Python中安装easy_install的方法
2018/11/18 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
上班迟到检讨书
2014/01/10 职场文书
环保倡议书500字
2014/05/15 职场文书
质量负责人任命书
2014/06/06 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
撤诉申请怎么写
2015/05/19 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
DE1107机评
2022/04/05 无线电
MySQL数据管理操作示例讲解
2022/12/24 MySQL