数组查找新体验！ES6 find 让你一眼找到你要的！

2023-10-12 12:01:20

在 JavaScript 中，数组是一种非常常见的数据结构，用于存储和管理各种类型的数据。当我们需要查找数组中的特定元素时，传统的 for 循环和 indexOf 方法可能会显得效率低下且容易出错。幸运的是，ES6 引入了 find 方法，为我们提供了一种更简洁、更高效的解决方案。

什么是 find 方法？

find 方法是 ES6 中新增的一种数组方法，用于在数组中查找满足特定条件的第一个元素。它通过一个比较函数和一个可选的 thisArg 对象，帮助我们轻松找到数组中满足特定条件的元素。

find 方法的语法

find(callbackFn(element, index, array), thisArg)

callbackFn：一个比较函数，用于比较数组中的每个元素。该函数接受三个参数：
- element：当前比较的元素。
- index：当前比较的元素索引。
- array：要搜索的数组。
thisArg：可选的 thisArg 对象，指定 callbackFn 函数的 this 值。

find 方法的返回值

如果 find 方法找到满足条件的元素，它将返回该元素值；否则返回 undefined。

find 方法的用法

以下示例展示了 find 方法的强大功能：

// 查找数组中第一个大于 10 的元素
const firstGreaterThan10 = [1, 2, 3, 4, 5, 11, 6, 7, 8, 9].find(element => element > 10);

console.log(firstGreaterThan10); // 11

// 查找数组中第一个等于 "apple" 的元素
const firstApple = ["banana", "orange", "apple", "pear", "grape"].find(element => element === "apple");

console.log(firstApple); // apple

// 使用 thisArg 对象指定 callbackFn 函数的 this 值
const numbers = [1, 2, 3, 4, 5];
const thisArg = {
  multiplier: 2
};

const firstEvenNumber = numbers.find(function(element) {
  return element * this.multiplier % 2 === 0;
}, thisArg);

console.log(firstEvenNumber); // 2

编写自定义 myFind 函数

除了使用内置的 find 方法，你还可以编写自定义的 myFind 函数来实现类似的功能。以下是实现步骤：

定义 myFind 函数，接受数组和比较函数作为参数。
使用 for 循环遍历数组中的每个元素。
在循环中，将当前元素作为参数传递给比较函数。
如果比较函数返回 true，返回当前元素。
如果比较函数返回 false，继续遍历下一个元素。
如果遍历完整个数组，返回 undefined。

以下是 myFind 函数的示例代码：

function myFind(array, callbackFn) {
  for (let i = 0; i < array.length; i++) {
    if (callbackFn(array[i], i, array)) {
      return array[i];
    }
  }

  return undefined;
}