本文详解如何将箭函数作为回调函数传入自定义 find 函数，通过遍历数组并执行该函数判断匹配项，最终返回首个符合条件的对象。重点解析箭函数的参数绑定机制、调用时机与实际应用场景。

本文详解如何将箭函数作为回调函数传入自定义 find 函数，通过遍历数组并执行该函数判断匹配项，最终返回首个符合条件的对象。重点解析箭函数的参数绑定机制、调用时机与实际应用场景。

核心概念

在 Ja vaScript 中，函数是一等公民（first-class citizen）。这意味着函数可以像字符串、数字一样被赋值、作为参数传递，甚至作为返回值。

你遇到的 (toy) => toy.type === 'car' 正是一个箭函数（Arrow Function）。它本质上是一个匿名函数表达式，接收一个参数，返回一个布尔值。

这里的 toy 并非预先定义的变量，而是函数的形参（parameter）。它的具体值会在函数被调用时由调用方传入。

作为参数传入时，真正传递的是什么

比如这段 find(toys, (toy) => toy.type === 'car')，真正作为整体传给 find 第二个参数的，其实是整个箭函数。

至于 toy，它只在这个箭函数内部起作用。你可以把它理解为“当前轮到被检查的那个数组元素”。

离开这个函数，它就不存在，也不会在外层作用域里被声明或赋值。

所以，如果你在 find 的函数体中直接写 toy() 或 toy.type，就一定会报错。原因很简单：这个函数根本还没接收到任何实参，自然也谈不上被“激活”。

正确写法

正确做法是：在 find 内部遍历数组，并对每个元素（如 array[i]）显式调用该箭函数。

function find(array, predicate) {
for (let i = 0; i < array.length; i++) {
if (predicate(array[i])) { //  将当前对象作为实参传入箭函数
return array[i];
}
}
return undefined; // 未找到时返回 undefined（更符合原生 Array.prototype.find 行为）
}

注意：我们把第二个参数命名为 predicate（谓词函数）。这是通用术语，指“返回布尔值、用于判断条件是否成立的函数”，比 toy 更准确体现其语义。

示例演示

配合你的测试数据：

const toys = [
{ type: "car", color: "red" },
{ type: "ball", color: "blue" },
{ type: "teddy-bear", color: "brown" }
];

const carToy = find(toys, (toy) => toy.type === 'car');
console.log(carToy); // → { type: "car", color: "red" }

执行流程

• find 遍历 toys[0]，即 {type: "car", color: "red"}；
• 调用 predicate(toys[0])，即 (toy) => toy.type === 'car' 接收该对象作为 toy；
• 表达式 toy.type === 'car' 计算为 true；
• 立即返回 toys[0]，结束查找。

常见误区提醒

• 不要写 toy()：箭函数不是立即执行的，它需要你提供参数才能运行；
• 不要试图访问 toy.type：toy 是函数，不是对象，.type 会触发 Cannot read property 'type' of undefined；
• 使用 for...of 或 forEach 同样可行，但需注意 forEach 无法中途 return，推荐 for 循环或 for...of 配合 break；
• 可进一步增强健壮性：检查 typeof predicate === 'function'，避免传入非函数类型。

本质理解

说到底，这套模式其实就是 Ja vaScript 原生 Array.prototype.find() 背后的实现思路。

把这一点吃透，高阶函数（Higher-Order Function）和函数式编程的基础能力也就真正入门了。

核心就在于把逻辑拆开、把耦合降下来、把复用性提上去。

而这恰恰也是现代前端开发中常见的关键范式，比如 React 的回调机制、Redux 的 selector。