JavaScript 的数组是开发者常常使用的数据结构之一，常常涉及到对数组的操作。ES6 中提供了一系列方便的数组 API。本文将着重介绍其中一个新的数组方法：findIndex。
导语
findIndex 是 ES6 中新增的数组的查找方法，用于查找数组中符合条件的第一个元素，并返回其下标。可以用它来代替传统的循环方法：for、forEach 等。它与 find 方法很相似，只不过前者返回的是下标，而后者返回的是符合条件的元素本身。
该方法提供了一种更加简洁、直观地写法，避免了一些传统循环方法的问题和缺陷。接下来我们将具体介绍 findIndex 的使用方法及示例。
语法
findIndex() 方法的语法格式如下：
arr.findIndex(callback[, thisArg])
其中，callback 表示当前数组中每个元素要执行的回调函数；thisArg 表示回调函数中 this 引用的对象，也就是指定回调函数中 this 的指向
回调函数有如下参数：
element当前元素值。index当前元素的索引值。array原数组实例。
示范
接下来，我们举几个例子来更具体地说明这个函数。
示例1: 查找符合条件的元素
下面代码将会查找 users 数组中名字为 "Sarah" 的用户元素，返回其下标。
const users = [
{ name: "John Doe", age: 30 },
{ name: "Sarah Smith", age: 24 },
{ name: "Bill Lee", age: 21 },
];
const index = users.findIndex((user) => user.name === "Sarah Smith");
console.log(index); // 输出 1示例2: 找到第一个符合条件的元素
下面代码将会查找 users 数组中年龄小于 30 的用户元素，返回其下标。
const users = [
{ name: "John Doe", age: 30 },
{ name: "Sarah Smith", age: 24 },
{ name: "Bill Lee", age: 21 },
];
const index = users.findIndex((user) => user.age < 30);
console.log(index); // 输出 1示例3: 没有符合条件的元素
下面代码将会查找 users 数组中名字为 "Alice" 的用户元素，因为该数组中没有 "Alice" 这个元素，所以会返回 -1。
const users = [
{ name: "John Doe", age: 30 },
{ name: "Sarah Smith", age: 24 },
{ name: "Bill Lee", age: 21 },
];
const index = users.findIndex((user) => user.name === "Alice");
console.log(index); // 输出 -1##支持性
findIndex 方法是 ES6 中新增的方法，所以不是所有的浏览器都支持。下面是一些常用浏览器对于 findIndex 方法的支持程度:
- Internet Explorer：不支持，但是可以使用 polyfill 来模拟它的功能。
- Chrome：支持。
- Firefox：支持。
- Safari：支持。
- Opera：支持。
总结
本文介绍了 ES6 中新增的数组方法 findIndex，通过几个实例说明了该方法是如何工作的。尽管 findIndex 方法在多数现代浏览器中已经得到支持，但是开发者在使用时应该留意兼容问题和其他潜在的使用风险。在实际的开发中，我们可以通过它来代替传统的循环方法，从而提高代码的简洁性和可读性，提高代码的维护性和开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652e4ef27d4982a6ebf59b60