JavaScript判斷數(shù)組成員的幾種方法
前言:
在開發(fā)中經(jīng)常需要我們在數(shù)組中查找元素又或者是判斷元素是否存在,所以我列舉了幾種常用的方法供掘友參考學(xué)習(xí)。
indexOf()
首先想到的就是indexOf()方法,查找元素,并返回第一個找到的位置索引
[1,2,3,2].indexOf(2) ?// 1
他還支持第二個可選參數(shù),指定開始查找的位置
[1,2,3,2].indexOf(2,2) ?// 3
但是indexOf()有個問題,他的實現(xiàn)是由===作為判斷的,所以這容易造成一些問題,比如他對于NaN會造成誤判
[NaN].indexOf(NaN) // -1 console.log(NaN === NaN) // false
如上,由于誤判,沒有找到匹配元素,所以返回-1,而在ES6對數(shù)組的原型上新增了incudes()方法,他可以代替indexOf(),下面來看看這個方法。
incudes()
在ES6之前只有字符串的原型上含有include()方法來判斷是否包含字串,而數(shù)組在ES6中也新增了include()方法來判斷是否包含某個元素,下面來看看如何使用。
[1,2,3].incudes(2) // true
數(shù)組實例直接調(diào)用,參數(shù)為要查找的目標(biāo)元素,返回值為布爾值。而且他能很好地解決indexOf()的問題:
[NaN].includes(NaN) // true
如上incudes()可以正確地判斷NaN的查找問題,而incudes()是用來判斷是否包含,查找條件也比較單一,那么如果想要自定義查找條件,比如查找的范圍,可以使用這么一對方法:find()與findIndex()接下來看一看他們是如何使用的。
find()與findIndex()
find()與findIndex()可以匹配數(shù)組符合條件的元素
find()
find()支持三個參數(shù),分別為value,index,arr,分別為當(dāng)前值,當(dāng)前位置,與原數(shù)組,,返回值為符號條件的值
let arr = [1,2,10,6,19,20]
arr.find((value,index,arr) => {
? ?return value > 10
}) // 19如上,我以元素大于10為范圍條件,返回了第一個符合范圍條件的值:19。而find()可以返回符合條件的第一個元素,那么我們要是想拿到符合條件的第一個元素索引就可以使用findIndex()。
findIndex()
findIndex()和find相似也支持三個參數(shù),但是返回值不同,其返回的是符合條件的索引
let arr = [1,2,10,6,19]
arr.find((value,index,arr) => {
? ?return value > 10
}) // 4例子與find()相同,返回的是19對應(yīng)的索引
對于NaN值
find()與findIndex()對NaN值也不會誤判,可以使用Object.is()來作為范圍條件來判斷NaN值,如下
[NaN].find((value)=> {
? ?return Object.is(NaN,value)
}) // NaN如上例子,findIndex()也同理
最后
判斷元素在某數(shù)組中是否存在的四種方法就說到這里,到此這篇關(guān)于JavaScript判斷數(shù)組成員的幾種方法的文章就介紹到這了,更多相關(guān)JS判斷數(shù)組成員內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript設(shè)計模式之原型模式分析【ES5與ES6】
這篇文章主要介紹了JavaScript設(shè)計模式之原型模式,簡單描述了原型模式的概念、原理,并結(jié)合實例形式分析了ES5與ES6實現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
javascript之通用簡單的table選項卡實現(xiàn)(二)
上篇中的選項卡存在這樣的問題:把邏輯封裝在table.js中,不夠靈活,也就是說如果某個選項卡是實現(xiàn)異步請求或者跳轉(zhuǎn),而非div的顯隱切換,那么就得修過table.js來達到目的,顯然不是我所需要的。2010-05-05
JavaScript+Canvas實現(xiàn)文字粒子流特效
看到大師級的canvas文字粒子動畫,要10個jq幣才能下載啊,我內(nèi)心的小鹿蠢蠢欲動,我也要寫一個。所以本文就來用Canvas實現(xiàn)簡單的文字粒子流特效,希望對大家有所幫助2023-01-01

