indexOf 的怪异之处：理解对象的陷阱

引言

indexOf() 是 JavaScript 数组中一个广泛使用的内置方法，用于查找给定元素的第一个索引。它遍历数组，并在找到匹配项时返回其索引。对于基本数据类型（例如字符串、数字、布尔值）的数组，indexOf() 运行良好。

然而，当涉及到对象数组时，indexOf() 的行为会变得出人意料，可能导致令人困惑的错误。让我们通过一个示例来理解这个陷阱。

const arr = [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }];
const index = arr.indexOf({ id: 1, name: 'John' });

在这个示例中，我们有一个对象数组 arr。我们使用 indexOf() 方法查找带有 id: 1 和 name: 'John' 属性的对象。但是，尽管对象与数组中的对象完全匹配，但 indexOf() 返回 -1，表示找不到该元素。

陷阱：对象比较的局限性

indexOf() 在对象数组上遇到陷阱的原因在于 JavaScript 中对象比较的局限性。JavaScript 中的对象是引用类型，这意味着它们在内存中存储为引用，而不是实际值。当比较两个对象时，JavaScript 比较它们的引用，而不是它们的属性值。

因此，即使两个对象具有相同的属性值，但它们不是同一引用，则 indexOf() 将不会找到该元素。

解决方案：自定义比较函数

为了避免 indexOf() 在对象数组上遇到的陷阱，我们可以使用自定义比较函数。比较函数是一个传递给 indexOf() 的函数，它指定如何比较数组元素。

const arr = [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }];
const index = arr.indexOf((obj) => obj.id === 1 && obj.name === 'John');

在这个示例中，我们提供了一个自定义比较函数，该函数检查对象的 id 和 name 属性是否与给定的值匹配。这样，即使对象不是同一引用，indexOf() 也会找到该元素并返回其索引。

最佳实践

为了编写更可靠、健壮的代码，在处理对象数组时使用 indexOf() 时遵循以下最佳实践至关重要：

• 对于基本数据类型数组，使用 indexOf()。
• 对于对象数组，使用自定义比较函数。
• 始终考虑对象比较的局限性，并在需要时使用适当的技术。
• 确保比较函数是明确的、有效的，并且不会引入意外的行为。

结论

indexOf() 是 JavaScript 中查找数组元素的强大工具。然而，在处理对象数组时，它可能会遇到一个陷阱，导致意想不到的结果。通过理解对象比较的局限性并使用自定义比较函数，我们可以避免这个陷阱并编写更可靠的代码。遵循这些最佳实践有助于确保您的代码准确、一致地返回预期结果。