国产片侵犯亲女视频播放_亚洲精品二区_在线免费国产视频_欧美精品一区二区三区在线_少妇久久久_在线观看av不卡

服務器之家：專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - 利用JS十分鐘判斷數組中存在元素的多種方式

利用JS十分鐘判斷數組中存在元素的多種方式

2022-02-12 18:23蚊子前端博客 js教程

這篇文章主要給大家介紹了關于利用JS十分鐘判斷數組中存在元素的多種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

在前端開發中，經常會遇到要判斷數組中是否存在某個元素。其實判斷的方式有很多種，我們一個一個來了解下。

我們先來定義一個數組：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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'),
];

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

有備而來

1. indexOf

我們最熟悉的就是indexOf了，畢竟他出現的早，兼容性也好，使用起來也很方便。

如果存在該元素，則返回第一次出現的索引值；若整個數組不存在該元素，則返回-1。

1.1 使用方式

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

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

與 indexOf 對應的是 lastIndexOf，從最后往前查找元素，若存在該元素，則返回在數組中的最后一個的索引；若不存在該元素，則返回-1。

?
1
arr.lastIndexOf(13) >= 0; // true, lastIndexOf返回4, 最后一次出現的索引

兩個方法在判斷變量是否存在時，調用方式是一樣的。

1.2 第 2 個可選參數

indexOf 和 lastIndexOf 還有第 2 個可選參數 fromIndex，用來表示從哪個索引開始進行搜索。

在 indexOf 中，若 fromIndex 超過數組的長度，則直接返回-1，若為負數，則從最后往前數幾個索引（arr.length-Math.abs(fromIndex)），然后開始往后搜索。

在 lastIndexOf 中，若 fromIndex 達到或超過數組的長度，則搜索整個數組；若為負數，則從最后往前數幾個索引（arr.length-Math.abs(fromIndex)），然后開始往前搜索，若負數的絕對值超過了數組的長度，則直接返回-1。

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

而且 indexOf 和 lastIndexOf 中采用的是嚴格相等的方式（===）來判斷的。

arr.indexOf(null); // 5, 在null的前面有幾個假值false和undefined，也能準確找到null的索引值
瑟瑟發抖

2. includes

indexOf 主要是為了查找元素所在的索引值，只是我們可以用返回的索引值來間接判斷數組中是否存在該元素。

而在 ES7(ES2016)中添加的includes方法，就是專門用來判斷元素是否存在的。返回值為 true 或者 false，true 表示存在，false 表示不存在，簡單明了。

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

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

?
1
arr.includes(13, 5); // false, 從索引值5開始往后檢索，沒檢索到

到目前為止，后面的幾種類型，例如 Array, Object, Date 和 Symbol，我們都沒判斷呢。我們現在來判斷下后面的幾個元素：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 使用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

結局很慘，這幾種元素在數組中都沒有檢索到。可是實際上在數組中都是真實存在的。

這是因為 indexOf 和 includes 都是采用嚴格相等的方式（===）來判定的。

?
1
2
3
4
5
NaN === NaN; // false, 兩個NaN永遠也不會相等
[1, 2] === [1, 2]; // false, 每個聲明出來的數組都有單獨的存儲地址
{a: 123} === {a: 123}; // false, 同數組
new Date('2021/03/04')===new Date('2021/03/04'); // false, 看著日期是相同的，但是用new出來的對象進行比較的，肯定是不相等的
Symbol('sym')===Symbol('sym'); // Symbol類型的出現就是為了避免沖突創造出來的類型，括號里的屬性僅是為了方便描述而已

針對這些無法被檢索的類型，我們就需要自己寫函數來判斷特殊的類型了。

3. find 和 findIndex

find()和 findIndex()允許我們通過回調函數，來自定義判斷的方式。

3.1 find 方法

find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。

find()方法無法檢測數組中的 undefined 元素。

因為不存在和存在 undefined 元素，find()方法都會返回 undefined。這里我們就要考慮其他方式了，稍后再講。

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

對于上面稍微復雜點的類型，我們就需要特殊的判斷了：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
arr.find((item) => typeof item === 'number' && isNaN(item)); // NaN
 
// array和object類型進行比較時，情況很復雜，因為每個元素的類型都無法確定
// 如果確定都是基本類型，如string, number, boolean, undefined, null等，可以將其轉為字符串再比較
// 轉字符串的方式也很多，如JSON.stringify(arr), arr.toString(), arr.split('|')等
// 復雜點的，只能一項一項比較，或者使用遞歸
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確實沒法比較，只能比較描述是否一樣
arr.find((item) => {
 if (typeof item === 'symbol') {
 return item.toString() === Symbol('sym').toString();
 }
 return false;
}); // Symbol(sym)

上面的判斷代碼在后面的方法也將會使用到。

3.2 兩個元素進行比較

我們在上面對比了多種類型元素的比較，稍微來總結下。

先來定義一個函數：

?
1
const compare = (x, y) => {};

3.2.1 基本類型

對于元素是 string, number, boolean, undefined, null 等基本類型的，可以直接進行比較：

?
1
2
3
const compare = (x, y) => {
 return x === y;
};

3.2.2 NaN 數據

NaN 用 typeof 來判斷是 number 類型，但 NaN 不與任何數字相等，包括它自己。

?
1
2
3
4
5
6
const compare = (x, y) => {
 if (typeof x === 'number' && isNaN(x) && typeof y === 'number' && isNaN(y)) {
  return true;
 }
 return x === y;
};

3.2.3 Function 與 Date 與 RegExp

這些類型的，可以將變量轉為字符串進行比較：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const compare = (x, y) => {
 if (typeof x === 'number' && isNaN(x) && typeof y === 'number' && isNaN(y)) {
  return true;
 }
 if (
  (typeof x === 'function' && typeof y === 'function') ||
  (x instanceof Date && y instanceof Date) ||
  (x instanceof RegExp && y instanceof RegExp) ||
  (x instanceof String && y instanceof String) ||
  (x instanceof Number && y instanceof Number)
 ) {
  return x.toString() === y.toString();
 }
 return x === y;
};

對于 object 類型和 array 的，我們可以將每一項拆開，然后利用上面的方式再挨個兒比較。

3.3 findIndex 方法

如果還要判斷數組中是否存在 undefined，我們可以使用findIndex()方法。

findIndex() 方法返回數組中滿足提供的測試函數的第一個元素的索引。若沒有找到對應元素則返回-1。

?
1
2
arr.findIndex((item) => item === undefined); // 3
arr.findIndex((item) => item === 3); // -1, 沒有找到數字3

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

稀客呀

4. some

some() 方法測試數組中是不是至少有 1 個元素通過了被提供的函數測試。它返回的是一個 Boolean 類型的值。

注意：如果用一個空數組進行測試，在任何情況下它返回的都是 false。

some()方法與 find()方法的使用方式一樣，只不過 some()方法返回的是 boolean 類型的數據。

?
1
2
3
4
5
6
7
8
9
10
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, 不存在數字3
arr.some((item) => {
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // true

5. filter

filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。

無論找到幾個元素或者沒有元素，filter()方法都是會返回一個數組，數組中的數據就是我們想要的元素。

?
1
2
3
4
5
6
7
8
9
10
11
arr.filter((item) => item === false); // 1
arr.filter((item) => item === undefined); // 1
arr.filter((item) => typeof item === 'number' && isNaN(item)); // 1
arr.filter((item) => item === 13); // 2
arr.filter((item) => item === 3); // 0
arr.filter((item) => {
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // 1

因此我們可以通過該數組的長度，來判斷原數組是否包含我們想要的元素。

略略

6. 總結

查找數組中元素的方式有很多，我們可以數組中元素的格式，來選擇更合適的方式。如果都是一些基本類型，建議優先選擇使用includes()方法；如果格式比較復雜的，建議選擇使用some()方法。這兩個方法都是直接返回 boolean 類型，無需更多的轉換即可直接使用方法的結果。

到此這篇關于利用JS十分鐘判斷數組中存在元素的多種方式的文章就介紹到這了,更多相關JS判斷數組存在元素內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！

原文鏈接：https://www.xiabingbao.com/post/array/check-item-in-array.html

延伸 · 閱讀

精彩推薦
  • js教程詳解js創建對象的幾種方式和對象方法

    詳解js創建對象的幾種方式和對象方法

    這篇文章主要介紹了詳解js創建對象的幾種方式和對象方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的...

    joychenke3782022-01-24
  • js教程javascript代碼實現簡易計算器

    javascript代碼實現簡易計算器

    這篇文章主要為大家詳細介紹了javascript代碼實現簡易計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    Hope°8902022-01-06
  • js教程如何在JavaScript中正確處理變量

    如何在JavaScript中正確處理變量

    這篇文章主要介紹了如何在JavaScript中正確處理變量，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下...

    瘋狂的技術宅10712021-12-20
  • js教程用javascript實現倒計時效果

    用javascript實現倒計時效果

    這篇文章主要為大家詳細介紹了用javascript實現倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    愛前端的茂茂7942022-01-20
  • js教程微信小程序抽獎組件的使用步驟

    微信小程序抽獎組件的使用步驟

    這篇文章主要給大家介紹了關于微信小程序抽獎組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需...

    い 狂奔的蝸牛10892021-12-29
  • js教程四個Javascript 中的 For 循環

    四個Javascript 中的 For 循環

    在 ECMAScript5（簡稱 ES5）中，有三個循環。在 2015 年 6 月發布的 ECMAScript6（簡稱 ES6）中，新增了一種循環類型。...

    鋒享前端4652022-01-12
  • js教程javascript實現簡單頁面倒計時

    javascript實現簡單頁面倒計時

    這篇文章主要為大家詳細介紹了javascript實現簡單頁面倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    潛力股wjk11952022-01-25
  • js教程JavaScript實現跟隨鼠標移動的盒子

    JavaScript實現跟隨鼠標移動的盒子

    這篇文章主要為大家詳細介紹了JavaScript實現跟隨鼠標移動的盒子，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    搬磚大法10852022-01-10
主站蜘蛛池模板： 国产在线精品视频 | av一区在线观看 | 91久久久久久久 | 成人午夜激情 | 91精品国产综合久久久久久 | 91精品国产综合久久久久久丝袜 | 精品一区二区三区视频 | 黄毛片视频| 国产成人在线看 | 日韩精品免费在线观看 | 国产精品尤物在线观看 | 电影91久久久 | 毛片一级在线观看 | 成人精品国产免费网站 | 国产另类ts人妖一区二区 | 欧美 日韩 | 久久综合成人精品亚洲另类欧美 | 成人免费视频网站在线看 | 午夜精品一区二区三区在线视频 | 日韩一区二区不卡 | 欧美视频中文字幕 | 亚洲成av人片在线观看 | 国产露脸国语对白在线 | 国产亚洲一区二区三区在线观看 | 国产福利电影在线观看 | 一区二区三区国产视频 | ririsao久久精品一区 | 久久久亚洲国产美女国产盗摄 | 老牛嫩草一区二区三区眼镜 | 国产一区二区三区在线视频观看 | 中文字幕高清 | 中文字幕日韩欧美一区二区三区 | 老牛嫩草一区二区三区眼镜 | 国产日韩欧美视频 | 可以在线观看的av网站 | 91久久国产精品 | 亚洲一区 日韩精品 中文字幕 | 天天操人人干 | 精品国产91乱码一区二区三区 | av一二三四 | 午夜视频网站 |