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 函数式编程的原理
Oct 16 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
Email+URL的判断和自动转换函数
2006/10/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
分享PHP守护进程类
2015/12/30 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
python队列Queue的详解
2019/05/10 Python
Python 在函数上添加包装器
2020/07/28 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
大学生标准推荐信范文
2013/11/25 职场文书
工作推荐信范文
2014/05/10 职场文书
社区党建工作方案
2014/06/10 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
母亲去世追悼词
2015/06/23 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书