面试官问：indexOf 和 findIndex 的区别

刺骨的言语ヽ痛彻心扉 2022-11-16 15:28 186阅读 0赞

`indexOf` 与 `findIndex` 都是查找数组中满足条件的第一个元素的索引

### indexOf ###

> Array.prototype.indexOf()：
> 
> `indexOf()` 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
> 
> 来自：MDN

例如：

const sisters = ['a', 'b', 'c', 'd', 'e'];
    console.log(sisters.indexOf('b'));
    // 1

请注意：**`indexOf()` 使用严格等号(与 `===` 或 triple-equals 使用的方法相同)来比较 `searchElement` 和数组中的元素**

所以，`indexOf` 更多的是用于查找基本类型，如果是对象类型，则是判断是否是同一个对象的引用

let sisters = [{a: 1}, {b: 2}];
    console.log(sisters.indexOf({b: 2}));
    // -1
    
    const an = {b: 2}
    sisters = [{a: 1}, an];
    console.log(sisters.indexOf(an));
    // 1

### findIndex ###

> Array.prototype.findIndex()：
> 
> `findIndex()`方法返回数组中满足提供的测试函数的第一个元素的**索引**。若没有找到对应元素则返回-1。
> 
> 来自：MDN

const sisters = [10, 9, 12, 15, 16];
    const isLargeNumber = (element) => element > 13;
    console.log(sisters.findIndex(isLargeNumber));
    // 3

`findIndex` 期望回调函数作为第一个参数。如果你需要非基本类型数组(例如对象)的索引，或者你的查找条件比一个值更复杂，可以使用这个方法。

### indexOf 与 findIndex 区别（总结） ###

*  `indexOf` ：查找值作为第一个参数，采用 `===` 比较，更多的是用于查找基本类型，如果是对象类型，则是判断是否是同一个对象的引用
 *  `findIndex` ：比较函数作为第一个参数，多用于非基本类型(例如对象)的数组索引查找，或查找条件很复杂

### 源码实现（加深） ###

`indexOf` ：

if (!Array.prototype.indexOf) {
      Array.prototype.indexOf = function(searchElement, fromIndex) {
    
        var k;
        if (this == null) {
          throw new TypeError('"this" is null or not defined');
        }
    
        var O = Object(this);
        var len = O.length >>> 0;
        if (len === 0) {
          return -1;
        }
    
        var n = +fromIndex || 0;
        if (Math.abs(n) === Infinity) {
          n = 0;
        }
        if (n >= len) {
          return -1;
        }
        k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    
        while (k < len) {
          if (k in O && O[k] === searchElement) { // === 匹配
            return k;
          }
          k++;
        }
        return -1;
      };
    }

`findIndex` ：

if (!Array.prototype.findIndex) {
      Object.defineProperty(Array.prototype, 'findIndex', {
        value: function(predicate) {
          if (this == null) {
            throw new TypeError('"this" is null or not defined');
          }
    
          var o = Object(this);
          var len = o.length >>> 0;
    
          if (typeof predicate !== 'function') {
            throw new TypeError('predicate must be a function');
          }
    
          var thisArg = arguments[1];
    
          var k = 0;
          while (k < len) {
            var kValue = o[k];
            if (predicate.call(thisArg, kValue, k, o)) { // 比较函数判断
              return k; 
            }
            k++;
          }
    
          return -1;
        }
      });
    }

来源：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/451

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

![91218907ee520a3ce28d319da6a2e08b.gif][]

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的支持

[91218907ee520a3ce28d319da6a2e08b.gif]: /images/20221022/0c031979c32e459bb06051f45a9d03b3.png