js怎么判断数组包含元素 js判断数组包含元素的3种方法对比-js教程-PHP中文网

js怎么判断数组包含元素 js判断数组包含元素的3种方法对比

冰火之心

发布： 2025-06-24 21:35:01

原创

717人浏览过

判断js数组是否包含元素的方法有includes()、indexof()和find()/findindex()。1. includes()直接返回布尔值，适用于只需判断是否存在元素的场景；2. indexof()返回元素索引，适用于需要获取位置或兼容老浏览器的情况；3. find()/findindex()支持复杂条件查找，适用于对象数组或需自定义逻辑的场景。处理nan时，includes()可正确识别，而indexof()不可靠。对于对象元素，严格相等比较无效，推荐使用find()或findindex()进行属性匹配。空数组调用这些方法均不会报错，无需特殊处理。性能上，includes()和indexof()较优，find()和findindex()因执行回调相对较慢。

js怎么判断数组包含元素 js判断数组包含元素的3种方法对比

判断JS数组是否包含元素，核心在于使用适当的方法进行查找和比较。常见方法包括includes()、indexOf()和find()/findIndex()，选择哪个取决于你的具体需求和目标浏览器的兼容性。

includes()、indexOf()、find() / findIndex()的对比

includes()

includes()方法是最直观的方式，它直接返回一个布尔值，表示数组是否包含指定的元素。

const arr = [1, 2, 3, 4, 5];

console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

登录后复制

优点：简单易懂，代码可读性高。

缺点：无法获取元素的索引，不支持复杂的查找条件。

适用场景：只需要知道数组是否包含某个元素，而不需要知道元素的位置。

indexOf()

indexOf()方法返回数组中找到指定元素的第一个索引，如果不存在则返回-1。

const arr = [1, 2, 3, 4, 5];

console.log(arr.indexOf(3)); // 2
console.log(arr.indexOf(6)); // -1

if (arr.indexOf(3) !== -1) {
  console.log("数组包含元素3");
}

登录后复制

优点：可以获取元素的索引，兼容性较好（ES5）。

缺点：只能查找第一个匹配的元素，无法进行复杂的条件查找。

适用场景：需要知道元素在数组中的位置，或者需要兼容老版本的浏览器。

find() / findIndex()

find()方法返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined。findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1。

const arr = [
  { id: 1, name: "apple" },
  { id: 2, name: "banana" },
  { id: 3, name: "orange" },
];

const found = arr.find((element) => element.name === "banana");
console.log(found); // { id: 2, name: "banana" }

const foundIndex = arr.findIndex((element) => element.name === "banana");
console.log(foundIndex); // 1

登录后复制

优点：可以进行复杂的条件查找，灵活性高。

缺点：兼容性相对较差（ES6），代码相对复杂。

适用场景：需要根据复杂的条件查找元素，或者需要处理对象数组。

如何处理NaN值的判断？

includes()可以正确判断NaN，而indexOf()不能。这是因为indexOf()使用严格相等(===)进行比较，而NaN === NaN的结果是false。

const arr = [1, 2, NaN, 4, 5];

console.log(arr.includes(NaN)); // true
console.log(arr.indexOf(NaN)); // -1

登录后复制

如果需要使用indexOf()判断数组是否包含NaN，可以先使用find()或findIndex()找到NaN的索引。

性能考量：哪种方法更快？

通常来说，includes()和indexOf()在简单查找时性能相近，但includes()在语义上更清晰。find()和findIndex()由于需要执行回调函数，性能相对较差。

如果对性能有较高要求，且只需要判断数组是否包含某个基本类型的值，建议使用includes()或indexOf()。

数组元素是对象时，如何判断包含？

当数组元素是对象时，includes()和indexOf()默认使用严格相等(===)进行比较，这意味着只有当数组中存在与目标对象完全相同的对象（引用相同）时，才会返回true或正确的索引。

const arr = [{ id: 1 }, { id: 2 }];
const obj = { id: 1 };

console.log(arr.includes(obj)); // false, 因为obj和arr[0]是不同的对象

// 使用find()进行比较
const found = arr.find((item) => item.id === obj.id);
console.log(found); // { id: 1 }

登录后复制

这种情况下，find()或findIndex()是更好的选择，因为它们允许你自定义比较逻辑。