当前位置:首页 > 技术文章 > 正文内容

JavaScript中的数组(Array)方法你真的了解吗?

zonemu18小时前技术文章1

在过去的几个月,我发现我的拉取请求中存在四个完全相同的 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'] }
 // ]

OK,这篇文章就写到这里咯.这篇文章比较短,但是看似这些方法都比较简单,但是要能够灵活运用,提高效率还是要多练习的.

大家有什么疑问或者更好的理解也可以在评论区留言哦,一起讨论


相关文章

Ubuntu 25.04发行版登场:Linux 6.14内核,带来多项技术革新

IT之家 4 月 18 日消息,科技媒体 linuxiac 昨日(4 月 17 日)发布博文,报道称代号为 Plucky Puffin 的 Ubuntu 25.04 发行版正式上线,搭载最新 Linu...

2020年最漂亮的7个Linux发行版(最受欢迎的linux发行版)

请关注本头条号,每天坚持更新原创干货技术文章。如需学习视频,请在微信搜索公众号“智传网优”直接开始自助视频学习1. 前言对于想学习Linux的朋友们,心中一定有疑问,哪个Linux版本比较好入门,Li...

2024年10 大 Linux 桌面发行版推荐

年已过半,现在是探究 2024 年最流行的 Linux 发行版的最佳时机。Linux 是一个开源操作系统,构建在 Linux 内核上,并集成了 GNU shell 实用程序、桌面环境、应用程序、包管理...

Ubuntu 24.10发行版登场:Linux 6.11内核、GNOME 47桌面环境

IT之家 10 月 11 日消息,Canonical 昨日发布新闻稿,正式推出代号为 Oracular Oriole 的 Ubuntu 24.10 发行版。新版在内核方面升级到最新 6.11 版本,并...

7种超轻量级的Linux发行版,能够帮助你找到适合自己的操作系统

Linux是一种非常受欢迎的开源操作系统,而且有许多版本可以选择。有时候,你需要一种超轻量级的Linux发行版,它可以在资源有限的设备上运行,并且能够快速启动。本文将介绍7种超轻量级的Linux发行版...

2023 年 10 个最佳 Linux 桌面发行版

Linux 操作系统在桌面领域的发展已经不再被忽视,越来越多的用户正在考虑切换到 Linux 上。在 2023 年,我们可以期待更多的 Linux 桌面发行版的推出和发展。这里列举了 10 个最佳的...