ES6 中数组的新方法 find、findIndex 正确使用方法-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，新增了许多有用的数组方法，其中包括 find 和 findIndex。这两个方法都可以用来查找数组中符合条件的元素，但它们的返回值有所不同。本文将详细介绍这两个方法的正确使用方法，以及它们的学习和指导意义。

find

find 方法用于查找符合条件的第一个元素，并返回该元素。如果没有找到符合条件的元素，则返回 undefined。

const arr = [1, 2, 3, 4, 5];

const result = arr.find(item => item > 3);

console.log(result); // 4

在上面的例子中，我们定义了一个数组 arr，然后使用 find 方法查找第一个大于 3 的元素。由于数组中存在符合条件的元素 4，因此 find 方法返回 4。

需要注意的是，find 方法只会返回符合条件的第一个元素。如果数组中存在多个符合条件的元素，也只会返回第一个符合条件的元素。

const arr = [1, 2, 3, 4, 5];

const result = arr.find(item => item > 2);

console.log(result); // 3

在上面的例子中，虽然数组中存在两个符合条件的元素 3 和 4，但 find 方法只会返回第一个符合条件的元素 3。

findIndex

findIndex 方法与 find 方法类似，用于查找符合条件的第一个元素，并返回该元素在数组中的索引值。如果没有找到符合条件的元素，则返回 -1。

const arr = [1, 2, 3, 4, 5];

const index = arr.findIndex(item => item > 3);

console.log(index); // 3

在上面的例子中，我们定义了一个数组 arr，然后使用 findIndex 方法查找第一个大于 3 的元素的索引值。由于数组中存在符合条件的元素 4，因此 findIndex 方法返回 3，即元素 4 在数组中的索引值。

需要注意的是，findIndex 方法也只会返回符合条件的第一个元素的索引值。如果数组中存在多个符合条件的元素，也只会返回第一个符合条件的元素的索引值。

const arr = [1, 2, 3, 4, 5];

const index = arr.findIndex(item => item > 2);

console.log(index); // 2

在上面的例子中，虽然数组中存在两个符合条件的元素 3 和 4，但 findIndex 方法只会返回第一个符合条件的元素 3 在数组中的索引值。

总结

find 和 findIndex 方法都是用于查找符合条件的元素的。它们的不同之处在于，find 方法返回符合条件的第一个元素，而 findIndex 方法返回符合条件的第一个元素的索引值。如果数组中不存在符合条件的元素，则两个方法都会返回特定的值，即 find 方法返回 undefined，findIndex 方法返回 -1。

在实际开发中，我们可以使用 find 和 findIndex 方法来查找符合条件的元素，然后进行相应的操作。例如，我们可以使用 find 方法来查找数组中符合条件的对象，然后修改对象的属性值。或者，我们可以使用 findIndex 方法来查找数组中符合条件的元素的索引值，然后删除该元素。

以上就是 find 和 findIndex 方法的正确使用方法和学习指导意义。希望本文能够对读者有所帮助。

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