在 JavaScript 数组中查找对象的索引

Ashok Chapagai 2023年1月30日 2021年10月2日
  1. 在 JavaScript 中使用 findIndex() 方法在数组中查找对象的索引
  2. 使用 lodash 库在 JavaScript 数组中查找对象的索引
在 JavaScript 数组中查找对象的索引

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

在 JavaScript 中使用 findIndex() 方法在数组中查找对象的索引

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

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

findIndex() 的语法如下所示。

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

或者,可以将 indexarr 传递给回调函数。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,通过消除处理数组、数字、对象、字符串等的麻烦,使 JavaScript 变得更容易。我们可以从官方网站下载 lodash.js 文件并加载到我们的网站上,如下所示。

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

我们可以在本地将它安装为 npm i --save lodashyarn 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
Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub

相关文章 - JavaScript Array

相关文章 - JavaScript Object