在 JavaScript 中，数组是一种完全不可或缺的数据类型，其通过内置的方法和属性，实现了各种不同的操作和转换，以满足开发者的需求。其中，findIndex 方法是一种非常有用的数组方法，用于查找满足特定条件的第一个元素，并返回其索引值。在 ECMAScript 2021 中，这一方法得到了优化和拓展，本文将对其使用方法进行详解。
findIndex 方法的基本语法
findIndex 方法是一种属于 JavaScript 数组的内置方法，用于查找数组中符合特定要求的第一个元素，语法如下所示：
array.findIndex(callback(element[, index[, array]])[, thisArg])
上述语法中，array 表示要查找的目标数组，callback 是一个回调函数，用于设定需要满足的条件。回调函数中的 element 参数代表当前正在遍历的数组元素，index 参数代表当前元素的索引，array 参数代表当前正在遍历的数组本身。
如果 findIndex 方法未能找到满足条件的元素，则返回 -1。
findIndex 方法的实例应用
下面以实例说明 findIndex 方法的应用。假设有以下数组：
const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig'];
我们希望找到数组中以 c 开头的第一个元素的索引。使用 findIndex 方法可以轻松实现：
const index = fruits.findIndex((fruit) => fruit.startsWith('c'));
console.log(index); // 2在上述代码中，使用 findIndex 方法查找以 c 开头的第一个元素，回调函数 (fruit) => fruit.startsWith('c') 中的 fruit 参数代表当前正在遍历的数组元素，使用 startsWith 方法判断以 c 开头的元素。在本例中，第一个符合条件的元素是 cherry，其索引为 2。
ECMAScript 2021 中 findIndex 方法的拓展
在 ECMAScript 2021 中，findIndex 方法被进行了一些优化和拓展。除了支持其他版本的方法，在 JavaScript 中，在回调函数中可以访问去重后的数组，上下文。
以下是一个示例，演示了这些扩展功能：
-- -------------------- ---- -------
----- ------ - --------- --------- ------------ --------- ------- ------------- -------
----- ------- - ---
----- -------- - ------- ------ ------ -- -
------------------ ------ -------
-- ----------------------- -
--------------------
-
--
----- ----- - -------------------------- - -- - ---
-------------------
---------------------在上述代码中，使用 findIndex 方法索引 fruits 数组，回调函数 (fruit, index, array) 中，被加入了两个参数，分别是当前的回调元素和该元素的上下文。
其中，fruit, index, array 分别代表当次迭代的元素，元素的整型 index 索引值，以及搜索的数组对象。同时，callback 函数中的 this 可以引用自定义的上下文对象。
在这个例子中，回调函数首先分别打印日志，以显示正在遍历的元素、索引和数组的信息。接下来，如果当前元素以b开头，则将其索引值存储在数组 indices 中。最后，输出符合条件的第一个元素的索引，以及所有找到的元素的位置。
在返回的例子中，第一个符合条件的元素是 blueberry，其索引为 2，因为我们使用了自定义的上下文对象，所以这个上下文可打印为 { c: 3 }。同时，回调函数在 blueberry和elderberry 位置上被调用，数组 indices 存储的是这些位置的索引值。
结束语
ECMAScript 2021 中 findIndex 方法的拓展功能增强了这个方法的实用性和便捷性。希望本文中对 findIndex 方法的使用方法进行详解的介绍，可以对你在日常开发中的使用做出一定的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67827626935627c90009db08
