本文详解如何将箭头函数作为回调参数传入自定义 find 函数，并在遍历数组时动态执行该函数以匹配目标对象，帮助初学者理解“未声明却可直接使用的参数”（如 toy）本质是回调的形参，而非全局变量。

核心理解

本文详解如何将箭头函数作为回调参数传入自定义 find 函数，并在遍历数组时动态执行该函数以匹配目标对象，帮助初学者理解“未声明却可直接使用的参数”（如 toy）本质是回调的形参，而非全局变量。

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

你遇到的 (toy) => toy.type === 'car' 正是一个箭头函数。它本身不是值，而是一个可执行的逻辑模板。

其中 toy 并非预先定义的变量，而是该函数的形参（parameter）。它仅在函数被调用时，由调用方动态传入实参（argument）。

示例代码怎么理解

来看你的示例：

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

const carToy = find(toys, (toy) => toy.type === 'car');

这里的 (toy) => toy.type === 'car'，是作为一个整体传给 find 的第二个参数。

它不会在写下来的那一刻立刻执行。也不会因此报错，因为 toy 本质上只是一个占位符。

理解这点并不难。它有点像数学里的函数 f(x) = x，其中 x 先只是个形式参数。真正开始计算，是在 f(3) 被调用的那一刻。

放到这里也是同样的道理：这个箭头函数只有在 find 内部遍历数组、对每个对象逐个调用时才会真正触发。

到了那一步，toy 才会拿到具体的值，比如 {type: "car", color: "red"}。

为什么原始写法会报错

因此，你的原始实现：

function find(array, toy) {
console.log(toy); // → [Function (anonymous)] —— 对，它是个函数！
toy(); //  报错：没传参数，toy 里 `toy.type` 的 `toy` 是 undefined
}

失败的根本原因在于：你试图无参调用该函数。

但箭头函数依赖外部传入的对象，才能访问其属性。

正确做法

正确做法是：在 find 中遍历数组，对每个元素 item 调用该函数，并检查返回值是否为 true。

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（谓词），这是通用术语，指“返回布尔值的函数”，用于描述“满足什么条件”。

完整运行示例

现在完整运行：

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

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

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

这就是高阶函数的思路

再往深一层看，这其实就是 Ja vaScript 高阶函数（Higher-Order Function）的典型思路。

• find 属于高阶函数，因为它把函数作为参数接收；
• (toy) => toy.type === 'car' 则是回调函数（callback）。

说白了，它把“怎么查找”和“按什么条件匹配”拆开了。于是 find 才能真正做到可复用。

find(toys, t => t.color === 'blue');// → {type: "ball", color: "blue"}
find(toys, t => t.type.includes('bear')); // → {type: "teddy-bear", color: "brown"}

注意事项

• 箭头函数没有自己的 this、arguments、super 或 new.target，适合写简洁回调；
• 形参名（如 toy）完全自由，t、item、obj 效果一致，关键是调用时传入正确的对象；
• 原生 Array.prototype.find() 已提供相同功能，本练习重在理解机制，而非替代内置方法；
• 若需兼容旧环境，可用传统函数表达式：function(toy) { return toy.type === 'car'; }，语义完全等价。

总结

关键点在于：toy 不是全局变量，而是回调函数的形参。

只有当 find 在遍历数组时调用这个回调，并把当前对象传进去，toy 才会有具体值。

掌握这种“函数即数据”的思维，是你迈向函数式编程与现代前端框架（如 React 中的 filter、map、事件处理器）的关键一步。

推荐延伸学习：MDN 文档《Arrow functions》与《Higher-order functions》。