JavaScript中Array方法你该知道的正确打开方法


Posted in Javascript onSeptember 11, 2018

前言

在过去的几个月,我发现我的拉取请求中存在四个完全相同的 JavaScript 错误。于是我写了这篇文章,总结了如何在 JavaScript 中正确使用地使用 Array 的方法!

Array对象为JavaScript内置对象,具有以下属性:

属性 描述
constructor 返回对创建此对象的数组函数的引用。
length 返回数组中元素的个数
prototype 向对象添加属性和方法。

用 Array.includes 代替 Array.indexOf

“如果你要在数组中查找元素,请使用 Array.indexOf”。我记得在学习 JavaScript 的时候,在教材中读到这样的一句话。毫无疑问,这句话是真的!

MDN 文档写道,Array.indexOf 将“返回第一次出现给定元素的索引”。因此,如果我们稍后要在代码中使用这个返回的索引,那么使用 Array.indexOf 找到索引就对了。

但是,如果我们只想知道数组是否包含某个值,该怎么办?这似乎是一个是与否的问题,或者说是一个布尔值问题。对于这种情况,我建议使用返回布尔值的 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 是一个非常有用的方法。它接受一个回调函数作为参数,基于一个包含所有元素的数组创建出一个新的数组。正如它的名字一样,我们使用这个方法来过滤元素,获得更短的数组。

但是,如果回调函数只能返回一个元素,那么我就不推荐使用这个方法,例如使用回调函数来过滤唯一 ID。在这种情况下,Array.filter 将返回一个只包含一个元素的新数组。我们的意图可能是通过查找特定的 ID 找到数组中包含的唯一值。

我们来看看这个方法的性能。要返回与回调函数匹配的所有元素,Array.filter 必须遍历整个数组。此外,我们假设有数百个元素可以满足回调参数,那么过滤后的数组会非常大。

为了避免这种情况,我建议使用 Array.find。它需要一个像 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' }

用 Array.some 代替 Array.find

我承认这个错误我犯了很多次。然后,一位善良的朋友告诉我,最好可以先参考 MDN 文档。这与上面的 Array.indexOf/Array.includes 非常相似。

在前面的例子中,我们看到 Array.find 需要一个回调函数作为参数,并返回一个元素。如果我们想要知道数组是否包含某个值,Array.find 是最好的解决方案吗?可能不是,因为它返回的是一个元素值,而不是一个布尔值。

对于这种情况,我建议使用 Array.some,它返回所需的布尔值。另外,从语义上看,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.reduce 而不是链接 Array.filter 和 Array.map

让我们面对现实吧,Array.reduce 不容易理解。事实确实如此!但是,如果我们使用 Array.filter 和 Array.map 的组合,感觉缺少了什么,对吧?

我的意思是,我们遍历了两次数组。第一次过滤数组并创建一个较短的数组,第二次又基于 Array.filter 获得数组创建一个包含新值的数组。为了获得我们想要的新数组,我们使用了两个 Array 方法。每个方法都有自己的回调函数和一个用不到的数组——由 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'] }
// ]

英文原文:

https://medium.freecodecamp.org/heres-how-you-can-make-better-use-of-javascript-arrays-3efd6395af3c

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
webpack入门必知必会
Jan 16 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 #Javascript
详解webpack模块加载器兼打包工具
Sep 11 #Javascript
webpack css加载和图片加载的方法示例
Sep 11 #Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 #Javascript
webpack的CSS加载器的使用
Sep 11 #Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 #Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 #Javascript
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
python如何快速生成时间戳
2020/07/21 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
C#面试问题
2016/07/29 面试题
自我鉴定怎么写
2014/01/12 职场文书
后勤工作个人总结
2015/02/28 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书