前言

前端經(jīng)常要通過 javaScript 來處理數(shù)組中的數(shù)據(jù)，其中就包括檢查數(shù)組中是否包含滿足特定搜索條件的單個或者多個值，這就需要我們關(guān)于用于確認(rèn)的布爾值、數(shù)組中值得位置索引或包含所有搜索結(jié)果的單獨數(shù)組等。

在 ECMAScript6 之前，最常用的方法就是通過 for 循環(huán)來遍歷數(shù)組中的所有項目并對項目執(zhí)行操作?，F(xiàn)在我們可以通過內(nèi)置的使用方法來完成在數(shù)組中搜索值的常見任務(wù)。

本文將介紹 Array.includes()、Array.indexOf()、Array.fiind() 和 Array.filter 這些方法。

使用 includes()

根據(jù)數(shù)組中是否存在值，includes() 方法將返回 true 或 false

基本語法：

第一個參數(shù) valueToFind 是數(shù)組中要匹配的值，第二個參數(shù) fromIndex 是可選的，用于設(shè)置開始比較的索引，因為默認(rèn)值為 0，意味著默認(rèn)搜索整個數(shù)組。

請看 alligator facts 的示例數(shù)組：

然后使用 includes() 檢查數(shù)組中是否存在字符串”thick scales”

代碼返回 true，因為字符串存在于數(shù)組中。

如果你添加 fromIndex 參數(shù)以便于在”thick scales” 之后進(jìn)行比較，則將返回 false

此外，還有一些需要注意的重要事項，這里的.includes() 方法使用嚴(yán)格比較，例如：

上述代碼返回 true，因為數(shù)值 80 在數(shù)組中。

上述代碼將返回 false，因為字符串值’80’ 不在數(shù)組中。

includes() 對于只需要知道值是否存在于數(shù)組腫的用例很有幫助

使用 indexOf()

indexOf() 方法返回數(shù)組中值的第一個索引，如果沒有匹配項，則返回 -1。

基本語法如下：

回顧 alligator facts 的示例數(shù)組：

使用 indexOf() 返回字符串 “rounded snout” 的第一個索引：

返回字符串 “rounded snout” 的索引 —3

上述代碼返回 -1，因為該字符串不在數(shù)組中。

以上代碼返回 1

返回 4，因為在索引 2 之后找到該元素，為數(shù)組中第四個元素

注意：如果你查找的不是第一個結(jié)果，那么或許可以使用 lastIndexOf(),lastIndexOf() 方法與 indexOf() 類似，但將從數(shù)組的最后一個索引開始查找第一個匹配項并往回工作。

indexOf 對于需要搜索結(jié)果的耽擱索引的用力很有幫助。

使用 find()

find() 方法返回數(shù)組中與函數(shù)條件匹配的第一個值，如果沒有匹配項，則返回 undefined

基本語法如下：

回顧 alligator facts 的示例數(shù)組：

然后使用 find() 返回長度小于 13 個字符的第一個值：

此示例僅使用 callback 參數(shù)。

80 是一個數(shù)值。“rounded snout” 的長度為 13 個字符，“thick scales” 有 12 個字符，而 “4 foot tail” 有 11 個字符 —— 這兩者都滿足函數(shù)條件，但是，find() 只會返回第一個值，即返回 “thick scales”。

以下為使用可選的 index 參數(shù)的示例：

“thick scales”、“4 foot tail” 和 “rounded snout” 都滿足第一個條件（typeof el === ‘string’）。如果這是唯一的條件，則返回第一個，即 “thick scales”。但因為有第二個條件（idx === 2），所以最后代碼返回 “4 foot tail”。

注意：如果你查找的是索引而不是值，那么可能會傾向于使用 findIndex()。findIndex() 方法也接收函數(shù)，但它返回匹配元素的索引而不是元素本身。

find() 對于需要單個搜索結(jié)果值的用例很有幫助。

使用 filter()

filter() 方法返回新數(shù)組，新數(shù)組包含所有與函數(shù)條件匹配的值。如果沒有匹配項，則返回空數(shù)組。

基本語法如下：

還是 alligator facts 的示例數(shù)組：

然后使用 filter() 返回所有等于 80 的值：

數(shù)組中的兩個值 80 都滿足條件。因此返回新數(shù)組：[80, 80]。

filter() 對于需要多個搜索結(jié)果值的用例很有幫助。

總結(jié)

數(shù)組中的兩個

本文重點介紹了 Array.includes()、Array.indexOf()、Array.find() 和 Array.filter。每個都可以為用例需求提供解決方案。

只需要知道值是否存在？這時可以使用 includes()。

需要獲取元素本身？可以對單個項目使用 find () 或?qū)Χ鄠€項目使用 filter()。

需要查找元素的索引？應(yīng)該使用 indexOf() 搜索原語或使用 findIndex() 搜索函數(shù)。

到此這篇關(guān)于javascript中搜索數(shù)組的四種方法的文章就介紹到這了,更多相關(guān)js搜索數(shù)組方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論