前言

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

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

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

使用 includes()

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

基本語法：

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

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

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

代碼返回 true，因?yàn)樽址嬖谟跀?shù)組中。

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

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

上述代碼返回 true，因?yàn)閿?shù)值 80 在數(shù)組中。

上述代碼將返回 false，因?yàn)樽址?rsquo;80’ 不在數(shù)組中。

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

使用 indexOf()

indexOf() 方法返回?cái)?shù)組中值的第一個(gè)索引，如果沒有匹配項(xiàng)，則返回 -1。

基本語法如下：

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

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

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

上述代碼返回 -1，因?yàn)樵撟址辉跀?shù)組中。

以上代碼返回 1

返回 4，因?yàn)樵谒饕?2 之后找到該元素，為數(shù)組中第四個(gè)元素

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

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

使用 find()

find() 方法返回?cái)?shù)組中與函數(shù)條件匹配的第一個(gè)值，如果沒有匹配項(xiàng)，則返回 undefined

基本語法如下：

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

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

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

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

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

“thick scales”、“4 foot tail” 和 “rounded snout” 都滿足第一個(gè)條件（typeof el === ‘string’）。如果這是唯一的條件，則返回第一個(gè)，即 “thick scales”。但因?yàn)橛械诙€(gè)條件（idx === 2），所以最后代碼返回 “4 foot tail”。

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

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

使用 filter()

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

基本語法如下：

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

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

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

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

總結(jié)

數(shù)組中的兩個(gè)

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

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

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

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

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

最新評(píng)論