js 如何使用findIndex查找元素的索引位置-js教程-PHP中文网

js 如何使用findIndex查找元素的索引位置

畫卷琴夢

发布： 2025-08-20 10:56:01

原创

955人浏览过

findindex 方法返回数组中第一个满足测试函数条件的元素索引，若无则返回-1；1. 它在找到首个匹配元素后立即停止，相比循环更高效；2. 支持复杂条件判断，如对象属性匹配；3. 与 indexof 不同，findindex 可自定义搜索逻辑而非仅严格相等；4. 在空数组上调用始终返回-1；5. 对于不支持的老浏览器，可通过 polyfill 实现兼容。

js 如何使用findIndex查找元素的索引位置

findIndex 查找元素索引，简单来说，就是给你一个数组，让你找到第一个符合特定条件的元素的下标。

解决方案

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber)); // Expected output: 3

登录后复制

上面的例子很简单，

isLargeNumber

登录后复制

就是我们的测试函数，它检查元素是否大于 13。

findIndex

登录后复制

找到第一个大于 13 的元素（130），然后返回它的索引 3。

findIndex 的性能考量：为什么它比循环查找更快？

findIndex 在找到符合条件的第一个元素后就会停止搜索，这意味着在大型数组中，如果目标元素位于数组的前面部分，findIndex 的效率会非常高。而传统的循环查找可能需要遍历整个数组才能找到目标元素，或者直到循环结束才能确定元素不存在。当然，如果目标元素位于数组末尾，或者根本不存在，findIndex 的性能可能与循环查找差不多。但是，通常情况下，findIndex 的平均性能更好。

findIndex 的高级用法：不仅仅是简单的相等比较

findIndex 的测试函数可以非常灵活，不仅仅局限于简单的相等比较。你可以使用复杂的逻辑来定义搜索条件。

PhotoG

PhotoG是全球首个内容营销端对端智能体

121

查看详情

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
  return fruit.name === 'cherries';
}

console.log(inventory.findIndex(findCherries)); // 2

登录后复制

在这个例子中，我们查找

inventory

登录后复制

数组中

name

登录后复制

属性为 'cherries' 的对象的索引。

findCherries

登录后复制

函数定义了复杂的搜索条件，findIndex 能够轻松应对。

findIndex 与 indexOf 的区别：选择哪个更合适？

indexOf 只能查找数组中是否包含某个特定的值，并返回第一个匹配项的索引。它使用严格相等（===）进行比较。findIndex 则更加灵活，它允许你通过一个测试函数来定义搜索条件，可以进行更复杂的匹配。

如果你只需要查找数组中是否存在某个特定的值，并且使用严格相等进行比较，那么 indexOf 是一个不错的选择，它更简单直接。
如果你需要根据复杂的条件来查找元素，或者需要查找对象数组中符合特定属性值的元素，那么 findIndex 更加适合。

findIndex 在空数组中的行为：会发生什么？

如果在空数组上调用

findIndex

登录后复制

，无论你提供什么测试函数，它总是会立即返回 -1。因为空数组没有任何元素可以进行测试。

const emptyArray = [];

const alwaysTrue = () => true;

console.log(emptyArray.findIndex(alwaysTrue)); // -1

登录后复制

findIndex 的兼容性问题：老版本浏览器怎么办？

findIndex 是 ES5 中引入的，这意味着在一些老版本的浏览器中可能不支持。为了解决兼容性问题，可以使用 polyfill。 Polyfill 是一段代码，用于在不支持某个功能的浏览器中提供该功能的实现。

if (!Array.prototype.findIndex) {
  Array.prototype.findIndex = function(predicate) {
    if (this == null) {
      throw new TypeError('Array.prototype.findIndex called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;

    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return i;
      }
    }
    return -1;
  };
}

登录后复制

这段代码检查浏览器是否支持