知識(shí)回調(diào)

場(chǎng)景復(fù)現(xiàn)

在后臺(tái)管理系統(tǒng)的項(xiàng)目開(kāi)發(fā)中，對(duì)于數(shù)組對(duì)象的處理非常常見(jiàn)，比如數(shù)組對(duì)象的排序、數(shù)組對(duì)象的篩選和數(shù)組對(duì)象的模糊查詢。往期文章我們介紹了關(guān)于數(shù)組對(duì)象排序和篩選的內(nèi)容，本期文章主要介紹判斷數(shù)組對(duì)象是否含有某個(gè)值的方法。

實(shí)現(xiàn)方式（6種）

利用循環(huán)遍歷數(shù)組元素

• 使用循環(huán)遍歷數(shù)組元素是比較傳統(tǒng)，也比較老的實(shí)現(xiàn)方案，但是不可否認(rèn)的是，這種方法在瀏覽器種效率較高，并且理解起來(lái)很快。
• 但是，當(dāng)限制條件很多時(shí)，會(huì)產(chǎn)生多層循環(huán)和多次數(shù)據(jù)處理的問(wèn)題。

function contains(arr, val) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === val) {
            return true;
        }
    }
    return false;
}

contains([1,2,3],3);//true

當(dāng)然，也可以使用while語(yǔ)句

function contains(arr, val) {
    var i = arr.length;
    while (i--) {
       if (arr[i] === val){
           return true;
       }
    }
    return false;
}

contains([1,2,3,4],1);//true

利用some，filter方法

使用some方法更加簡(jiǎn)潔，一旦找到元素，迭代就會(huì)終止，從而避免了不必要的迭代周期（不過(guò)使用循環(huán)也能解決，但是增加了代碼量）

示例代碼：

function contains(arr, val) {
    return arr.some(item => item === val);
}

這里可以直接使用箭頭函數(shù)對(duì)數(shù)據(jù)進(jìn)行篩選，相比循環(huán)而言更加簡(jiǎn)潔。

使用filter方法最為常見(jiàn)，filter本身為過(guò)濾的意思，一般在filter的箭頭函數(shù)中添加篩選條件。
（注意：array.filter(e=>e==x).length > 0等效于array.some(e=>e==x)，但some更有效）

示例代碼：

function contains(arr, val) {
    return arr.filter((item)=> { return item == val }).length > 0;
}

利用array.indexOf方法

• array.indexOf此方法判斷數(shù)組中是否存在某個(gè)值，如果存在返回?cái)?shù)組元素的下標(biāo)，否則返回-1。
• indexOf方法在篩選數(shù)組數(shù)據(jù)時(shí)十分常用，一般用于模糊查詢和關(guān)鍵字搜索。

[1, 2, 3].indexOf(1);//0
["foo", "fly63", "baz"].indexOf("fly63");//1
[1, 2, 3].indexOf(4);//-1

注意：

• indexOf() 方法對(duì)大小寫(xiě)敏感。如果要檢索的字符串值沒(méi)有出現(xiàn)，則該方法返回 -1。
• 在比較第一個(gè)參數(shù)與數(shù)組中的每一項(xiàng)時(shí)，會(huì)使用全等操作符，即要求查找的項(xiàng)必須嚴(yán)格相等。
• 數(shù)組的位置是ECMAScript5為數(shù)組實(shí)例新增的，支持的瀏覽器有IE9+,Firefox,Safari,Opera,Chrome。

利用array.includes方法

• array.includes(searchElement[, fromIndex]) 此方法判斷數(shù)組中是否存在某個(gè)值
• 如果存在返回true，否則返回false。

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false

它還接受可選的第二個(gè)參數(shù)fromIndex：

[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true

不像indexOf，它采用嚴(yán)格相等比較。這意味著您可以檢測(cè)數(shù)組是否包含NaN：

[1, 2, NaN].includes(NaN); // true

也不同于indexOf，includes不會(huì)跳過(guò)缺失的索引：

new Array(5).includes(undefined); // true

利用array.find方法

find用于返回?cái)?shù)組中滿足條件的第一個(gè)元素的值，如果沒(méi)有，返回undefined

let numbers = [12, 5, 8, 130, 44];
let result = numbers.find(item => {
    return item > 8;
});

console.log(result);//12

//元素是對(duì)象
let items = [
    {id: 1, name: 'something'},
    {id: 2, name: 'anything'},
    {id: 3, name: 'nothing'},
];
let item = items.find(item => {
    return item.id == 3;
});

console.log(item) //Object { id: 3, name: "nothing" }

除了find，我們也可以使用array.indIndex。返回?cái)?shù)組中滿足條件的第一個(gè)元素的索引（下標(biāo)）, 如果沒(méi)有找到，返回-1（和第三種方法indexOf類似）

利用set中has方法

function contains(arr, val) {
  return new Set(arr).has(val)
}

contains([1,2,3],2);//true

通過(guò)new set([])將數(shù)組轉(zhuǎn)換成Set對(duì)象,set.prototype.has(value)判斷該值是否存在于Set對(duì)象中，返回布爾值。

延伸：除此之外，還可以利用它進(jìn)行數(shù)組去重

let arr2 = new Set([1,1,2,3,4]) 
let arr3 = [...arr2] 
console.log(arr2,arr3) // {1,2,3,4} [1,2,3,4]

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-455387.html

本期小結(jié)

本期文章詳細(xì)介紹了六種方法，用于判斷數(shù)組對(duì)象是否含有某個(gè)值。當(dāng)然，在往期文章中，我們利用filter和indexOf對(duì)數(shù)據(jù)進(jìn)行過(guò)簡(jiǎn)單的增刪改查，但是當(dāng)查詢的數(shù)據(jù)變成數(shù)組對(duì)象里的數(shù)組對(duì)象時(shí)，我們應(yīng)該怎么解決呢？

到了這里，關(guān)于JavaScript判斷數(shù)組對(duì)象是否含有某個(gè)值的方法（6種）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！