在 javascript 中,箭头函数要返回对象字面量,必须将对象字面量包裹在圆括号 () 中。如果不加括号,javascript 引擎会将花括号 {} 解析为代码块而非对象,导致返回 undefined。因此,正确的做法是使用 (obj) => obj 这种隐式返回形式,或者使用显式的 return 语句。

不加括号时为什么返回 undefined
当省略大括号和 return 关键字时,箭头函数采用“隐式返回”模式。此时,等号右侧的内容被视为一个表达式。如果直接写 { key: 'value' },引擎会将其识别为一个空的代码块(block),其中的 key: 'value' 被解析为一个带有标签的表达式语句,该语句不产生返回值,最终函数返回 undefined。

const func = () => { key: 'value' };
console.log(func()); // 输出: undefined这段代码展示了错误的写法。函数体被解释为代码块,内部的属性定义失效,调用函数后得到的是 undefined 而不是预期的对象。
立即学习“Java免费学习笔记(深入)”;
如何正确返回对象字面量
要解决这个问题,只需在对象字面量的外层加上圆括号。这样,引擎就会知道这是一个需要求值的表达式,从而正确返回对象。语法结构为 ({ key: 'value' })。这种方式简洁且符合箭头函数的简写规范。

const func = () => ({ key: 'value' });
console.log(func()); // 输出: { key: 'value' }这段代码展示了正确的写法。圆括号包裹了对象字面量,使其成为有效的表达式。调用函数后,控制台输出了包含指定属性的对象。这是处理单行返回对象的标准做法。
基于具体输入的对象键名冲突问题
当返回的对象中包含与函数参数同名的键时,可以使用 ES6 的简写属性名语法。例如,如果函数接收一个名为 name 的参数,并想返回一个包含 name 属性的对象,可以直接写 ({ name })。这相当于 ({ name: name })。这种写法在处理动态数据时非常常见,能减少冗余代码。
const createPerson = (name) => ({ name, age: 10 });
console.log(createPerson('Alice')); // 输出: { name: 'Alice', age: 10 }在这个例子中,函数接收 name 参数,并返回一个包含 name 和 age 的对象。由于使用了简写语法,name 的值自动取自同名参数。验证结果显示,返回的对象正确包含了传入的字符串值,证明了简写语法在隐式返回中的有效性。


















