箭头函数:理解缺失的返回值
在 JavaScript 领域,箭头函数已成为简洁和富有表现力的流行选择代码。然而,使用函数体版本(带有大括号)时可能会出现一个常见的陷阱。
问题:缺少返回值
考虑以下箭头函数:
const f = arg => { arg.toUpperCase(); };
调用时,此函数返回未定义而不是预期值。这是为什么?
揭示隐含返回
在箭头函数中,当使用简洁的函数体(不带花括号)时,会隐式应用 return 语句。这意味着括号内表达式的结果将成为返回值。
简明正文示例:
const f = arg => arg.toUpperCase();
现在,调用此函数将返回所需的字符串:
console.log(f("testing")); // "TESTING"
函数的显式返回Body
但是,当使用花括号时,需要显式的 return 语句来指示应该返回什么。否则,该函数将返回未定义。
显式返回示例:
const f = arg => { return arg.toUpperCase(); };
调用此修改后的函数会产生相同的结果:
console.log(f("testing")); // "TESTING"
记住:隐式返回存在于简洁的箭头函数体中,而显式返回存在在函数体中使用花括号时需要。理解这种区别对于避免代码中出现意外的未定义值至关重要。
以上是为什么带大括号的箭头函数返回'undefined”,除非显式返回?的详细内容。更多信息请关注PHP中文网其他相关文章!