6种JavaScript判断数组是否包含某个值的方法

布满荆棘的人生 2022-08-28 05:59 125阅读 0赞

![4b0026ec47cef2791c5d31c7c86b37a8.png][]

我们在项目开发过程中，经常会要检查一个数组(无序)是否包含一个特定的值？这是一个在JavaScript中经常用到的并且非常有用的操作。

下面给出几种实现方式。

### **方式一：利用循环** ###

这种方式是比较老的实现方案，但不可否认的是在浏览器中效率较高。

或者使用while：

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

### **方式二：使用数组的some，filter等方法** ###

使用some方法更简洁，一旦找到元素，迭代就会中止，从而避免了不必要的迭代周期。

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

使用filter（注意：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此方法判断数组中是否存在某个值，如果存在返回数组元素的下标，否则返回-1。

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

注意点：

> 1、indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。  
> 2、在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求查找的项必须严格相等  
> 3、数组的位置是ECMAScript5为数组实例新增的，支持的浏览器有IE9+,Firefox,Safari,Opera,Chrome

### **方式四：array.includes** ###

array.includes(searchElement\[, fromIndex\]) 此方法判断数组中是否存在某个值，如果存在返回 true，否则返回false。

它可以像这样使用：

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

它还接受可选的第二个参数fromIndex：

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

不像indexOf，它采用严格相等比较。这意味着您可以检测数组是否包含NaN：

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

也不同于indexOf，includes不会跳过缺失的索引：

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

### **方式五：array.find** ###

find用于返回数组中满足条件的第一个元素的值，如果没有，返回undefined，比如：

除了find，我们也可以使用array.indIndex。返回数组中满足条件的第一个元素的索引（下标）, 如果没有找到，返回-1 同第3种方法类似。

### **方式六、利用set中has方法** ###

function contains(arr, val) {
      return new Set(arr).has(val)
    }
    contains([1,2,3],2);//true

通过new set(\[\])将数组转换成Set对象,set.prototype.has(value)判断该值是否存在于Set对象中，返回布尔值。

延伸：除此之外，还可以利用它进行数组去重，比如：

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

#  #

**学习更多技能**

**请点击下方公众号**

![b9805fb8fa3586364822a92d212d1ec3.gif][]

![3aa66e095dc71c7e08231495e695bcba.png][]

![ef5134a460a7a07a6dbc513229fb8ab6.png][]

[4b0026ec47cef2791c5d31c7c86b37a8.png]: /images/20220828/4da60b4336dd4022bf62468e08c7e85c.png
[b9805fb8fa3586364822a92d212d1ec3.gif]: /images/20220828/a37b753152ce4aee9b5d46a4f47f676d.png
[3aa66e095dc71c7e08231495e695bcba.png]: /images/20220828/a3c5fdd7c1464025953f5586ce8c01a6.png
[ef5134a460a7a07a6dbc513229fb8ab6.png]: /images/20220828/2b9972393a074ccf808c7d4d1921da46.png