js中判断数组中是否包含某元素的方法

本文介绍JavaScript中五种高效查找数组元素的方法,包括indexOf(), find(), findIndex(), for循环及jQuery inArray方法,详解每种方法的语法、用法及注意事项。

这个是整理过的:https://www.cnblogs.com/yunshangwuyou/p/10539090.html

方法一:arr.indexOf(某元素):未找到则返回 -1。

实际用法:if(arr.indexOf(某元素) > -1){//则包含该元素}

例:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple"); // 2
//以上输出结果意味着 "Apple" 元素位于数组中下标为 2 的位置。

indexOf()完整语法:array.indexOf(item,start)

参数:

item:必须。查找的元素。

start:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。

例:

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4); // 6

注:string.indexOf()返回某个指定的字符串值在字符串中首次出现的位置。

1.该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。

2.stringObject 中的字符位置是从 0 开始的。

3.查找字符串最后出现的位置,使用 lastIndexOf() 方法。

方法二:arr.find()

数组实例的find()方法用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素,然后返回该元素,否则返回undefined。 

find() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined 

注意: find() 对于空数组,函数是不会执行的。 

注意: find() 并没有改变数组的原始值。

[1, 5, 10, 15].find(function(value, index, arr) {
    return value > 9;
}) // 10

实际用法:

arr.find(function(value) {
    if(value === 要查找的值) {  
        //则包含该元素
    }
})

方法三:array.findIndex()

array.findIndex()和array.find()十分类似,返回第一个符合条件的数组元素的位置,如果所有元素都不符合条件,则返回-1。 

findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的。 

注意: findIndex() 并没有改变数组的原始值。


[1,5,10,15].findIndex(function(value, index, arr) {
    return value > 9;
}) // 2.  

// 方法二和方法三,这两个方法都可以发现NaN,弥补了方法一IndexOf()的不足。

[NaN].indexOf(NaN) 
//-1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

方法四:for()

遍历数组,然后 if 判断。

var arr = [1, 5, 10, 15];
//传统for
for(let i=0; i<arr.length; i++) {
    if(arr[i] === 查找值) {
        //则包含该元素
    }
}
// for...of
for(v of arr) {
    if(v === 查找值) {
        //则包含该元素
    }
}

forEach。

arr.forEach(v=>{
   if(v === 查找值) {
        //则包含该元素
    }
})

方法五:

就是使用jquery的inArray方法,该方法返回元素在数组中的下标,如果不存在与数组中,那么返回-1,代码如下所示:

// 使用jquery的inArray方法判断元素是否存在于数组中
// @param {Object} arr 数组
// @param {Object} value 元素值

function isInArray2(arr,value){
    var index = $.inArray(value,arr);
    if(index >= 0){
        return true;
    }
    return false;
}
### 使用 `includes()` 方法检查元素是否存在 在 JavaScript 中,`includes()` 方法是一种简洁且直观的方式来判断数组是否包含某个特定的元素。该方法直接返回一个布尔值,如果数组包含目标元素,则返回 `true`,否则返回 `false`。这种方法在现代浏览器中得到了广泛支持,并且代码可读性非常高。 ```javascript const array = [1, 2, 3, 4, 5]; console.log(array.includes(3)); // 输出: true console.log(array.includes(6)); // 输出: false ``` ### 使用 `indexOf()` 方法检查元素是否存在 `indexOf()` 方法通过返回目标元素数组中的索引位置来判断是否存在。如果目标元素存在,该方法会返回一个非负整数表示其索引位置;如果不存在,则返回 `-1`。虽然这种方法较为传统,但在老旧的浏览器环境中仍然适用。 ```javascript const array = [1, 2, 3, 4, 5]; console.log(array.indexOf(3) !== -1); // 输出: true console.log(array.indexOf(6) !== -1); // 输出: false ``` ### 使用 `find()` 方法检查元素是否存在 `find()` 方法允许通过一个回调函数来查找符合条件的元素。如果找到符合条件的元素,该方法返回该元素;否则返回 `undefined`。因此,可以通过判断返回值是否为 `undefined` 来确认数组是否包含目标元素。 ```javascript const array = [1, 2, 3, 4, 5]; console.log(array.find(item => item === 3) !== undefined); // 输出: true console.log(array.find(item => item === 6) !== undefined); // 输出: false ``` ### 使用 `some()` 方法检查元素是否存在 `some()` 方法通过一个回调函数测试数组是否有至少一个元素满足条件。如果存在满足条件的元素,则返回 `true`,否则返回 `false`。这种方法非常适合用于检查数组是否存在特定元素。 ```javascript const array = [1, 2, 3, 4, 5]; console.log(array.some(item => item === 3)); // 输出: true console.log(array.some(item => item === 6)); // 输出: false ``` ### 使用 `every()` 方法检查元素是否存在 `every()` 方法用于测试数组中的所有元素是否都满足给定条件。如果只想判断数组是否完全包含某个元素(也就是说,数组中的每一个元素都等于该元素),可以使用 `every()` 方法结合逻辑判断来实现。 ```javascript function containsElement(arr, element) { return arr.every(item => item !== element) === false; // 如果不是所有元素都不等于该元素,说明包含元素 } const array = [1, 2, 3, 4, 5]; console.log(containsElement(array, 3)); // 输出: true console.log(containsElement(array, 6)); // 输出: false ``` ### 使用循环遍历检查元素是否存在 循环遍历是一种较为基础但通用的方法。通过 `for` 循环逐个检查数组中的元素是否等于目标元素,如果找到匹配项,则立即返回 `true`;如果遍历结束后未找到匹配项,则返回 `false`。 ```javascript function containsElement(arr, target) { for (var i = 0; i < arr.length; i++) { if (arr[i] === target) { return true; } } return false; } const array = [1, 2, 3, 4, 5]; console.log(containsElement(array, 3)); // 输出: true console.log(containsElement(array, 6)); // 输出: false ``` ### 总结 在 JavaScript 中,判断数组是否包含某个特定元素方法有多种,每种方法都有其适用场景。例如: - `includes()` 方法简洁直观,适合现代浏览器环境。 - `indexOf()` 方法兼容性好,适合老旧浏览器环境。 - `find()` `some()` 方法功能强大,适用于需要复杂条件判断的场景。 - `every()` 循环遍历方法则提供了更灵活的实现方式。 选择合适的方法取决于具体的使用场景浏览器兼容性需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值