ES7 中使用 Array.prototype.findIndex() 查找元素的索引位置
在前端开发中，经常需要在数组中查找特定元素的索引位置。在 ES6 中，我们可以使用 Array.prototype.indexOf() 或 Array.prototype.lastIndexOf() 方法来实现。但是，这些方法有一个缺点，就是无法使用回调函数进行自定义查找。ES7 中新增了 Array.prototype.findIndex() 方法，可以方便地使用回调函数查找元素的索引位置。
Array.prototype.findIndex() 方法的语法如下：
---------------------------------- ------- ---------- ---------
参数说明：
- callback：回调函数，用来测试数组中的每个元素。返回值为 true 表示找到了目标元素，false 表示未找到。
- element：当前被测试的元素。
- index（可选）：当前被测试元素的索引位置。
- array（可选）：被调用的数组。
- thisArg（可选）：执行回调函数时的 this 值。
Array.prototype.findIndex() 方法会从数组的第一个元素开始，依次调用回调函数，直到找到第一个返回 true 的元素。如果数组中不存在符合条件的元素，则返回 -1。
下面是一个使用 Array.prototype.findIndex() 方法查找元素索引位置的示例代码：
----- ------ - --------- --------- --------- --------- -- -- -------- ------- ----- ----- - -------------------------- -- ------- --- ---------- ------------------- -- ----
在上面的示例代码中，我们定义了一个 fruits 数组，然后使用 Array.prototype.findIndex() 方法查找 "orange" 元素的索引位置。回调函数中的 element 参数代表当前被测试的元素，我们通过判断 element 是否等于 "orange" 来确定是否找到了目标元素。最终，我们得到了 "orange" 元素的索引位置 2。
除了使用相等运算符（== 或 ===）进行比较外，我们还可以使用其他运算符（如 <、>、<=、>= 等）进行自定义比较。例如，我们可以使用以下代码查找数组中第一个大于 3 的元素的索引位置：
----- ------- - --- -- -- -- --- -- ------- - -------- ----- ----- - --------------------------- -- ------- - --- ------------------- -- ----
在上面的示例代码中，我们定义了一个 numbers 数组，然后使用 Array.prototype.findIndex() 方法查找第一个大于 3 的元素的索引位置。回调函数中的 element 参数代表当前被测试的元素，我们通过判断 element 是否大于 3 来确定是否找到了目标元素。最终，我们得到了第一个大于 3 的元素的索引位置 3。
总结
使用 Array.prototype.findIndex() 方法可以方便地查找数组中符合条件的元素的索引位置。回调函数可以自定义查找条件，使得方法具有更大的灵活性。在实际开发中，我们可以结合其他数组方法（如 Array.prototype.filter()、Array.prototype.map() 等）来实现复杂的数据处理逻辑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f2c5fc2b3ccec22fb5e65c