ES10 中新增的 Array.findIndex() 和 Array.find() 方法详解

在 ES10 中，Array 中新增了两个方法 findIndex() 和 find()，能够更加方便快捷地操作数组，同时提高开发效率。本文将详细介绍这两个方法的用法及其指导意义，并提供示例代码进行演示。

Array.findIndex()

首先，我们先来看 findIndex() 方法。此方法用于查找数组中符合给定条件的第一个元素的位置，并返回其下标。如果数组中没有符合条件的元素，则返回 -1。语法如下：

array.findIndex(function(currentValue, index, arr), thisValue)

其中，function 参数接收三个参数：

1. currentValue，当前元素的值。
2. index，当前元素的下标。
3. arr，当前数组。

而 thisValue 参数则是在函数中指定 this 值。如果省略，那么 this 的值将默认为全局对象。

下面是一个示例代码，演示如何使用 findIndex() 方法在数组中查找值为 5 的元素的下标：

const array = [1, 2, 3, 4, 5];
const index = array.findIndex(function(currentValue) {
  return currentValue === 5;
});
console.log(index); // 4

Array.find()

接下来，我们了解 find() 方法。此方法用于查找数组中符合给定条件的第一个元素，并返回该元素。如果数组中没有符合条件的元素，则返回 undefined。语法如下：

array.find(function(currentValue, index, arr), thisValue)

参数与 findIndex() 方法相同。其中，function 参数需要返回一个布尔值，表示当前元素是否符合条件。

下面是一个示例代码，演示如何使用 find() 方法在数组中查找值小于等于 2 的第一个元素：

const array = [1, 2, 3, 4, 5];
const element = array.find(function(currentValue) {
  return currentValue <= 2;
});
console.log(element); // 1

指导意义

这两个方法的出现，为开发者提供了方便快捷的操作数组的方法。使用它们能够使代码更加简洁易懂，同时提高开发效率。

除了上述示例外，这两个方法还能够与其他 ES6 的新特性进行结合使用，比如箭头函数与展开运算符，可以进一步简化代码。同时，它们也能够被用于一些比较复杂的场景，比如在对象数组中查找符合条件的对象等等。

总之，掌握这两个方法，并能够灵活运用，能够让我们的代码更加高效并且易于维护。

总结

本文详细介绍了 findIndex() 和 find() 方法的用法，以及它们的指导意义和示例代码。它们是 ES10 新增的操作数组的方法，能够提高开发效率，从而帮助我们更加高效地完成开发工作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b17398add4f0e0ffab2019