在 JavaScript 数组中查找对象的索引
-
在 JavaScript 中使用
findIndex()
方法在数组中查找对象的索引 -
使用
lodash
库在 JavaScript 数组中查找对象的索引
本文将探讨 findIndex()
方法以及如何使用 lodash
在 JavaScript 数组中查找对象的索引。
在 JavaScript 中使用 findIndex()
方法在数组中查找对象的索引
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
,通过消除处理数组、数字、对象、字符串等的麻烦,使 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
相关文章 - JavaScript Array
- 检查数组是否包含 JavaScript 中的值
- 在 JavaScript 中创建特定长度的数组
- 在 JavaScript 中将数组转换为字符串
- 在 JavaScript 中从数组中删除第一个元素
- 在 JavaScript 中从数组中搜索对象
- 在 JavaScript 中将参数转换为数组