JavaScript 数组 findIndex() 方法

摘要：在本教程中，您将学习如何使用 数组 findIndex() 方法查找满足给定测试的第一个元素。

JavaScript 数组 findIndex() 方法简介

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

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

以下是 findIndex() 方法的语法

findIndex(testFn(element[, index[, array]])[, thisArg])Code language: CSS (css)

findIndex() 接受两个参数

1) testFn

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

testFn 接受三个参数

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

2) thisArg

thisArg 是一个可选对象，用于在执行 callback 时使用 this。如果您省略 thisArg 参数，findIndex() 函数将使用 undefined。

findIndex() 在数组中的每个元素上执行 testFn，直到找到 testFn 返回真值的元素（即强制转换为 true 的值）。

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

JavaScript 数组 findIndex() 示例

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

1) 使用简单数组示例的 Array findIndex() 方法

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

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

输出

2    

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);Code language: JavaScript (javascript)

输出

5

3) 使用对象数组的 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); // 1Code language: JavaScript (javascript)

总结

• 使用 JavaScript 数组 findIndex() 方法查找满足给定测试的第一个元素。