JSfindIndex查找元素索引方法详解

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JS使用findIndex查找元素索引方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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

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

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;
  };
}

这段代码检查浏览器是否支持 findIndex，如果不支持，则提供一个 findIndex 的实现。使用 polyfill 可以确保你的代码在各种浏览器中都能正常运行。

今天关于《JSfindIndex查找元素索引方法详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！