如何在JavaScript中更好地利用数组

  

本文短小精悍,我保证。在过去的数个月里,我注意到在我审阅的拉请求中有四个(关于数组使用的)错误经常出现。同时,我自己也会犯这些错误,因此有了这篇文章。让我们一起学习,以确保以后能正确地使用数组方法!

  

  

"如果需要在数组中查找某个元素,请使用Array.indexOf。”

  

我记得在我学习JavaScript的课程中有类似的这么一句话。毫无疑问,这完全正确!

  

在MDN文档中,对数组中。indexOf的描述是:返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回1。因此,如果在之后的代码中需要用到(给给定元素的)索引,那么数组。indexOf是不二之选。

  

然而,如果我们仅需要知道数组中是否包含给定元素呢?这意味着只是是与否的区别,这是一个布尔问题(布尔问题)。针对这种情况,我建议使用直接返回布尔值的Array.includes。

        使用严格的;      常量字符=[   “铁人”,   “black_widow”,   “绿巨人”,   “captain_america”,   “绿巨人”,   “雷神”,   ];      console.log (characters.indexOf(“绿巨人”));//2   console.log (characters.indexOf(“蝙蝠侠”));//1      console.log (characters.includes(“绿巨人”));//正确的   console.log (characters.includes(“蝙蝠侠”));//错误      

  

数组。过滤器是一个十分有用的方法。它通过回调函数过滤原数组,并将过滤后的项作为新数组返回正。如它的名字所示,我们将这个方法用于过滤,(一般而言)会获得一个长度更短的新数组。

  

然而,如果知道经回调函数过滤后,只会剩余唯一的一项,那么我不建议使用数组。过滤器。比如:使用等于某个唯一ID为过滤条件去过滤一个数组。在这个例子中,数组。过滤器返回一个仅有一项的新数组。然而,我们仅仅是为了获取ID为特定ID的那一项,这个新数组显得毫无用处。

  

让我们讨论一下性能。为了获取所有符合回调函数过滤条件的项,数组。过滤器必须遍历整个数组。如果原数组中有成千上万项,回调函数需要执行的次数是相当多的。
  为避免这些情况,我建议使用数组。找到。它与数组。过滤一样需要一个回调函数,(但只是返回)符合条件的第一项。当找到符合回调函数过滤条件的第一个元素时,它会立即停止往下的搜寻。不再遍历整个数组。

  

使用严格的;

        常量字符=[   {id: 1,名字:“铁人”},   {id: 2,名字:“black_widow”},   {id: 3,名字:“captain_america”},   {id: 4,名字:“captain_america”},   ];      函数getCharacter(名字){   返回字符=比;character.name===名称;   }      console.log (characters.filter (getCharacter (captain_america)));//(//{id: 3,名字:“captain_america”},//{id: 4,名字:“captain_america”},//)      console.log (characters.find (getCharacter (captain_america)));//{id: 3,名字:‘captain_america}      

  

我承认我经常犯这个错误。之后,一位朋友建议我去查看MDN文档以寻找更好的方法。事实上(这错误)与上面Array.indexOf/数组。包括的例子十分相像。
  在上面的例子中,我们知道数组。找到需要一个回调函数作为参数,并返回(符合条件的)第一个元素。然而,当我们需要知道数组中是否存在一个元素时,数组。发现是最好的选择吗?不一定是,因为它返回一个元素,而不是一个布尔值。
  在下面的例子中,我建议使用Array.some,它返回你需要的布尔值。

  

使用严格的;

        常量字符=[   {id: 1,名字:“铁人”,env:“奇迹”},   {id: 2,名字:black_widow, env:“奇迹”},   {id: 3,名字:wonder_woman, env:“dc_comics”},   ];      函数hasCharacterFrom (env) {   返回字符=比;的性格。env===env;   }      console.log (characters.find (hasCharacterFrom('奇迹')));//{id: 1,名字:“铁人”,env:“奇迹”}      console.log (characters.some (hasCharacterFrom('奇迹')));//真正的      

译者注:补充一下数组。一些与数组。包括使用上的区别。两者都返回一个布尔值,表示某项是否存在于数组之中,一旦找到对应的项,立即停止遍历数组。不同的是数组。一些的参数是回调函数,而数组。包括的参数是一个值(均不考虑第二个可选参数)。

  

假设希望知道值为值的项是否存在于数组中,既可以编写代码:[]其中(值),也可以给数组。一些传入项=,gt;项===值作为回调函数.Array.includes 使用更简单,数组。一些可操控性更强。

如何在JavaScript中更好地利用数组