JavaScript 数组 findIndex 方法

在本教程中，您将学习如何使用 Array findIndex() 方法来查找满足指定测试条件第一个元素的索引。

JavaScript 数组 findIndex() 方法简介

ES6 在 Array.prototype 添加一个名为 findIndex() 的新方法，它允许您查找数组中满足测试函数的第一个元素。

findIndex() 方法返回满足测试函数元素的索引，如果没有元素通过测试，则返回  -1。下面是 findIndex()方法的语法：

findIndex(testFn(element[, index[, array]])[, thisArg])

findIndex() 有两个参数：

testFn

testFn 是一个对数组中的每个元素执行的函数，直到函数返回 true，表明已找到该元素。

testFn 接受三个参数：

• element 是数组中的当前元素。
• index 是当前正在处理的元素的索引。
• array 是被 findIndex() 调用的数组。

thisArg

thisArg 是一个可选的参数，当 callback 执行时它用于设置函数内的 this 对象。如果省略 thisArg 参数，findIndex() 函数将会使用作为函数内部的 this 值。

findIndex() 对数组中的每个元素执行 testFn 函数，直到 testFn 返回真值表示找到该元素，该值是可以强制转换为 true 的任何值。

一旦 findIndex() 找到这样的元素，它立即返回该元素的索引。

JavaScript 数组 findIndex() 示例

让我们看看一些使用 JavaScript 数组 findIndex() 方法的示例。

简单的 Array findIndex() 方法

以下示例返回数组中第一次出现数字 7 的索引ranks：

let ranks = [1, 5, 7, 8, 10, 7];
let index = ranks.findIndex(rank => rank === 7);
console.log(index);

输出：

2

具有复杂条件的 Array findIndex() 方法

本示例使用 findIndex() 方法返回 ranks 数组中索引 2  之后第一次出现数字 7 的索引：

let ranks = [1, 5, 7, 8, 10, 7];

let index = ranks.findIndex(
    (rank, index) => rank === 7 && index > 2
);

console.log(index);

输出：

5

对对象数组使用 Array findIndex() 方法

以下示例使用 Array findIndex 方法搜索第一个价格大于 1000 产品的索引：

const products = [
  { name: 'Phone', price: 999 },
  { name: 'Computer', price: 1999 },
  { name: 'Tablet', price: 995 },
];

const index = products.findIndex(product => product.price > 1000);

console.log(index); // 1

结论

JavaScript 数组 findIndex() 方法查找满足指定测试条件第一个元素的索引。

myfreax

微信公众号

支付宝打赏