当前位置: 首页 > Web前端 > HTML5

[翻译]如何更好地使用javascript数组

时间:2023-04-05 20:27:15 HTML5

快速阅读这篇文章,我保证,在过去的几个月里,我确定我在数组方面犯了4个错误。所以我写了这篇文章,阅读这篇文章可以让你更准确地使用javascript数组的一些方法使用Array.includes而不是Array.indexOf“如果你在数组中搜索一个元素,那么请使用Array.indexOf”,我记得在学习javascript的时候看到过这句话,毫无疑问,这句话说的很对。MDN文档将array.indexOf描述为“返回第一个搜索到的元素的下标(索引)”,所以如果你想搜索一个元素的下标,那么Array.indexOf可以是一个很好的解决方案。但是如果我们想查看一个元素是否包含在数组中怎么办。诸如是/否之类的问题,又名布尔值。这里推荐使用返回布尔值的Array.includes方法。constpersons=["jay","leinov","jj","nico"];console.log(persons.indexOf("leinov"));//1console.log(persons.indexOf("beyond"));//-1console.log(persons.includes("leinov"));//trueconsole.log(persons.includes("beyond"));//false使用Array.find而不是Array.filterArray.filter一个非常有用的方法,它通过一个回调参数数组创建一个新的数组,顾名思义,我们用它来过滤掉一个较短的数组但是如果我们知道回调函数只返回数组项之一,所以我不'推荐使用它。例如,当用于过滤的回调参数是一个唯一的id时,在这种情况下,Array.filter返回一个包含此项的新数组。找一个特殊的id,我们只想把一个item取出来,返回的数组是没用的。接下来我们看性能。为了返回与回调函数匹配的每个项目,Array.filter必须检索整个数组。另外,让我们想象一下,我们有数百个项目满足我们的回调参数函数。我们过滤的数组非常大。为了避免这种情况,我推荐Array.find,它和Array.filter一样,带一个回调函数参数,返回第一个能满足回调函数参数的item。并且Array.find在满足过滤器后停止过滤,并且不检索整个数组。使用严格';constsingers=[{id:1,name:'周杰伦'},{id:2,name:'李健'},{id:3,name:'庾澄庆'},{id:4,name:'谢霆锋'},{id:5,name:'周杰伦'},];functiongetSinger(name){returnsigner=>signer.name===name;}console.log(singers.filter(getSinger('周杰伦')));//[//{id:1,name:'周杰伦'},//{id:5,name:'周杰伦'},//]console.log(characters.find(getSinger('周杰伦')));//{id:1,name:'周杰伦'}用Array.some代替Array.find我承认我经常在这上面出错,然后,一个好的朋友提醒我看看MDN文档找到更好的办法解决这个问题,和上面的Array.indexOf/Array.includes很相似。前面说过,Array.find需要一个回调函数作为参数,返回一个满意的元素。如果我们需要知道数组是否包含某个值,Array.find是最好的方法吗?可能不是,因为返回的是一个值,而不是布尔值。在这种情况下,我推荐使用Array.some,它返回一个布尔值'usestrict';常量字符=[{id:1,name:'ironman',env:'marvel'},{id:2,name:'black_widow',env:'marvel'},{id:3,name:'wonder_woman',env:'dc_comics'},];functionhasCharacterFrom(env){returncharacter=>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.reduce不是很容易理解,但是如果我们执行Array.filter,Array.map感觉就像我们丢失了一些东西。我的意思是,我们两次检索数组,第一次过滤并创建一个短数组,第二次创建一个包含过滤内容的新数组。为了获得结果,我们使用了两个数组方法,每个方法都有一个回调函数和一个数组,其中一个方法是由Array.filter创建的,我们稍后不会使用它。为避免此性能问题,我建议改用Array.reduce。同样的结果,更好的代码。Aaray.reduce允许您过滤并将满意的项目添加到累加器。例如,这个累加器可以是一个要递增的数字、一个要填充的对象、一个字符串或一个数组。在我们之前的例子中,我们一直在使用Array.map,所以我建议使用Array.reduce来连接使用累加器的数组。在下面的示例中,根据env的值,我们将把它添加到累加器中,或者让这个累加器保持原样。'usestrict';constcharacters=[{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:['复仇者联盟']})));//[//{name:'ironman',env:'marvel',alsoSeenIn:['Avengers']},//{name:'black_widow',env:'marvel',alsoSeenIn:['复仇者联盟']}//]console.log(characters.reduce((acc,character)=>{returncharacter.env==='marvel'?acc.concat(Object.assign({},character,{alsoSeenIn:['复仇者联盟']})):acc;},[]))//[//{name:'ironman',env:'marvel',alsoSeenIn:['Avengers']},//{name:'black_widow',env:'marvel',alsoSeenIn:['Avengers']}//]译文:这里是你可以更好地使用JavaScript数组的方法如哪里有翻译错误请指正3Q