JavaScript面试题解惑：箭头函数作为find函数参数的用法

问题场景 #

作为初/中级JavaScript开发者，面试中遇到一道练习题：编写名为find的函数，接收两个参数（数组、带单个参数的箭头函数），在数组中找到符合条件的对象并返回。但无法理解箭头函数(toy) => (toy.type === 'car')的作用、求值方式，困惑于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); // expected output: {type: "car", color: "red"}

自己编写的错误代码 #

function find(array, toy) {
    console.log(toy); // [Function (anonymous)]
    toy(); // TypeError: Cannot read properties of undefined (reading 'type')
    console.log(toy()); // TypeError: Cannot read properties of undefined (reading 'type')
} 

原以为toy会是字符串"car"，但实际是匿名函数，调用报错，卡了很久没搞懂，需要解决思路和箭头函数学习资源。

核心问题解析 #

1. 箭头函数在这里的作用 #

你传递给find的第二个参数不是字符串，而是一个判断条件回调函数。这个箭头函数的作用是：接收数组里的每一个元素作为参数，返回布尔值（true/false），用来告诉find函数当前元素是否符合查找条件。

(toy) => (toy.type === 'car')拆解来看：

• toy是箭头函数的参数，它代表find遍历数组时的当前元素，不是提前定义好的变量，而是在find内部遍历过程中，每次把数组里的对象传进来的。
• toy.type === 'car'是判断逻辑，当当前元素的type属性等于car时返回true，否则返回false。

2. 正确实现find函数的思路 #

你的错误在于把第二个参数当成了普通值，实际上需要遍历数组，把每个元素传给这个回调函数，判断是否返回true，找到第一个符合条件的元素就返回它：

function find(array, conditionFn) {
    // 遍历数组的每一个元素
    for (let i = 0; i < array.length; i++) {
        const currentItem = array[i];
        // 把当前元素传给条件函数，判断是否符合要求
        if (conditionFn(currentItem)) {
            // 找到符合条件的元素，直接返回
            return currentItem;
        }
    }
    // 遍历完未找到，返回undefined（和原生Array.find行为一致）
    return undefined;
}

测试这个函数，就能得到预期的{type: "car", color: "red"}。

3. 箭头函数基础要点 #

• 箭头函数是简化的函数写法，本质还是函数，可以作为参数传递（这是JavaScript函数式编程的基础）。
• 箭头函数的参数是在调用时传入的，就像普通函数function fn(a) { ... }里的a，是调用fn(123)时才被赋值的，这里的toy同理。
• 若箭头函数只有一个参数，可省略括号；若函数体只有一行返回语句，可省略大括号和return关键字，所以(toy) => (toy.type === 'car')和toy => toy.type === 'car'完全等价。

4. 学习资源推荐 #

• MDN JavaScript文档：直接查阅箭头函数章节，覆盖语法、使用场景和注意事项，扎实基础概念。
• JavaScript高级程序设计：书中函数章节会讲清回调函数、箭头函数的设计意图和使用场景，适合系统学习。
• 实战练习：多写自定义数组方法（比如filter、map），用回调函数实现，加深理解。

内容的提问来源于stack exchange，提问作者Ajedama