前端常常要通过 javaScript 来解决数组中的数据,其中就包含查看数组中是否蕴含满足特定搜寻条件的单个或者多个值,这就须要咱们对于用于确认的布尔值、数组中值得地位索引或蕴含所有搜寻后果的独自数组等。
在 ECMAScript6 之前,最罕用的办法就是通过 for 循环来遍历数组中的所有我的项目并对我的项目执行操作。当初咱们能够通过内置的应用办法来实现在数组中搜寻值的常见工作。
本文将介绍 Array.includes()、Array.indexOf()、Array.fiind() 和 Array.filter 这些办法。
应用 includes()
依据数组中是否存在值,includes() 办法将返回 true 或 false
根本语法:
第一个参数 valueToFind 是数组中要匹配的值,第二个参数 fromIndex 是可选的,用于设置开始比拟的索引,因为默认值为 0,意味着默认搜寻整个数组。
请看 alligator facts 的示例数组:
而后应用 includes() 查看数组中是否存在字符串”thick scales”
代码返回 true,因为字符串存在于数组中。
如果你增加 fromIndex 参数以便于在”thick scales”之后进行比拟,则将返回 false
此外,还有一些须要留神的重要事项,这里的.includes() 办法应用严格比拟,例如:
上述代码返回 true,因为数值 80 在数组中。
上述代码将返回 false,因为字符串值 ’80’ 不在数组中。
includes() 对于只须要晓得值是否存在于数组肿的用例很有帮忙
应用 indexOf()
indexOf() 办法返回数组中值的第一个索引,如果没有匹配项,则返回 -1。
根本语法如下:
回顾 alligator facts 的示例数组:
应用 indexOf() 返回字符串 “rounded snout” 的第一个索引:
返回字符串 “rounded snout” 的索引 —3
上述代码返回 -1,因为该字符串不在数组中。
以上代码返回 1
返回 4,因为在索引 2 之后找到该元素,为数组中第四个元素
留神:如果你查找的不是第一个后果,那么或者能够应用 lastIndexOf(),lastIndexOf() 办法与 indexOf() 相似,但将从数组的最初一个索引开始查找第一个匹配项并往回工作。
indexOf 对于须要搜寻后果的耽误索引的使劲很有帮忙。
应用 find()
find() 办法返回数组中与函数条件匹配的第一个值,如果没有匹配项,则返回 undefined
根本语法如下:
回顾 alligator facts 的示例数组:
而后应用 find() 返回长度小于 13 个字符的第一个值:
此示例仅应用 callback 参数。
80 是一个数值。”rounded snout” 的长度为 13 个字符,”thick scales” 有 12 个字符,而 “4 foot tail” 有 11 个字符 —— 这两者都满足函数条件,然而,find() 只会返回第一个值,即返回 “thick scales”。
以下为应用可选的 index 参数的示例:
“thick scales”、”4 foot tail” 和 “rounded snout” 都满足第一个条件(typeof el === ‘string’)。如果这是惟一的条件,则返回第一个,即 “thick scales”。但因为有第二个条件(idx === 2),所以最初代码返回 “4 foot tail”。
留神:如果你查找的是索引而不是值,那么可能会偏向于应用 findIndex()。findIndex() 办法也接管函数,但它返回匹配元素的索引而不是元素自身。
find() 对于须要单个搜寻后果值的用例很有帮忙。
应用 filter()
filter() 办法返回新数组,新数组蕴含所有与函数条件匹配的值。如果没有匹配项,则返回空数组。
根本语法如下:
还是 alligator facts 的示例数组:
而后应用 filter() 返回所有等于 80 的值:
数组中的两个值 80 都满足条件。因而返回新数组:[80, 80]。
filter() 对于须要多个搜寻后果值的用例很有帮忙。
总结
数组中的两个
本文重点介绍了 Array.includes()、Array.indexOf()、Array.find() 和 Array.filter。每个都能够为用例需要提供解决方案。
只须要晓得值是否存在?这时能够应用 includes()。
须要获取元素自身?能够对单个我的项目应用 find () 或对多个我的项目应用 filter()。
须要查找元素的索引?应该应用 indexOf() 搜寻原语或应用 findIndex() 搜寻函数。
感激大家的浏览!有不懂的问题能够留言
源码附件曾经打包好上传到百度云了,大家自行下载即可~
链接: https://pan.baidu.com/s/14G-b…
提取码: yu27
百度云链接不稳固,随时可能会生效,大家放松保留哈。
如果百度云链接生效了的话,请留言通知我,我看到后会及时更新~
开源地址
码云地址:
http://github.crmeb.net/u/defu
Github 地址:
http://github.crmeb.net/u/defu
开源不易,Star 以表尊重,感兴趣的敌人欢送 Star,提交 PR,一起保护开源我的项目,造福更多人!