JavaScript 中搜索數(shù)組元素的四種方法【轉(zhuǎn)】

原文地址:https://zhuanlan.zhihu.com/p/161893483

在實際開發(fā)當(dāng)中邓深,我們經(jīng)常會遇到類似諸如下面的需求:

  1. 獲取滿足特定條件的數(shù)組中的所有項目
  2. 要檢查是否滿足條件亩冬?
  3. 檢查數(shù)組中是否有特定值巢钓?
  4. 在數(shù)組中找到指定值的索引?

在本文中劣像,我們將討論四種可用于搜索數(shù)組中項目的方法含懊。這些方法是:

  1. filter

  2. find

  3. includes

  4. indexOf

接下來豹悬,我們就一起來看一下這四種方式

Array.filter()

我們可以使用 Array.filter() 方法在數(shù)組中查找滿足特定條件的元素桐筏。

例如,如果我們要獲取大于10的數(shù)字?jǐn)?shù)組中的所有項目骄恶,則可以執(zhí)行以下操作:

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.filter(element => element > 10);

console.log(greaterThanTen) //[11, 20]

使用 array.filter() 方法的語法如下:

let newArray = array.filter(callback);

著這里:

  • newArray是返回的新數(shù)組

  • array 是我們要進(jìn)行查找的數(shù)組本身

  • callback 是應(yīng)用于數(shù)組每個元素的回調(diào)函數(shù)

如果數(shù)組中沒有項目符合條件食铐,則返回一個空數(shù)組。

有時僧鲁,我們不需要滿足特定條件的所有元素虐呻。我們只需要一個符合條件的元素象泵。在這種情況下,需要使用find()方法斟叼。

Array.find()

使用 Array.find()方法查找滿足特定條件的第一個元素偶惠。就像 filter 方法一樣,它以回調(diào)為參數(shù)朗涩,并返回滿足回調(diào)條件的第一個元素忽孽。

我們嘗試一下在上面的示例中對數(shù)組使用 find 方法。

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.find(element => element > 10);

console.log(greaterThanTen)//11

array.find() 的語法為

let element = array.find(callback);

callback 是在數(shù)組中的每個值上執(zhí)行的函數(shù)谢床,帶有三個參數(shù):

  • element -當(dāng)前被遍歷的元素(必填)
  • index -當(dāng)前遍歷的元素的索引/位置(可選)
  • array- 當(dāng)前數(shù)組(可選)

但是請注意兄一,如果數(shù)組中沒有項目符合條件,則返回 undefined识腿。

但是出革,如果想檢查某個元素是否在數(shù)組中怎么辦?

Array.includes()

includes() 方法確定數(shù)組是否包含某個值渡讼,并在適當(dāng)時返回 truefalse骂束。

因此,在上面的示例中硝全,如果我們要檢查20是否為數(shù)組中的元素之一栖雾,則可以執(zhí)行以下操作:

const array = [10, 11, 3, 20, 5];

const includesTwenty = array.includes(20);

console.log(includesTwenty)//true

你會注意到此方法與其他方法之間的區(qū)別楞抡。此方法接受值而不是回調(diào)作為參數(shù)伟众。這是 include 方法的語法:

const includesValue = array.includes(valueToFind, fromIndex)

  • valueToFind 是要在數(shù)組中檢查的值(必填)
  • fromIndex 是要開始從中搜索元素的數(shù)組中的索引或位置(可選)

要了解索引的概念,讓我們再次使用上面的示例召廷。

如果要檢查數(shù)組是否在第一個元素之外的其他位置包含10個凳厢,可以執(zhí)行如下操作:

const array = [10, 11, 3, 20, 5];

const includesTenTwice = array.includes(10, 1);

console.log(includesTenTwice)//false

Array.indexOf()

indexOf() 方法返回可以在數(shù)組中找到給定元素的第一個索引。如果數(shù)組中不存在該元素竞慢,則返回 -1先紫。

回到例子。讓我們找到數(shù)組中 3 的索引筹煮。

const array = [10, 11, 3, 20, 5];

const indexOfThree = array.indexOf(3);

console.log(indexOfThree)//2

其語法類似于該 includes 方法的語法遮精。

const indexOfElement = array.indexOf(element, fromIndex)

  • element 是要在數(shù)組中檢查的元素(必填),并且
  • fromIndex 是要從數(shù)組中搜索元素的啟始索引或位置(可選)

請務(wù)必注意败潦,includesindexOf 方法都使用嚴(yán)格的相等性('===')搜索數(shù)組本冲。如果值的類型不同(例如4'4'),它們將分別返回 false-1劫扒。

總結(jié)

使用這些數(shù)組方法檬洞,無需使用 for 循環(huán)即可搜索數(shù)組。根據(jù)您的需求沟饥,您可以決定哪種方法最適合您的用例添怔。

以下是何時使用每種方法的摘要:

  • 如果你想找到在符合特定條件的陣列中的所有項目湾戳,使用 filter
  • 如果你想檢查是否至少有一個項目符合特定的條件广料,請使用 find砾脑。
  • 如果你想檢查一個數(shù)組包含一個特定的值,請使用 includes性昭。
  • 如果要在數(shù)組中查找特定項目的索引拦止,請使用indexOf
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末糜颠,一起剝皮案震驚了整個濱河市汹族,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌其兴,老刑警劉巖顶瞒,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異元旬,居然都是意外死亡榴徐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進(jìn)店門匀归,熙熙樓的掌柜王于貴愁眉苦臉地迎上來坑资,“玉大人,你說我怎么就攤上這事穆端「ぶ” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵体啰,是天一觀的道長攒巍。 經(jīng)常有香客問我,道長荒勇,這世上最難降的妖魔是什么柒莉? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮沽翔,結(jié)果婚禮上兢孝,老公的妹妹穿的比我還像新娘。我一直安慰自己仅偎,他們只是感情好跨蟹,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哨颂,像睡著了一般喷市。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上威恼,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天品姓,我揣著相機(jī)與錄音寝并,去河邊找鬼。 笑死腹备,一個胖子當(dāng)著我的面吹牛衬潦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播植酥,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼镀岛,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了友驮?” 一聲冷哼從身側(cè)響起漂羊,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎卸留,沒想到半個月后走越,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡耻瑟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年旨指,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片喳整。...
    茶點(diǎn)故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡谆构,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出框都,到底是詐尸還是另有隱情搬素,我是刑警寧澤,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布瞬项,位于F島的核電站蔗蹋,受9級特大地震影響何荚,放射性物質(zhì)發(fā)生泄漏囱淋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一餐塘、第九天 我趴在偏房一處隱蔽的房頂上張望妥衣。 院中可真熱鬧,春花似錦戒傻、人聲如沸税手。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽芦倒。三九已至,卻和暖如春不翩,著一層夾襖步出監(jiān)牢的瞬間兵扬,已是汗流浹背麻裳。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留器钟,地道東北人津坑。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像傲霸,于是被迫代替她去往敵國和親疆瑰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容