JavaScript中箭头函数带大括号时array.find返回undefined的原因解析

这两种写法的核心区别在于箭头函数的返回规则：

不带大括号的写法：隐式返回 #

findOne(id) { return this.products.find((item) => item.id === id); }

当箭头函数没有用大括号包裹函数体时，属于隐式返回——箭头后面的表达式（这里是item.id === id）会被自动作为返回值传递给find方法。find会根据这个布尔值判断当前元素是否匹配，找到第一个符合条件的元素就返回它，所以代码能正常工作。

带大括号的写法：需要显式返回 #

findOne(id) { return this.products.find((item) => {item.id === id}); }

一旦用大括号包裹箭头函数的函数体，就进入了显式返回模式。此时大括号里的内容是一个代码块，你必须手动写return语句才能返回值。你的这段代码里，只是写了item.id === id这个表达式，但没有返回它，所以箭头函数默认返回undefined。find方法会把undefined当作false处理，自然找不到匹配的元素，最终返回undefined。

如果想让带大括号的写法生效，只要加上return就行：

findOne(id) { return this.products.find((item) => { return item.id === id; }); }

简单总结：箭头函数不带大括号时自动返回表达式结果；带大括号时必须手动写return指定返回值，否则默认返回undefined。

内容的提问来源于stack exchange，提问作者Alvaro Garzón