ES7 中的 Array.prototype.find() 和 Array.prototype.findIndex() 方法

ES7 中的 Array.prototype.find() 和 Array.prototype.findIndex() 方法

在 ES6 中，我们已经接触到了 Array 类型的新加强，如 Array.prototype.includes() 和 Array.prototype.fill()。ES7 (2016 年) 又新增了两个数组方法，即 Array.prototype.find() 和 Array.prototype.findIndex()。这两个方法主要用于查找数组中特定的元素，并将其返回。

Array.prototype.find()

Array.prototype.find() 方法用于查找数组中满足条件的第一个元素，并将该元素返回。该方法接收一个回调函数作为参数，该函数用于定义查找的条件。如果找到了满足条件的元素，则返回该元素，否则返回 undefined。

该方法的语法如下：

arr.find(callback(element[, index[, array]])[, thisArg])

其中，callback 是一个必需的回调函数，用来设定查找元素的条件。该回调函数接受三个参数：element 表示正在处理的当前元素，index 表示正在处理的当前元素的下标，array 表示调用该方法的数组。

thisArg 为可选参数，表示执行 callback 函数时的 this 值。

下面是一个简单的例子：

const ages = [20, 18, 22, 23, 20];
const result = ages.find(age => age > 21);
console.log(result); // 22

以上代码表明，查找 ages 数组中第一个大于 21 的元素，并将该元素的值返回。

需要注意的是，Array.prototype.find() 方法返回的是查找到的元素本身，而不是该元素在数组中的下标。

Array.prototype.findIndex()

Array.prototype.findIndex() 方法和 Array.prototype.find() 类似，都是用于查找数组中第一个满足条件的元素。不同之处在于，Array.prototype.findIndex() 方法返回的是满足条件的元素在数组中的下标，而且如果没有找到符合条件的元素则返回 -1。

该方法的语法如下：

arr.findIndex(callback(element[, index[, array]])[, thisArg])

其中的参数意义同 Array.prototype.find() 方法。

以下是一个具体示例：

const fruits = ['apple', 'banana', 'orange'];
const resultIndex = fruits.findIndex(fruit => fruit === 'banana');
console.log(resultIndex); // 1

以上代码表明，查找 fruits 数组中第一个值为 'banana' 的元素，并将其在数组中的下标返回。

需要注意的是，Array.prototype.findIndex() 方法不会对数组进行修改，它只是对数组进行查找并返回符合条件的第一个元素的下标。

总结

Array.prototype.find() 和 Array.prototype.findIndex() 是 ES7 中新增的两个数组方法，它们都用于查找数组中的元素，并将符合条件的元素或其下标返回。

当我们需要在数组中查找某个元素时，使用这两个方法可以让我们的代码更加简洁易读。但是，需要注意的是这两个方法虽然可以代替传统的 for 循环，但是它们底层仍然会遍历整个数组，因此在大数据量的情况下，性能可能会受到影响。

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