JavaScript 专题（九）数组中查找指定元素

比眉伴天荒 2022-12-20 12:47 153阅读 0赞

# JavaScript 专题（九）数组中查找指定元素 #

> 上一篇文章中，我们了解了数组扁平化的思想，并学习了 lodash 是如何处理数组扁平化的。  
> 这次我们来讨论**在数组中查找元素**时所用的一些方法，并且参考lodash来实现我们自己的工具方法

### 文章目录 ###

*   *  一、findIndex 和 findLastIndex
     *   *   *  1.1 findIndex
             *  1.2 findLastIndex
             *  1.3 合并 findIndex 和 findLastIndex
     *  二、sortIndex
     *   *   *  2.1 遍历
             *  2.2 二分法
     *  三、indexOf 和 lastIndexOf
     *   *   *  3.1 indexOf 的第一版实现
             *  3.2 indexOf 和 lastIndexOf 通用第一版
             *  3.3 indexOf 和 lastIndexOf 通用第二版
     *  参考
     *  写在最后

## 一、findIndex 和 findLastIndex ##

#### 1.1 findIndex ####

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

const array1 = [5, 12, 8, 130, 44];
    
    const isLargeNumber = (element) => element > 13;
    
    console.log(array1.findIndex(isLargeNumber));
    // expected output: 3

**实现**

Array.prototype.newFindIndex = function(callback) { 
      const _arr = this;
      const len = _arr.length;
      for (let i = 0; i < len; i++) { 
        if (callback(_arr[i], i, _arr)) { 
          return i;
        }
      }
      return -1;
    };
    
    const array1 = [5, 12, 8, 130, 44];
    const isLargeNumber = (element) => element > 13;
    console.log(array1.newFindIndex(isLargeNumber));
    // 3

#### 1.2 findLastIndex ####

同样当我们倒叙查找首个满足条件的方法时，可以这样写：

Array.prototype.newFindlastIndex = function(callback) { 
      const _arr = this;
      const len = _arr.length;
      for (let i = len - 1; i >= 0; i--) { 
        if (callback(_arr[i], i, _arr)) { 
          return i;
        }
      }
      return -1;
    };
    
    const array1 = [5, 12, 8, 130, 44];
    const isLargeNumber = (element) => element > 13;
    console.log(array1.newFindlastIndex(isLargeNumber));
    // 4

上面的代码，和正序查找很相似，仅仅改变遍历的条件。

#### 1.3 合并 findIndex 和 findLastIndex ####

大家可以看到，除了循环的条件不同，两个方法几乎一模一样，参考 lodash，我们将两个方法精简一下

/** * @private * @param {Array} array The array to inspect. * @param {Function} predicate The function invoked per iteration. * @param {boolean} [fromRight] 从右向左查找 * @returns {number} 返回第一个符合条件元素的下标或-1 */
    function baseFindIndex(array, predicate, fromRight) { 
      const {  length } = array;
      let index = fromRight ? length : -1; // 确定下标的边界
    
      while (fromRight ? index-- : ++index < length) { 
        // index-- 用于倒序边界
        // ++index 用于正序的边界
        if (predicate(array[index], index, array)) { 
          return index;
        }
      }
      return -1;
    }

再来看看它的兄弟——`underscore` 的思路就是利用传参的不同，返回不同的函数。

关于 `findIndex` 我们就告一段落了～，再来看看新的场景和实现吧！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]

## 二、sortIndex ##

在一个排好序的数组中找到 `value` 对应的位置，即保证插入数组后，依然保持有序的状态。

const arr = [1, 3, 5];
    sortedIndex(arr, 0); // 0
    // 不需要插入arr

那么这个又该如何实现呢？

#### 2.1 遍历 ####

遍历大家都能想到，虽然它不一定最优解：

function sortIndex(array, value) { 
      for (let i = 0; i < array.length; i++) { 
        if (array[i] > value) { 
          return i;
        }
      }
      return array.length;
    }

#### 2.2 二分法 ####

## 三、indexOf 和 lastIndexOf ##

*  `indexOf()`：返回在数组中可以找到一个给定元素的**第一个**索引，如果不存在则返回-1。从数组的前面向后查找，从 fromIndex 处开始。
 *  `lastIndexOf()` ：返回指定元素在数组中的**最后一个**的索引，如果不存在则返回-1。从数组的后面向前查找，从 fromIndex 处开始。

#### 3.1 indexOf 的第一版实现 ####

function indexOf(array, value) { 
      for (let i = 0; i < array.length; i++) { 
        if (array[i] === value) { 
          return i;
        }
      }
      return -1;
    }

emmmm…在看过 findIndex 和 lastFindIndex 的实现后，indexOf 也要整整齐齐的啊～

#### 3.2 indexOf 和 lastIndexOf 通用第一版 ####

通过参数来创建不同的查找方法

#### 3.3 indexOf 和 lastIndexOf 通用第二版 ####

这一次，我们允许指定查找位置，我们来看看 fromIndex 的作用：

> 设定开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回 -1。  
> 如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即 -1 表示从最后一个元素开始查找，-2 表示从倒数第二个元素开始查找 ，以此类推。  
> 注意：如果参数中提供的索引值是一个负值，仍然从前向后查询数组。如果抵消后的索引值仍小于 0，则整个数组都将会被查询。其默认值为 0。

写到这里我们在数组中查找元素就结束了，自己实现的和`loadsh`或`underscore`还是有很大区别的，如果大家对上面三节的代码任意有更好的实现，请一定写在留言区哦～

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 1]

## 参考 ##

*  [学underscore在数组中查找指定元素][underscore]
 *  [lodash][]

## 写在最后 ##

**JavaScript 系列：**

1.  [《JavaScript 内功进阶系列》（已完结）][JavaScript]
2.  [《JavaScript 专项系列》（持续更新）][JavaScript 1]

**关于我**

*  花名：余光（沉迷 JS，虚心学习中）
 *  WX：j565017805

**其他沉淀**

*  [Js版LeetCode题解][Js_LeetCode]
 *  [前端进阶笔记][Link 1]
 *  [我的 CSDN 博客][CSDN]
 *  [我的 GitHub][GitHub]

这是[文章所在 GitHub 仓库的传送门][GitHub 1]，如果真的对您有所帮助，希望可以点个 star，这是对我最大的鼓励 ～

![20200602155947301.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4689051575284266a2052bdc7f02b9c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/a8c0b3b5317c4f18998bd7209667ce98.png
[underscore]: https://github.com/mqyqingfeng/Blog/issues/37
[lodash]: https://www.lodashjs.com/
[JavaScript]: https://blog.csdn.net/jbj6568839z/article/details/103161970
[JavaScript 1]: https://blog.csdn.net/jbj6568839z/category_10204368.html
[Js_LeetCode]: https://webbj97.github.io/leetCode-Js/
[Link 1]: https://webbj97.github.io/summary/
[CSDN]: https://yuguang.blog.csdn.net/
[GitHub]: https://github.com/webbj97/
[GitHub 1]: https://github.com/webbj97/summary
[20200602155947301.png]: https://img-blog.csdnimg.cn/20200602155947301.png