JS数组元素索引查找方法

今天golang学习网给大家带来了《JS中使用indexOf查找数组元素索引的方法》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

在JavaScript中查找数组元素索引最常用的方法是indexOf()，它返回指定元素首次出现的索引，若未找到则返回-1；2. indexOf()使用严格相等（===）比较，因此类型和值都必须匹配；3. 该方法可接受第二个参数fromIndex，用于指定查找起始位置，若该值大于等于数组长度则直接返回-1；4. indexOf()无法查找NaN，因为NaN不等于自身，此时应使用findIndex()结合isNaN()或includes()方法；5. 对于对象数组或复杂条件查找，应使用findIndex()，因为它接受回调函数并可自定义匹配逻辑；6. 要查找某元素所有匹配的索引，需通过循环结合indexOf()的fromIndex参数反复查找，每次从上一个匹配位置的后一位开始；7. indexOf()能正常查找undefined和null，但在处理特殊值和复杂数据结构时需注意其局限性。

在 JavaScript 里，要查找数组中元素的索引，最直接也最常用的方法就是使用数组自带的 indexOf() 方法。它会返回你要找的那个元素在数组里第一次出现的位置（也就是索引值），如果数组里根本没有这个元素，它就会给你返回 -1。

解决方案

indexOf() 方法的用法其实挺简单的，它接受两个参数：你要查找的元素，以及一个可选的参数，表示从哪个索引位置开始查找。

它的基本语法是这样的：arr.indexOf(searchElement[, fromIndex])

• searchElement：这是你想要在数组中查找的那个值。
• fromIndex（可选）：一个整数，表示从数组的哪个索引位置开始向后查找。如果你省略了这个参数，或者给它传了个小于 0 的值，查找就会从数组的开头（索引 0）开始。如果传的值大于或等于数组的长度，那么 indexOf 就不会执行任何搜索，直接返回 -1。

让我们看几个例子，这会让你对它的行为模式有个更清晰的认识：

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

// 查找 'banana' 的索引
const bananaIndex = fruits.indexOf('banana');
console.log(bananaIndex); // 输出: 1

// 查找 'apple' 的索引，注意它只返回第一个匹配的
const firstAppleIndex = fruits.indexOf('apple');
console.log(firstAppleIndex); // 输出: 0

// 查找一个不存在的元素
const kiwiIndex = fruits.indexOf('kiwi');
console.log(kiwiIndex); // 输出: -1

// 从特定索引开始查找
// 查找从索引 2（'orange'）开始的 'apple'
const secondAppleIndex = fruits.indexOf('apple', 2);
console.log(secondAppleIndex); // 输出: 3

// 数组中没有的元素，即使指定了起始索引也一样
const noSuchElement = fruits.indexOf('mango', 0);
console.log(noSuchElement); // 输出: -1

// fromIndex 大于等于数组长度，直接返回 -1
const fromTooFar = fruits.indexOf('apple', 10);
console.log(fromTooFar); // 输出: -1

indexOf() 在查找时使用的是严格相等（===）比较。这意味着它不仅比较值，还会比较类型。比如，数字 5 和字符串 '5' 在 indexOf() 看来是完全不同的。

const mixedArray = [1, '2', 3, '4'];
console.log(mixedArray.indexOf(1));   // 输出: 0
console.log(mixedArray.indexOf('2'));  // 输出: 1
console.log(mixedArray.indexOf(2));    // 输出: -1 (数字 2 不存在，只有字符串 '2')

indexOf 和 findIndex 有什么区别？

这是个经常被问到的问题，因为它们听起来功能很相似，但实际应用场景却大相径庭。简单来说，indexOf 专注于查找值的索引，而 findIndex 则专注于查找满足某个条件的元素的索引。

• indexOf(): 就像我们上面说的，它用严格相等 (===) 来比较你提供的 searchElement 和数组中的每一个元素。它最适合用来查找原始类型（字符串、数字、布尔值、null、undefined）在数组中的位置。它无法直接用来查找对象或数组（除非它们是同一个内存地址的引用）。

  const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
  const targetUser = { id: 1, name: 'Alice' };
  
  // 这会返回 -1，因为 targetUser 和数组中的第一个对象虽然内容一样，但不是同一个对象引用
  console.log(users.indexOf(targetUser)); // 输出: -1

• findIndex(): 这个方法强大得多，因为它接受一个回调函数作为参数。这个回调函数会为数组中的每个元素执行一次，当回调函数返回 true 时，findIndex 就会返回当前元素的索引，然后停止遍历。如果没有任何元素让回调函数返回 true，它就返回 -1。这让 findIndex 在处理复杂数据结构时非常灵活，比如查找对象数组中某个特定属性值的对象。

  const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
  
  // 查找 id 为 2 的用户的索引
  const bobIndex = users.findIndex(user => user.id === 2);
  console.log(bobIndex); // 输出: 1
  
  // 查找 name 包含 'ice' 的用户的索引
  const aliceIndex = users.findIndex(user => user.name.includes('ice'));
  console.log(aliceIndex); // 输出: 0
  
  // 查找一个不存在的条件
  const charlieIndex = users.findIndex(user => user.name === 'Charlie');
  console.log(charlieIndex); // 输出: -1

所以，当你只需要找到一个精确匹配的原始值时，用 indexOf 既简洁又高效。但如果你的查找条件更复杂，或者你正在处理对象数组，那么 findIndex 几乎总是更好的选择。

如何用 indexOf 查找所有匹配元素的索引？

indexOf() 的一个“缺点”是它只会返回第一个找到的元素的索引。如果你想找出某个元素在数组中所有出现的位置，光靠 indexOf() 是不够的，你需要结合循环来反复调用它，并巧妙地利用它的 fromIndex 参数。

思路是这样的：先找到第一个，然后从第一个的下一个位置开始继续找，直到找不到为止。

下面是一个实现这个逻辑的例子：

function findAllIndices(arr, searchElement) {
    const indices = [];
    let currentIndex = arr.indexOf(searchElement); // 首次查找

    while (currentIndex !== -1) {
        indices.push(currentIndex); // 找到了，记录下来
        // 从当前找到的索引的下一个位置开始继续查找
        currentIndex = arr.indexOf(searchElement, currentIndex + 1);
    }
    return indices;
}

const numbers = [1, 2, 3, 2, 4, 2, 5];
const allTwoIndices = findAllIndices(numbers, 2);
console.log(allTwoIndices); // 输出: [1, 3, 5]

const allOneIndices = findAllIndices(numbers, 1);
console.log(allOneIndices); // 输出: [0]

const allSixIndices = findAllIndices(numbers, 6);
console.log(allSixIndices); // 输出: []

这个 while 循环的模式非常经典且实用，它能有效地遍历数组中所有符合条件的元素。每次找到一个，我们就把它的索引存起来，然后把下一次 indexOf 的起始位置设置到当前找到的索引的后一位，这样就能避免重复找到同一个元素，并确保能找到所有后续的匹配项。

indexOf 在处理特殊值（如 NaN 或 undefined）时有什么需要注意的？

在 JavaScript 中，一些特殊的值在比较行为上会有一些“怪异”的地方，这也会影响到 indexOf() 的表现。了解这些能帮助你避免一些潜在的坑。

• NaN (Not-a-Number): 这是最需要注意的一个。indexOf() 无法找到 NaN。这是因为 NaN 在 JavaScript 中有一个独特的性质：它不等于任何值，包括它自己 (NaN === NaN 的结果是 false)。因此，indexOf 依赖的严格相等比较对 NaN 是无效的。

  const weirdNumbers = [1, 2, NaN, 3];
  console.log(weirdNumbers.indexOf(NaN)); // 输出: -1

  如果你需要查找数组中是否存在 NaN，或者找到 NaN 的索引，你不能用 indexOf()。这时，findIndex() 就能派上用场，你可以结合 isNaN() 函数来判断：

  console.log(weirdNumbers.findIndex(item => isNaN(item))); // 输出: 2

  或者，如果你只是想知道数组中是否包含 NaN，Array.prototype.includes() 是一个更好的选择，因为它能正确处理 NaN：

  console.log(weirdNumbers.includes(NaN)); // 输出: true

• undefined: indexOf() 可以正常找到 undefined。

  const mixedValues = [1, undefined, 3, null];
  console.log(mixedValues.indexOf(undefined)); // 输出: 1

• null: indexOf() 同样可以正常找到 null。

  const mixedValues = [1, undefined, 3, null];
  console.log(mixedValues.indexOf(null)); // 输出: 3

总之，indexOf() 是一个非常实用的数组方法，尤其适用于查找原始类型的值。但在处理对象、复杂查找逻辑或 NaN 这样的特殊值时，了解它的局限性并知道何时转向 findIndex() 或其他方法，是写出健壮且高效 JavaScript 代码的关键。

以上就是《JS数组元素索引查找方法》的详细内容，更多关于的资料请关注golang学习网公众号！