迹忆客 专注技术分享

本文将探讨 findIndex() 方法以及如何使用 lodash 在 JavaScript 数组中查找对象的索引。

ES6 向 Array.prototype 添加了一个名为 findIndex() 的新方法，该方法返回数组中通过提供的测试的第一个元素。findIndex() 方法返回满足测试函数的元素的索引，如果没有元素通过测试，则返回 -1。findIndex() 最适合具有非原始类型（例如，对象）的数组来查找项目的索引。

我们提供回调作为 Array.prototype.findIndex() 中的第一个参数。如果数组的索引是非原始的，则此方法很有用。如果数组索引不仅仅是值，我们可以使用此方法。返回与指定条件匹配的第一个元素后，findIndex() 将停止检查数组中是否存在数组中的剩余项。

findIndex() 的语法如下所示。

array.findIndex(function(currentValue, index, arr))

或者，可以将 index 和 arr 传递给回调函数。index 选项指向数组中当前元素的索引，而 arr 是当前元素所属的数组对象。如果数组中指定的条件不匹配，则 findIndex() 返回 -1。

假设我们有以下原始类型的数组，我们想找到年龄超过 18 的项目的索引。然后，我们可以使用 findIndex() 来找到第一个符合条件的项目的索引指定的。

示例代码：

const ages = [3, 10, 17, 23, 52, 20];
let index = ages.findIndex( age => age > 18);
console.log(index);

输出：

3

由于匹配指定条件的第一个项目的索引为 3，因为它大于 18，因此我们得到索引的值为 3。

现在我们可以使用相同的逻辑来查找与我们使用 findIndex() 方法指定的条件匹配的对象的索引。我们可以使用 findIndex() 来查找获得 B 级成绩的人的索引。

示例代码：

const Result = [
  {
    name:'John',
    grade: 'A',
  },
  {
    name:'Ben',
    grade: 'C',
  },
  {
    name:'Anthony',
    grade: 'B',
  },
  {
    name:'Tim',
    grade: 'B-',
  },
]

const index = Result.findIndex( (element) => element.grade === 'B');
console.log(index)

输出：

2

在这里，findIndex() 与 Result 数组一起使用，该数组以 JavaScript 对象的形式保存我们的数据。我们已经实现了箭头函数，它也在 ES6 中引入，作为带有 findIndex() 方法的回调函数。我们已将 element 传递给回调函数，该函数将对象的当前值保存在我们循环遍历的数组中。

我们可以使用轻量级库 lodash，通过消除处理数组、数字、对象、字符串等的麻烦，使 JavaScript 变得更容易。我们可以从官方网站下载 lodash.js 文件并加载到我们的网站上，如下所示。

<script src="lodash.js"> </script>

我们可以在本地将它安装为 npm i --save lodash 或 yarn add lodash。一切都设置好后，我们可以使用 _.findIndex() 方法。语法如下所示。

_.findIndex(array, [predicate=_.identity], [fromIndex=0])

这里，参数 array 表示我们需要处理的数组。选项 [predicate=_.identity] 是每次迭代调用的函数。第三个选项 [fromIndex=0] 是可选的，可用于设置开始迭代的起点。

我们使用在上述方法中创建的数组来演示 lodash 方法。

代码示例：

var index = _.findIndex(Result, {grade: 'B'})
console.log(index);

输出：

2