js如何判断数组含有某值，in/includes/inArray/indexOf方案对比

最新推荐文章于 2023-08-22 18:27:23 发布

(成长中)扫地僧

最新推荐文章于 2023-08-22 18:27:23 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/qq_18246731/article/details/100989840

版权

本文探讨了在JavaScript中如何高效地判断数组或对象中是否存在特定元素或键。通过对比in操作符、indexOf、includes及自定义函数inArray，详细分析了各自的适用场景与优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结：判断数组或字典的key使用in。判断数组是否存在某个元素推荐使用includes，当判断的是一个对象时自己写一个函数使用如下第四个。

本文的测试数据是下面的两个值：
let arr=[“a”,“b”,“c”];
let arr2={“a”:“aaa”,“b”:“bbb”,“c”:“ccc”};

一、in
in操作符针对的是key，而非value。而对于普通的一维数组来说，key是隐藏的。所以，对于判断某个数组中是否含有某个值来说，这个方案并不合适。
in方案测试代码如下：

console.log(“1：”,“a” in arr);
console.log(“2：”,“aa” in arr);
console.log(“3：”,2 in arr);
console.log(“4：”,5 in arr);
console.log(“5：”,“a” in arr2);
console.log(“6：”,“aa” in arr2);

测试结果是：

1:false

2:false

3:true

4:false

5:true

6:false

二、indexOf
indexOf是用于字符串的。但是在这里，用于一个数组的话，也是可以执行的。但是用在一个对象obj上面的时候，是报错的。

console.log(“7：”,arr.indexOf(“a”));
console.log(“8：”,arr.indexOf(“aa”));
// console.log(“9：”,arr2.indexOf(“b”)); //报错
// console.log(“10：”,arr2.indexOf(“aaa”)); //报错

结果是：
7： 0
8： -1
三、includes
同indexOf一样，includes仅能用于数组操作。

console.log(“11：”,arr.includes(“a”));
console.log(“12：”,arr.includes(“aa”));
//console.log(“13：”,arr2.includes(“a”)); //报错
//console.log(“14：”,arr2.includes(“aa”)); //报错

运行结果是：
11： true
12： false

在ES5，Array已经提供了indexOf用来查找某个元素的位置，如果不存在就返回-1，但是这个函数在判断数组是否包含某个元素时有两个小不足，第一个是它会返回-1和元素的位置来表示是否包含，在定位方面是没问题，就是不够语义化。另一个问题是不能判断是否有NaN的元素

ES6提供了Array.includes()函数判断是否包含某一元素，除了不能定位外，解决了indexOf的上述的两个问题。它直接返回true或者false表示是否包含元素，对NaN一样能有有效。

includes()函数的第二个参数表示判断的起始位置。

    const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN]
    console.log('%s', arr1.includes('d', 1))   // true
    console.log('%s', arr1.includes('d', 3))   // true
    console.log('%s', arr1.includes('d', 4))   // fals

第二个参数也可以是负数，表示从右数过来第几个，但是不改变判断搜索的方向，搜索方向还是从左到右。

    console.log('%s', arr1.includes('k', -1))  // false
    console.log('%s', arr1.includes('k', -2))  // true
    console.log('%s', arr1.includes('i', -3))  // false

四、自定义函数inArray
这个自定义函数inArray，可以用于数组，也可以用于对象。
当然，在php里面，这个函数名字就应该是in_array，那么在js的世界里面，就入乡随俗一下，换个inArray名字吧~

function inArray(search,array){
for(var i in array){
if(array[i]==search){
return true;
}
}
return false;
}


console.log(“15：”,inArray(“a”,arr));
console.log(“16：”,inArray(“aa”,arr));
console.log(“17：”,inArray(“a”,arr2));
console.log(“18：”,inArray(“bbb”,arr2));

15： true
16： false
17： false
18： true