本篇文章给大家带来的内容是关于新手如何在javascript 中更好地使用数组？（源代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
使用 Array.find 替代 Array.filter
Array.filter 是一个十分有用的方法。它通过回调函数过滤原数组，并将过滤后的项作为新数组返回。正如它的名字所示，我们将这个方法用于过滤，（一般而言）会获得一个长度更短的新数组。
然而，如果知道经回调函数过滤后，只会剩余唯一的一项，那么我不建议使用 Array.filter。比如：使用等于某个唯一 ID 为过滤条件去过滤一个数组。在这个例子中，Array.filter 返回一个仅有一项的新数组。然而，我们仅仅是为了获取 ID 为特定 ID 的那一项，这个新数组显得毫无用处。
让我们讨论一下性能。为了获取所有符合回调函数过滤条件的项，Array.filter 必须遍历整个数组。如果原数组中有成千上万项，回调函数需要执行的次数是相当多的。
立即学习“Java免费学习笔记（深入）”；
为避免这些情况，我建议使用 Array.find。它与 Array.filter 一样需要一个回调函数，（但只是返回）符合条件的第一项。当找到符合回调函数过滤条件的第一个元素时，它会立即停止往下的搜寻。不再遍历整个数组。
'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，它返回你需要的布尔值。
'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.some 与 Array.includes 使用上的区别。两者都返回一个布尔值，表示某项是否存在于数组之中，一旦找到对应的项，立即停止遍历数组。不同的是 Array.some 的参数是回调函数，而 Array.includes 的参数是一个值（均不考虑第二个可选参数）。
假设希望知道值为 value 的项是否存在于数组中，既可以编写代码：[].includes(value)， 也可以给 Array.some 传入 item => item === value 作为回调函数。Array.includes 使用更简单，Array.some 可操控性更强。
使用 Array.reduce 替代 Array.filter 与 Array.map 的组合
事实上说，Array.reduce 不太容易理解。然而，如果我们先使用 Array.filter 过滤原数组，之后（对结果）再调用 Array.map （以获取一个新数组）。这看起似乎有点问题，是我们忽略了什么吗？
这样做的问题是：我们遍历了两次数组。第一次是过滤原数组以获取一个长度稍短的新数组，第二次遍历（译者注：指 Array.map）是对 Array.filter 的返回的新数组进行加工，再次创造了一个新数组！为得到最终的结果，我们结合使用了两个数组方法。每个方法都有它自己的回调函数，而且供 Array.map 使用的临时数组是由 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'] }// ]
登录后复制
以上就是对新手如何在JavaScript 中更好地使用数组？（源代码）的全部介绍，如果您想了解更多有关JavaScript视频教程，请关注PHP中文网。
以上就是新手如何在JavaScript 中更好地使用数组？（源代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2739645.html
