详解ES6数组方法find()、findIndex()的总结

简介

在ES6中，数组方法新增了许多实用的功能，包括find()和findIndex()。这两个方法常用于数组中搜索特定元素，并返回符合条件的元素。下面我们就来详细讲解下这两个方法的使用。

find()

find()方法用于查找符合指定条件的第一个数组元素，并返回该元素。如果没有找到匹配的元素，则返回undefined。

在使用find()方法时，我们需要传入一个回调函数作为参数，这个回调函数将会在数组的每个元素上执行一次。当回调函数返回一个真值时，find()方法返回该元素，并停止执行。否则，遍历完整个数组后，返回undefined。

下面是find()方法的语法：

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

callback函数接受三个参数：

• element：当前迭代的元素值
• index：当前迭代的元素下标
• array：原始数组

还可以传递一个可选的thisArg参数，用于指定回调函数在执行时的this值。

下面是一个简单的例子，演示如何使用find()方法找到第一个符合条件的元素：

const array = [5, 12, 8, 130, 44];

const found = array.find(element => element > 10);

console.log(found);  // 输出：12

在这个例子中，find()方法遍历了数组中的每个元素，并将其作为callback函数的element参数传递。当element的值大于10时，callback函数返回一个真值，find()方法返回该元素，并停止执行。

findIndex()

除了find()外，还有一个类似的方法叫做findIndex()。这个方法也用于查找符合条件的第一个数组元素，但是它返回的是找到元素的索引。如果没有找到匹配的元素，则返回-1。

findIndex()的使用方式与find()类似，也需要传入一个回调函数作为参数。回调函数返回一个真值时，findIndex()方法返回该元素的索引，并停止执行。否则，遍历完整个数组后，返回-1。

下面是findIndex()方法的语法：

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

回调函数的参数与find()方法相同。

下面是一个简单的例子，演示如何使用findIndex()方法找到第一个符合条件的元素的索引：

const array = [5, 12, 8, 130, 44];

const foundIndex = array.findIndex(element => element > 10);

console.log(foundIndex);  // 输出：1

在这个例子中，findIndex()方法遍历了数组中的每个元素，并将其作为callback函数的element参数传递。当element的值大于10时，callback函数返回一个真值，findIndex()方法返回该元素的索引1，并停止执行。

示例说明

示例1：使用find()方法查找符合条件的对象

const users = [
  { name: "John", age: 25 },
  { name: "Tom", age: 30 },
  { name: "Jane", age: 28 }
];

const user = users.find(u => u.age === 30);

console.log(user);  // 输出：{ name: "Tom", age: 30 }

在这个例子中，find()方法遍历了users数组中的每个对象，当u.age等于30时，callback函数返回一个真值，find()方法返回该对象。

示例2：使用findIndex()方法查找符合条件的对象的索引

const users = [
  { name: "John", age: 25 },
  { name: "Tom", age: 30 },
  { name: "Jane", age: 28 }
];

const userIndex = users.findIndex(u => u.age === 30);

console.log(userIndex);  // 输出：1

在这个例子中，findIndex()方法遍历了users数组中的每个对象，当u.age等于30时，callback函数返回一个真值，findIndex()方法返回该对象在数组中的索引1。