在现代前端开发中，JavaScript 是一门不可或缺的语言。而随着 ECMAScript 更新的不断推出，JavaScript 的功能和性能也得到了极大的提升。其中，ES7 添加了 Array.prototype.findIndex() 方法，使得寻找某个特定元素在数组中的索引变得更加简单高效。在本文中，我们将学习和探讨使用 ES7 中的 Array.prototype.findIndex() 方法，从而加深对 JavaScript 的理解和应用。
概述
Array.prototype.findIndex() 是一个在数组中查找元素的方法，它返回在数组中第一个符合条件的元素的索引。如果没有找到，则返回 -1。类似于 Array.prototype.filter() 方法，不同之处在于，它返回的是一个索引值而非元素值。Array.prototype.findIndex() 方法可以接收一个回调函数，用来设定符合条件的判断标准。
用法
Array.prototype.findIndex() 可以像如下这样调用：
array.findIndex(callback(element[, index[, array]]),[, thisArg])
其中，callback 是一个回调函数，代表要用来判断的标准。它的参数如下：
- element - 当前遍历的元素。
- index (可选) - 当前遍历的元素的索引。
- array (可选) - 当前遍历的数组。
这个回调函数可以返回一个布尔值，表示当前元素是否符合条件。
thisArg (可选) 是用来设置回调函数内部 this 的值，如果不设置，则默认指向全局对象。
下面是一个简单的例子：
const array = [1, 2, 3, 4, 5]; const evenIndex = array.findIndex((element, index) => index % 2 === 0); console.log(evenIndex); // 0
这个例子中，我们定义了一个数组 array，然后使用 findIndex() 方法在数组中查找第一个偶数索引。由于数组索引从 0 开始计数，因此符合条件的元素应该是 1。在回调函数中，我们通过 index % 2 === 0 的方式来判断当前元素索引是否为偶数。最后，我们打印了 evenIndex 的值，可以看到输出是 0，符合预期。
接下来，让我们看一个更复杂的例子：
-- -------------------- ---- ------- ----- ------ - - - ----- -------- ------ ---- -- - ----- --------- ------ ---- -- - ----- --------- ------ ---- -- - ----- -------- ------ ---- -- - ----- ------- ------ ---- - -- ----- ------ - ---------------------- -- ---------- --- ---------- -------------------- -- -
这个例子中，我们定义了一个数组 fruits，其中每个元素都是一个包含 name 和 price 属性的水果对象。我们使用 findIndex() 方法在 fruits 中查找第一个 name 属性等于 'orange' 的水果对象。在回调函数中，我们使用 fruit.name === 'orange' 的方式来判断当前元素是否名为橙子。最后，我们打印了 result 的值，可以看到输出是 2，也符合我们的期望。
注意事项
虽然 Array.prototype.findIndex() 很好用，但有一些需要注意的地方。在使用 findIndex() 方法时，我们需要注意以下几点：
- 回调函数中一定要返回一个布尔值
- 在调用回调函数时，会自动跳过 undefined 类型的元素
- 在回调函数中使用 break、continue 和 return 语句均无效
需要特别注意的是，Array.prototype.findIndex() 方法是一个 ES7 的方法，如果在低版本的浏览器中使用它，会出现语法错误。如果需要在低版本浏览器中使用这个方法，可以使用 polyfill 或者使用其他库（比如 Lodash）来实现相同的功能。
结论
在本文中，我们学习了使用 ES7 中的 Array.prototype.findIndex() 方法来查找符合条件的数组元素的索引。我们了解了它的用法、回调函数的参数和注意事项等。掌握了这个方法之后，我们可以更加高效地处理数组中的数据。在实际开发中，我们应该根据自己的需求合理使用这个方法，从而提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e9c15e884a3e30f288e69