JavaScript 数组搜索方法详解：indexOf、includes、find 与 inArray 指南

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 介绍

JavaScript 是网页开发中使用最广泛的编程语言之一。尤其是数组操作在数据管理和用户交互中起着关键作用。

本文详细说明了如何在 JavaScript 中搜索数组中的值。内容涵盖了从基础搜索方法到更高级的使用场景，适用于初学者和中级开发者。

本文目的

阅读本文后，你将学到以下内容：

• 了解用于数组搜索的主要 JavaScript 方法之间的差异。
• 通过代码示例学习每种方法的具体用法。
• 能够根据实际场景选择合适的方法。

目标读者

本文面向：

• 刚开始使用 JavaScript 的初学者。
• 想深入了解数组搜索和数据处理的中级开发者。
• 寻求实用代码示例的网页开发者。

你将获得的知识与技能

• JavaScript 数组搜索方法的基础与高级用法（indexOf()、includes()、find()、findIndex()）。
• 如何使用 jQuery 的 inArray() 方法以及需要注意的要点。
• 性能差异的理解以及实际使用场景的把握。

掌握这些技能后，你将能够更高效地在 JavaScript 中进行数据操作。

接下来

在下一篇文章中，我们将深入探讨“基础 JavaScript 数组搜索方法”。每种方法的特性和用法都会配以具体示例，敬请期待。

如果对本文有任何疑问或需求，欢迎随时提问。

2. 基础 JavaScript 数组搜索方法

JavaScript 提供了多种在数组中搜索值的方法。本节将通过清晰的示例解释每种方法的工作原理。

2-1. indexOf() 方法

概述
indexOf() 方法返回指定值在数组中首次出现的索引。如果该值不存在，则返回 -1。

基本语法

array.indexOf(value, fromIndex)

• value：要搜索的值
• fromIndex：开始搜索的位置（可选，默认值为 0）

示例

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.indexOf('grape'));  // Output: -1

重要说明

• indexOf() 使用严格比较（===），不同数据类型的值不会被视为相等。
• 它不适用于直接比较对象或数组。

2-2. includes() 方法

概述
includes() 方法返回布尔值（true 或 false），指示指定值是否存在于数组中。

基本语法

array.includes(value, fromIndex)

示例

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green')); // Output: true
console.log(colors.includes('yellow')); // Output: false

重要说明

• includes() 在 ES6（ECMAScript 2015）中引入，可能不被非常老旧的浏览器支持。

2-3. find() 方法

概述
find() 方法返回满足指定条件的第一个元素。如果未找到匹配的元素，则返回 undefined。

示例

const numbers = [10, 20, 30, 40];

const result = numbers.find(num => num > 25);
console.log(result); // Output: 30

2-4. findIndex() 方法

概述
findIndex() 方法返回满足指定条件的第一个元素的索引。如果未找到匹配的元素，则返回 -1。

示例

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(num => num > 25);
console.log(index); // Output: 2

小结

在本节中，我们介绍了基本的 JavaScript 数组搜索方法：indexOf()、includes()、find() 和 findIndex()。

关键比较点

• 对于简单搜索，indexOf() 或 includes() 适用。
• 对于基于条件的搜索，find() 或 findIndex() 更有效。

3. jQuery 的 inArray() 方法是什么？

JavaScript 提供了内置的数组搜索方法，但 jQuery 也提供了自己的数组搜索方法 inArray()。在本节中，我们将解释 inArray() 的特性、如何通过具体示例使用它，以及需要注意的重要事项。

3-1. 为什么使用 jQuery？

jQuery 长期以来被广泛使用，作为一个能够更简洁地编写 DOM 操作和事件处理的库。如今仍有以下情况会使用 jQuery：

• 维护遗留系统：在已有项目和系统中使用。
• 简易代码编写：对初学者友好，易于上手。
• 确保兼容性：支持旧版浏览器。

3-2. 如何使用 inArray() 方法

概述
inArray() 方法在数组中存在指定值时返回其索引；如果不存在，则返回 -1。

基本语法

$.inArray(value, array, [fromIndex])

示例

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1
console.log($.inArray('grape', fruits));  // Output: -1

3-3. inArray() 与原生方法的比较

关键点：

• 在基于 jQuery 的项目中，使用 inArray() 有助于保持一致性。
• 对于新项目，通常建议优先使用原生方法。

3-4. 使用时的重要注意事项

1. jQuery 版本依赖
inArray() 只能在 jQuery 环境中使用，进行新项目时需谨慎。

2. 比较规则
它仅执行严格比较（===），因此需注意数据类型的差异。

3. 性能差异
相较于原生方法，jQuery 方法会带来额外开销。

小结

本节我们解释了 jQuery 的 inArray() 方法。

关键收获：

• 在 jQuery 环境中，可以编写简洁且一致的代码。
• 对于新项目，通常推荐使用原生方法。
• 在处理遗留系统时，inArray() 仍然有用。

4. 方法比较与选择指南

JavaScript 和 jQuery 提供了多种数组搜索方法，每种都有不同的特性和使用场景。本节我们比较主要方法并说明如何选择合适的方式。

4-1. 各方法的关键特性与比较

下面是主要数组搜索方法及其特性的比较表。

4-2. 场景推荐方法

1. 简单值搜索
示例：当你想检查数组是否包含特定值时。

• 推荐方法：
• indexOf() → 需要索引号时。
• includes() → 只需确认是否存在时。

示例：

const colors = ['red', 'green', 'blue'];

console.log(colors.indexOf('green')); // Output: 1
console.log(colors.includes('green')); // Output: true

2. 基于条件的搜索
示例：当你想搜索符合特定条件的数据时。

• 推荐方法：
• find() → 获取第一个满足条件的元素。
• findIndex() → 获取第一个满足条件的元素的位置。

示例：

const numbers = [10, 20, 30, 40];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.findIndex(num => num > 25)); // Output: 2

3. 在遗留系统中搜索
示例：在基于 jQuery 的旧系统中进行数据搜索时。

• 推荐方法：
• inArray() → 环境需要 jQuery 库时使用。

示例：

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1

4-3. 性能比较

1. 需要高速搜索时：

• indexOf() 和 includes() 速度快。

2. 需要条件搜索时：

• find() 和 findIndex() 支持灵活的条件，但稍慢一些。

3. 使用 jQuery 时：

• inArray() 使用方便，但比原生方法慢。

小结

在本节中，我们比较了主要的数组搜索方法，并说明了如何根据使用场景选择合适的方法。

关键要点：

• 对于简单搜索，使用 indexOf() 或 includes()。
• 对于基于条件的搜索，find() 或 findIndex() 是理想选择。
• 在 jQuery 环境中，inArray() 对于旧系统可能有用。

通过根据环境和需求选择合适的方法，你可以编写既高效又易于维护的代码。

5. 实践示例与应用场景

在本节中，我们演示如何在实际场景中使用前面介绍的 JavaScript 和 jQuery 数组搜索方法。通过真实案例的演练，你可以加深理解，并在实际项目中应用这些技术。

5-1. 表单输入验证

场景：
验证用户输入的值是否包含在预定义列表中。

解决方案：
使用 includes() 方法进行简洁的存在性检查。

代码示例：

const validColors = ['red', 'green', 'blue'];
const userInput = 'green';

if (validColors.includes(userInput)) {
  console.log('The color is valid.');
} else {
  console.log('The color is invalid.');
}

5-2. 搜索并提取用户数据

场景：
在对象数组中搜索符合条件的用户数据。

解决方案：
使用 find() 或 findIndex() 提取满足条件的数据。

代码示例：

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
];

const result = users.find(user => user.age >= 30);
console.log(result); // Output: { id: 2, name: 'Bob', age: 30 }

const index = users.findIndex(user => user.age >= 30);
console.log(index); // Output: 1

5-3. 错误处理示例

场景：
当搜索目标未找到时实现错误处理。

解决方案：
使用 indexOf() 或 findIndex() 检查结果并显示错误信息。

代码示例：

const products = ['apple', 'banana', 'orange'];

const index = products.indexOf('grape');

if (index === -1) {
  console.log('The product was not found.');
} else {
  console.log(`The product is located at index ${index}.`);
}

5-4. 过滤数组数据

场景：
仅提取满足给定条件的数据。

解决方案：
使用 filter() 方法对数组进行过滤。

代码示例：

const scores = [45, 72, 88, 53, 94];

const highScores = scores.filter(score => score >= 70);
console.log(highScores); // Output: [72, 88, 94]

5-5. 使用 jQuery 进行搜索

场景：
在旧系统中使用 jQuery 的 inArray() 检查数据是否存在。

解决方案：
使用 inArray() 检查值的索引位置。

代码示例：

const fruits = ['apple', 'banana', 'orange'];

if ($.inArray('banana', fruits) !== -1) {
  console.log('Banana exists in the list.');
} else {
  console.log('Banana does not exist in the list.');
}

小结

在本节中，我们基于真实场景介绍了每种方法的实际使用示例。

关键要点：

• includes() 简单且高效，适用于用户输入验证。
• find() 和 findIndex() 功能强大，适用于条件搜索和对象处理。
• indexOf() 多才多艺，适合错误处理。
• filter() 高效，可提取多个匹配元素。
• inArray() 在使用 jQuery 的旧版环境中很有用。

6. 常见问题 (FAQ)

在本节中，我们将解答与 JavaScript 和 jQuery 中数组搜索相关的常见问题和疑虑。

问题 1：indexOf() 与 includes() 的区别是什么？

回答：
indexOf() 和 includes() 都用于在数组中搜索元素，但它们的返回值和使用场景不同。

• indexOf()：返回指定值的索引。如果未找到，则返回 -1。
• includes()：返回布尔值（true 或 false），指示该值是否存在。

示例：

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.includes('banana')); // Output: true

问题 2：find() 与 filter() 的区别是什么？

回答：
find() 和 filter() 都用于搜索满足条件的元素，但它们返回的结果不同。

• find()：仅返回第一个匹配的元素。
• filter()：返回所有匹配元素组成的新数组。

示例：

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.filter(num => num > 25)); // Output: [30, 40, 50]

问题 3：如何在对象数组中搜索特定的键值？

回答：
在对象数组中，可以使用 find() 或 findIndex() 来指定搜索条件。

示例：

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const user = users.find(user => user.name === 'Bob');
console.log(user); // Output: { id: 2, name: 'Bob' }

问题 4：今天仍然应该使用 jQuery 的 inArray() 吗？

回答：
jQuery 的 inArray() 方法在旧版环境中仍然有用，但在大多数现代场景下推荐使用原生 JavaScript 方法。

建议：

• 对于新项目，使用原生方法，如 indexOf() 或 includes()。
• 对于已有的基于 jQuery 的环境，使用 inArray() 可以保持一致性。

问题 5：如何优化数组搜索的性能？

回答：
在处理大数据集或频繁搜索时，请考虑以下要点：

1. 选择快速方法：

• 对于简单值搜索，indexOf() 和 includes() 速度快。

2. 使用缓存：

• 缓存搜索结果以避免重复计算。

3. 优化数据结构：

• 对于大数据集，使用以值为键的对象，或使用 Set、Map 等数据结构更高效。

示例：

const dataSet = new Set([10, 20, 30, 40]);
console.log(dataSet.has(20)); // Output: true

总结

在本节中，我们覆盖了与 JavaScript 和 jQuery 中数组搜索相关的常见问题及其解决方案。

关键要点：

• 理解每种方法的区别及适用场景。
• 在对象数组中使用 find() 进行条件搜索。
• 对于新项目优先使用原生方法，只有在旧版环境中才使用 jQuery 方法。
• 处理大数据集时考虑性能和数据结构。

7. 总结与后续步骤

本文全面阐述了在 JavaScript 和 jQuery 中使用数组搜索方法。接下来，我们将回顾全文的关键点，并介绍学习策略和实际操作步骤，以帮助你进一步提升。

7-1. 本文的关键要点

1. 基础数组搜索方法

• indexOf() ：在数组中搜索元素的索引。
• includes() ：返回一个布尔值，指示是否存在指定的值。
• find() 和 findIndex() ：搜索第一个满足给定条件的元素或其索引。

2. jQuery 的 inArray() 方法

• 适用于传统环境和基于 jQuery 的系统。
• 在现代环境中推荐使用原生 JavaScript 方法。

3. 实际示例与应用场景

• 展示了真实场景的示例，如表单输入验证以及从对象数组中提取数据。
• 错误处理和数据过滤可以简洁且高效地实现。

4. 常见问题解答 (FAQ)

• 阐明了每种方法的区别以及何时使用它们。
• 解释了性能考量和搜索对象数组的技巧。

7-2. 选择合适方法的关键要点

根据使用场景选择合适的数组搜索方法至关重要。请参考下表快速挑选最佳方法。

7-3. 后续步骤

1. 进行实战项目

• 构建一个简单的 Web 应用，并在其中运用本文所学的方法。例如在 TODO 列表或产品管理系统中实现搜索和过滤功能。

2. 学习更高级的 JavaScript 概念

• ES6 及更高版本：学习现代 JavaScript 特性，如展开运算符和解构赋值，以编写更高效的代码。
• 异步处理：掌握 async/await 和 Promise，能够处理更高级的数据操作。

3. 使用库和框架

• 像 React 和 Vue.js 这样的现代框架需要将数组搜索与数据绑定相结合的高级实现。

4. 参考资料与资源

• MDN Web Docs： JavaScript Arrays
• W3Schools： JavaScript Array Methods
• JSFiddle 与 CodePen：用于测试和分享代码的实用工具。

7-4. 结束语

通过本文，你已经系统地学习了 JavaScript 与 jQuery 中数组搜索的基础与进阶技巧。

给读者的建议：

1. 在真实项目中应用所学，并经常进行代码实验。
2. 持续学习新技术和新方法，保持更新。
3. 根据项目需求灵活选择最合适的方法。

结论

本篇“JavaScript 与 jQuery 数组搜索完整指南”到此结束。

保持学习新技术和工具，持续提升你的编程技能。