写点什么

JavaScript 中 Array 方法的正确打开方式

  • 2018-09-16
  • 本文字数:2480 字

    阅读完需:约 8 分钟

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

用 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

感谢覃云对本文的审校。

2018-09-16 06:191431

评论

发布
暂无评论
发现更多内容

众盟科技:跨越时空70年,一场别样的房地产直播开启人文探索

脑极体

面试官问我:看过sharding-jdbc的源码吗?我吧啦吧啦说了一通!!

冰河

数据库 分布式事务 微服务 分布式数据库 ShardingJDBC

起飞!这份技术点拉满的ELk+Lucene笔记,可能价值百万

小Q

Java lucene elasticsearch 架构 面试

算法与数据中台实践之网约车平台

博文视点Broadview

大数据 数据中台 中台 算法 数据

Nodejs使用es module开发CLI

zayfen

nodejs Module ES cli esm

Hadoop3 环境搭建

yuanhang

anyRTC推流小助手-客户端推流(PUSH RTMP)工具

anyRTC开发者

技术 音视频 WebRTC 直播 RTC

阿里架构师耗时三个月整理的Spring实战笔记:入门到实战

Java架构师迁哥

实战解析丨如何对Mysql连接请求的tcpdump内容进行分析

华为云开发者联盟

TCP/IP 数据传输

Hadoop 简介

yuanhang

hadoop

干货:不同场景容器内获取客户端源IP的方法

华为云开发者联盟

容器 服务端 场景

flutter在行动之踩坑的日子(1)

霜蓝手环

flutter 跨平台 Flutter Android Apk 编程之路

如何设计Upload组件思考

赵孔磊

【API进阶之路】用API打造一条自动化内容生产流水线

华为云开发者联盟

自动化 API 部署

易观方舟Open API 及最佳实践

易观大数据

XSKY全新一代SDS一体机五大场景之超融合

XSKY星辰天合

或许是史上最好的AQS源码分析了,AQS基础一

InfoQ_d2212957090d

AQS

初识大数据

yuanhang

大数据

LeetCode题解:232. 用栈实现队列,使用两个栈 入队 - O(1), 出队 - O(n),JavaScript,详细注释

Lee Chen

大前端 LeetCode

Centos 上配置大数据环境

yuanhang

大数据

分布式追踪系统原理看不懂,40张图带你亲手实践

小Q

Java 架构 面试 分布式 系统设计

教师节送什么老师最开心?程序员三招解决家长送礼难题!

华为云开发者联盟

编程 程序

程序员快乐器之JAVA代码生成工具

Learun

敏捷开发 快速开发 生成代码

Atlassian Team Tour 9月23日登陆中国,报名通道已开启!

Atlassian

敏捷开发 数字化转型 金融 Jira

众盟科技:跨越时空70年,一场别样的房地产直播开启人文探索

人称T客

阿里P9开源阿里内部秒杀系统设计方案以及设计原则,还不收藏

小Q

Java 架构 系统设计 秒杀 并发

URL 去重的 6 种方案!(附详细实现代码)

王磊

Java

学完微软技术总监整理的44 个微服务架构设计模式,我涨薪了

Java架构师迁哥

.NET多线程(Thread,ThreadPool,Task,Async与Await)

AI代笔

jvm疯狂吞占内存,罪魁祸首是谁?

易观大数据

通证是下一代互联网数字经济的关键

CECBC

区块链 通证经济

JavaScript中Array方法的正确打开方式_JavaScript_pacdiv_InfoQ精选文章