ES7 中的数组 includes、find、findIndex 方法详解

ES7 中的数组 includes、find、findIndex 方法详解

在 JavaScript 的数组操作中，ES7 中新增的 includes、find、findIndex 方法可以方便地处理数据的查找和筛选，提高了代码的效率和可读性。本文将详细介绍这三种方法的使用方法和注意事项。

1. includes 方法

includes 方法用于判断数组中是否包含某个元素，返回值为布尔值。其语法如下：

array.includes(valueToFind[, fromIndex])

其中，valueToFind 为要查找的元素，fromIndex 为可选参数，表示从数组的哪个索引位置开始查找。如果省略 fromIndex，则默认从数组的第一个元素开始查找。

示例代码：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

1. find 方法

find 方法用于查找数组中符合条件的第一个元素，返回值为该元素的值。其语法如下：

array.find(callback[, thisArg])

其中，callback 为回调函数，用于判断数组中每个元素是否符合条件。如果找到符合条件的元素，则该方法立即返回该元素的值，否则返回 undefined。thisArg 为可选参数，用于指定 callback 函数中的 this 对象。

示例代码：

const arr = [1, 2, 3, 4, 5];
const result = arr.find(item => item > 3);
console.log(result); // 4

1. findIndex 方法

findIndex 方法与 find 方法类似，用于查找数组中符合条件的第一个元素的索引位置，返回值为该元素的索引。其语法如下：

array.findIndex(callback[, thisArg])

其中，callback 为回调函数，用于判断数组中每个元素是否符合条件。如果找到符合条件的元素，则该方法立即返回该元素的索引位置，否则返回 -1。thisArg 为可选参数，用于指定 callback 函数中的 this 对象。

示例代码：

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex(item => item > 3);
console.log(index); // 3

总结

includes、find、findIndex 方法是 ES7 中新增的数组操作方法，可以方便地处理数据的查找和筛选。在使用这些方法时，需要注意以下几点：

1. includes 方法只能判断数组中是否包含某个元素，不能返回该元素的值或索引位置。

2. find 方法只能返回符合条件的第一个元素的值，不能返回其他符合条件的元素的值或索引位置。

3. findIndex 方法只能返回符合条件的第一个元素的索引位置，不能返回其他符合条件的元素的值或索引位置。

4. 在使用回调函数时，需要注意作用域和 this 对象的指向。

5. 在使用 find 和 findIndex 方法时，需要注意回调函数的返回值必须为布尔值，否则会出现错误。

通过学习这些方法的使用方法和注意事项，可以更加高效地处理数组操作，提高代码的效率和可读性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65619baed2f5e1655dba493b