欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法詳解

 更新時(shí)間：2022年08月31日 16:40:19   作者：JackieDYH  
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法,每種方式通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
  1. 獲取滿(mǎn)足特定條件的數(shù)組中的所有項(xiàng)目
  2. 要檢查是否滿(mǎn)足條件？
  3. 檢查數(shù)組中是否有特定值？
  4. 在數(shù)組中找到指定值的索引？

filter   find  includes   indexOf

Array.filter()

在數(shù)組中查找滿(mǎn)足特定條件的元素

let newArray = array.filter(callback);

  • newArray是返回的新數(shù)組
  • array 是我們要進(jìn)行查找的數(shù)組本身
  • callback 是應(yīng)用于數(shù)組每個(gè)元素的回調(diào)函數(shù)

如果數(shù)組中沒(méi)有項(xiàng)目符合條件，則返回一個(gè)空數(shù)組。

例如，如果我們要獲取大于10的數(shù)字?jǐn)?shù)組中的所有項(xiàng)目，則可以執(zhí)行以下操作：
const array = [10, 11, 3, 20, 5];
const greaterThanTen = array.filter(element => element > 10);
console.log(greaterThanTen) //[11, 20]

Array.find()

查找滿(mǎn)足特定條件的第一個(gè)元素

let element = array.find(callback);

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

但是請(qǐng)注意，如果數(shù)組中沒(méi)有項(xiàng)目符合條件，則返回 undefined。

const array = [10, 11, 3, 20, 5];
const greaterThanTen = array.find(element => element > 10);
console.log(greaterThanTen)//11

Array.includes（）

確定數(shù)組是否包含某個(gè)值，并在適當(dāng)時(shí)返回 true 或 false

const includesValue = array.includes(valueToFind, fromIndex)

  • valueToFind 是要在數(shù)組中檢查的值（必填）
  • fromIndex 是要開(kāi)始從中搜索元素的數(shù)組中的索引或位置（可選）
檢查20是否為數(shù)組中的元素之一，則可以執(zhí)行以下操作：
const array = [10, 11, 3, 20, 5];
const includesTwenty = array.includes(20);
console.log(includesTwenty)//true
如果要檢查數(shù)組是否在第一個(gè)元素之外的其他位置包含10個(gè)，可以執(zhí)行如下操作：
const array = [10, 11, 3, 20, 5];
const includesTenTwice = array.includes(10, 1);
console.log(includesTenTwice)//false

Array.indexOf（）

返回可以在數(shù)組中找到給定元素的第一個(gè)索引。如果數(shù)組中不存在該元素，則返回 -1

const indexOfElement = array.indexOf(element, fromIndex)

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

請(qǐng)務(wù)必注意，includes 和 indexOf 方法都使用嚴(yán)格的相等性（'==='）搜索數(shù)組。如果值的類(lèi)型不同（例如4和'4'），它們將分別返回 false 和 -1

讓我們找到數(shù)組中 3 的索引。
const array = [10, 11, 3, 20, 5];
const indexOfThree = array.indexOf(3);
console.log(indexOfThree)//2

結(jié)語(yǔ)

無(wú)需使用 for 循環(huán)即可搜索數(shù)組

  • 如果你想找到在符合特定條件的陣列中的所有項(xiàng)目，使用 filter。
  • 如果你想檢查是否至少有一個(gè)項(xiàng)目符合特定的條件，請(qǐng)使用 find。
  • 如果你想檢查一個(gè)數(shù)組包含一個(gè)特定的值，請(qǐng)使用 includes。
  • 如果要在數(shù)組中查找特定項(xiàng)目的索引，請(qǐng)使用indexOf 

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

相關(guān)文章

  • 基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解)

    基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解)

    下面小編就為大家分享一篇基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12
  • openlayers4實(shí)現(xiàn)點(diǎn)動(dòng)態(tài)擴(kuò)散

    openlayers4實(shí)現(xiàn)點(diǎn)動(dòng)態(tài)擴(kuò)散

    這篇文章主要為大家詳細(xì)介紹了openlayers4實(shí)現(xiàn)的點(diǎn)動(dòng)態(tài)擴(kuò)散，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-08-08
  • JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨滾動(dòng)條滾動(dòng)的層效果代碼

    JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨滾動(dòng)條滾動(dòng)的層效果代碼

    這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨滾動(dòng)條滾動(dòng)的層效果代碼,涉及JavaScript頁(yè)面元素屬性的獲取、運(yùn)算及設(shè)置等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-11-11
  • 淺談javascript中call()、apply()、bind()的用法

    淺談javascript中call()、apply()、bind()的用法

    一直對(duì)Javascript中的apply/call/bind的用法很模糊，恰好看到了這篇文章。對(duì)三者之間的區(qū)別與聯(lián)系算是有了比較清晰的認(rèn)識(shí)。這里記錄下來(lái)，分享給大家。
    2015-04-04
  • JavaScript調(diào)試之console.log調(diào)試的一個(gè)小技巧分享

    JavaScript調(diào)試之console.log調(diào)試的一個(gè)小技巧分享

    日常開(kāi)發(fā)中經(jīng)常會(huì)需要console來(lái)查看當(dāng)前對(duì)象的值。當(dāng)然用debugger會(huì)更全面的查看，但是總有只喜歡用console的，比如我。下面這篇文章主要給大家分享了關(guān)于JavaScript調(diào)試之console.log調(diào)試的一個(gè)小技巧，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
    2017-08-08
  • js中常見(jiàn)的6種繼承方式總結(jié)

    js中常見(jiàn)的6種繼承方式總結(jié)

    js中的繼承與其說(shuō)是對(duì)象的繼承,但更像是讓函數(shù)的功能和用法的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于js中常見(jiàn)的6種繼承方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-01-01
  • JS使用canvas繪制旋轉(zhuǎn)風(fēng)車(chē)動(dòng)畫(huà)

    JS使用canvas繪制旋轉(zhuǎn)風(fēng)車(chē)動(dòng)畫(huà)

    這篇文章主要為大家詳細(xì)介紹了JS使用canvas繪制旋轉(zhuǎn)風(fēng)車(chē)動(dòng)畫(huà)，有加速減速啟動(dòng)停止功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的簡(jiǎn)單講解

    ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的簡(jiǎn)單講解

    大家心里是否產(chǎn)生過(guò)這樣的疑問(wèn),JS中既然已經(jīng)有對(duì)象這種數(shù)據(jù)結(jié)構(gòu),我們?yōu)槭裁催€要再單獨(dú)去使用Set或者M(jìn)ap呢?下面這篇文章主要給大家介紹了關(guān)于ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • 淺談JS之tagNaem和nodeName

    淺談JS之tagNaem和nodeName

    下面小編就為大家?guī)?lái)一篇淺談JS之tagNaem和nodeName。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-09-09
  • 使用weixin-java-tools完成微信授權(quán)登錄、微信支付的示例

    使用weixin-java-tools完成微信授權(quán)登錄、微信支付的示例

    這篇文章主要介紹了使用weixin-java-tools完成微信授權(quán)登錄、微信支付的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09

最新評(píng)論