你好， 我是程序猿零壹。

在冠縣等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需規(guī)劃網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)整合營(yíng)銷推廣,外貿(mào)營(yíng)銷網(wǎng)站建設(shè),冠縣網(wǎng)站建設(shè)費(fèi)用合理。

在前端開(kāi)發(fā)中， 經(jīng)常會(huì)遇到需要判斷某個(gè)元素是否存在于數(shù)組中的場(chǎng)景。其實(shí)判斷方法有很多種，今天就跟大家來(lái)一起一個(gè)一個(gè)的了解下。

先來(lái)定義一個(gè)數(shù)組：

const arr = [
13,
false,
'abcd',
undefined,
13,
null,
NaN,
 [1, 2],
 { a: 123 },
() =>Date.now(),
new Date('2021/03/04'),
new RegExp('abc', 'ig'),
 Symbol('sym'),
];

在這個(gè)數(shù)組中，我們包含了好幾種類型：number, boolean, string, undefined, null, array, object, Date, Symbol 等。其中數(shù)字 13 出現(xiàn)了 2 次。

接下來(lái)我們來(lái)看下具體實(shí)現(xiàn)的方法。

1. indexOf

我們最熟悉的就是indexOf()了，畢竟他出現(xiàn)的早，兼容性也好，使用起來(lái)也很方便。

1.1，indexOf

語(yǔ)法：

array.indexOf(item,start)

參數(shù)說(shuō)明：

item：必需。要查找的元素。

start：可選的整數(shù)參數(shù)。規(guī)定在數(shù)組中開(kāi)始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù)，則將從字符串的首字符開(kāi)始檢索。

使用方式：

只要判斷返回的數(shù)據(jù)是不是-1，就能知道數(shù)組中是否包含該元素。

arr.indexOf(13) >= 0; // true, indexOf返回0
arr.indexOf(false) >= 0; // true, indexOf返回1
arr.indexOf(undefined) >= 0; // true, indexOf返回3
arr.indexOf(2) >= 0; // false, indexOf返回-1

1.2，lastIndexOf

語(yǔ)法：

array.lastIndexOf(item,start)

參數(shù)說(shuō)明：

item：必需。要查找的元素。

start：可選的整數(shù)參數(shù)。規(guī)定在數(shù)組中開(kāi)始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù)，則將從字符串的首字符開(kāi)始檢索。

使用方式同indexOf。

1.3，第2個(gè)可選參數(shù)

indexOf 和 lastIndexOf 還有第 2 個(gè)可選參數(shù) start，用來(lái)表示從哪個(gè)索引開(kāi)始進(jìn)行搜索。

在 indexOf 中，若 start超過(guò)數(shù)組的長(zhǎng)度，則直接返回-1，若為負(fù)數(shù)，則從最后往前數(shù)幾個(gè)索引（arr.length-Math.abs(start)），然后開(kāi)始往后搜索。

在 lastIndexOf 中，若 start達(dá)到或超過(guò)數(shù)組的長(zhǎng)度，則搜索整個(gè)數(shù)組；若為負(fù)數(shù)，則從最后往前數(shù)幾個(gè)索引（arr.length-Math.abs(start)），然后開(kāi)始往前搜索，若負(fù)數(shù)的絕對(duì)值超過(guò)了數(shù)組的長(zhǎng)度，則直接返回-1。

arr.indexOf(13, 2); // 4, 從索引值2開(kāi)始往后查找，首先找到的13的索引值為4
arr.indexOf(13, -10); // 4, 從索引值1(11-10)開(kāi)始往后檢索
arr.lastIndexOf(13, 2); // 0, 從索引值2往前開(kāi)始搜索
arr.lastIndexOf(13, -2); // 4, 從索引值9(11-2)開(kāi)始往前搜索

2. includes

includes()?方法用來(lái)判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，如果是返回 true，否則false。

語(yǔ)法：

array.includes(searchElement, fromIndex)

參數(shù)說(shuō)明：

searchElement：必須。需要查找的元素值。

fromIndex：可選。從該索引處開(kāi)始查找 searchElement。如果為負(fù)值，則按升序從 array.length + fromIndex 的索引開(kāi)始搜索。默認(rèn)為 0。

使用方式：

arr.includes(13); // true
arr.includes('abc'); // false
arr.includes(false); // true, 存在false元素

同時(shí)，includes()?方法中也存在第 2 個(gè)可選參數(shù) fromIndex，fromIndex 的用法與 indexOf() 中的一樣。若 fromIndex 超過(guò)數(shù)組的長(zhǎng)度，則直接返回-1，若為負(fù)數(shù)，則從最后往前數(shù)幾個(gè)索引（arr.length-Math.abs(fromIndex)），然后開(kāi)始往后搜索。

arr.includes(13, 1); // true, 從索引值1開(kāi)始往后檢索，可檢索到
arr.includes(13, 5); // false, 從索引值5開(kāi)始往后檢索，沒(méi)檢索到
arr.includes(13, -8); // false, 從最后元素往前數(shù)8個(gè)索引，沒(méi)檢索到
arr.includes(13, -9); // true, 從最后元素往前數(shù)9個(gè)索引，可檢索到

到目前為止，后面的幾種類型，例如 Array, Object, Date 和 Symbol，我們都沒(méi)判斷呢。我們現(xiàn)在來(lái)判斷下后面的幾個(gè)元素：

// 使用indexOf判斷
arr.indexOf(NaN); // -1
arr.indexOf([1, 2]); // -1
arr.indexOf({ a: 123 }); // -1
arr.indexOf(() =>Date.now()); // -1
arr.indexOf(new Date('2021/03/04')); // -1
arr.indexOf(new RegExp('abc', 'ig')); // -1
arr.indexOf(Symbol('sym')); // -1
?
// 使用includes判斷
arr.includes(NaN); // false
arr.includes([1, 2]); // false
arr.includes({ a: 123 }); // false
arr.includes(() =>Date.now()); // false
arr.includes(new Date('2021/03/04')); // false
arr.includes(new RegExp('abc', 'ig')); // false
arr.includes(Symbol('sym')); // false

結(jié)局很慘，這幾種元素在數(shù)組中都沒(méi)有檢索到?？墒菍?shí)際上在數(shù)組中都是真實(shí)存在的。

這是因?yàn)?indexOf?和?includes?都是采用嚴(yán)格相等的方式（===）來(lái)判定的。

NaN === NaN; // false, 兩個(gè)NaN永遠(yuǎn)也不會(huì)相等
[1, 2] === [1, 2]; // false, 每個(gè)聲明出來(lái)的數(shù)組都有單獨(dú)的存儲(chǔ)地址
{a: 123} === {a: 123}; // false, 同數(shù)組
new Date('2021/03/04')===new Date('2021/03/04'); // false, 看著日期是相同的，但是用new出來(lái)的對(duì)象進(jìn)行比較的，肯定是不相等的
Symbol('sym')===Symbol('sym'); // Symbol類型的出現(xiàn)就是為了避免沖突創(chuàng)造出來(lái)的類型，括號(hào)里的屬性僅是為了方便描述而已

針對(duì)這些無(wú)法被檢索的類型，我們就需要自己寫(xiě)函數(shù)來(lái)判斷特殊的類型了。

3.?some

some()?方法用于檢測(cè)數(shù)組中的元素是否滿足指定條件（函數(shù)提供）。some()?方法會(huì)依次執(zhí)行數(shù)組的每個(gè)元素：如果有一個(gè)元素滿足條件，則表達(dá)式返回true , 剩余的元素不會(huì)再執(zhí)行檢測(cè)；如果沒(méi)有滿足條件的元素，則返回false。注意：some()?不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)，也不會(huì)改變?cè)瓉?lái)數(shù)組。

語(yǔ)法：

array.some(function(currentValue,index,arr),thisValue)

參數(shù)說(shuō)明：

function(currentValue, index,arr)：必須。函數(shù)，數(shù)組中的每個(gè)元素都會(huì)執(zhí)行這個(gè)函數(shù)。

函數(shù)參數(shù)：

currentValue：必須。當(dāng)前元素的值。

index：可選。當(dāng)前元素的索引值。

arr：可選。當(dāng)前元素屬于的數(shù)組對(duì)象。

thisValue：可選。對(duì)象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。

使用方式：

arr.some((item) =>item === false); // true
arr.some((item) =>item === undefined); // true
arr.some((item) =>typeof item === 'number' && isNaN(item)); // true
arr.some((item) =>item === 3); // false, 不存在數(shù)字3
arr.some((item) =>{
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // true

4.?filter

filter()?方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。filter()?不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)，也不會(huì)改變?cè)袛?shù)組。

語(yǔ)法：

array.filter(function(currentValue,index,arr),thisValue)

?參數(shù)說(shuō)明：

function(currentValue, index,arr)：必須。函數(shù)，數(shù)組中的每個(gè)元素都會(huì)執(zhí)行這個(gè)函數(shù)。

函數(shù)參數(shù)：

currentValue：必須。當(dāng)前元素的值。

index：可選。當(dāng)前元素的索引值。

arr：可選。當(dāng)前元素屬于的數(shù)組對(duì)象。

thisValue：可選。對(duì)象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。

使用方式：

arr.filter((item) =>item === false); // [false]
arr.filter((item) =>item === undefined); // [undefined]
arr.filter((item) =>typeof item === 'number' && isNaN(item)); // [NaN]
arr.filter((item) =>item === 13); // [13,13]
arr.filter((item) =>item === 3); // []
arr.filter((item) =>{
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // [Thu Mar 04 2021 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)]

因此我們可以通過(guò)該數(shù)組的長(zhǎng)度，來(lái)判斷原數(shù)組是否包含我們想要的元素。

5.?find

find()?方法返回通過(guò)測(cè)試（函數(shù)內(nèi)判斷）的數(shù)組的第一個(gè)元素的值。find()?方法為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行：當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 true 時(shí),?find()?返回符合條件的元素，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)；如果沒(méi)有符合條件的元素返回 undefined。find()?對(duì)于空數(shù)組，函數(shù)是不會(huì)執(zhí)行的，也不會(huì)改變?cè)袛?shù)組。

find()方法無(wú)法檢測(cè)數(shù)組中的 undefined 元素。因?yàn)椴淮嬖诤痛嬖?undefined 元素，find()方法都會(huì)返回 undefined。這里我們就要考慮其他方式了，稍后再講。

語(yǔ)法：

array.find(function(currentValue, index, arr),thisValue)

參數(shù)說(shuō)明：

function(currentValue, index,arr)：必須。函數(shù)，數(shù)組中的每個(gè)元素都會(huì)執(zhí)行這個(gè)函數(shù)。

函數(shù)參數(shù)：

currentValue：必須。當(dāng)前元素的值。

index：可選。當(dāng)前元素的索引值。

arr：可選。當(dāng)前元素屬于的數(shù)組對(duì)象。

thisValue：可選。對(duì)象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。

使用方式：

arr.find((item) =>item === 13); // 13, 找到了元素13
arr.find((item) =>item === 3); // undefined, 沒(méi)找到元素3
arr.find((item) =>item === undefined); // undefined, 也不知道是找到了還是沒(méi)找到

對(duì)于給定數(shù)組的稍微復(fù)雜點(diǎn)的數(shù)據(jù)類型，我們就需要做一些特殊的判斷了。

arr.find((item) =>typeof item === 'number' && isNaN(item)); // NaN
?
// array和object類型進(jìn)行比較時(shí)，情況很復(fù)雜，因?yàn)槊總€(gè)元素的類型都無(wú)法確定
// 如果確定都是基本類型，如string, number, boolean, undefined, null等，可以將其轉(zhuǎn)為字符串再比較
// 轉(zhuǎn)字符串的方式也很多，如JSON.stringify(arr), arr.toString(), arr.split('|')等
// 復(fù)雜點(diǎn)的，只能一項(xiàng)一項(xiàng)比較，或者使用遞歸
arr.find((item) =>item.toString() === [1, 2].toString()); // [1, 2]
arr.find((item) =>JSON.stringify(item) === JSON.stringify({ a: 123 })); // {a: 123}
arr.find((item) =>{
 if (typeof item === 'function') {
 return item.toString() === (() =>Date.now()).toString();
 }
 return false;
}); // () =>Date.now()
arr.find((item) =>{
 if (item instanceof Date) {
 return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // Thu Mar 04 2021 00:00:00 GMT+0800
arr.find((item) =>{
 if (item instanceof RegExp) {
 return item.toString() === new RegExp('abc', 'ig').toString();
 }
 return false;
}); // /abc/gi
?
// Symbol確實(shí)沒(méi)法比較，只能比較描述是否一樣
arr.find((item) =>{
 if (typeof item === 'symbol') {
 return item.toString() === Symbol('sym').toString();
 }
 return false;
}); // Symbol(sym)

如果還要判斷數(shù)組中是否存在 undefined，我們可以使用findIndex()方法。findIndex()?方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。若沒(méi)有找到對(duì)應(yīng)元素則返回-1。

arr.findIndex((item) =>item === undefined); // 3
arr.findIndex((item) =>item === 3); // -1, 沒(méi)有找到數(shù)字3

其他數(shù)據(jù)格式的判斷，與上面的?find()一樣。

6. 總結(jié)

判斷某個(gè)元素是否在數(shù)組中的方式有很多種，我們可以根據(jù)數(shù)組中元素的格式，來(lái)選擇更合適的方式。如果都是一些基本類型，建議優(yōu)先選擇使用includes()方法；如果格式比較復(fù)雜的，建議選擇使用some()方法。這兩個(gè)方法都是直接返回 boolean 類型，無(wú)需更多的轉(zhuǎn)換即可直接使用方法的結(jié)果。

7. 分享

最后，給大家分享一款學(xué)生成績(jī)管理系統(tǒng)，該系統(tǒng)使用php+mysql開(kāi)發(fā)，是一款用于管理課程信息、老師信息、學(xué)生信息及成績(jī)的系統(tǒng)，包含最基礎(chǔ)的增刪改查，可以作為大學(xué)的畢業(yè)設(shè)計(jì)，也可以作為初學(xué)者的參考項(xiàng)目。有需要的同學(xué)可以點(diǎn)此下載。

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購(gòu)，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

本文題目：JS判斷元素是否存在于數(shù)組中的多種方式-創(chuàng)新互聯(lián)
URL地址：http://www.rwnh.cn/article44/jdgee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、App開(kāi)發(fā)、靜態(tài)網(wǎng)站、電子商務(wù)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)