JS中直接赋值对象与箭头函数返回对象的差异及选型建议

代码示例 #

语句1：直接赋值

const fooOne = { a: 1, b: 2 };
const barOne = fooOne;

语句2：箭头函数返回对象

const fooTwo = () => ({ a: 1, b: 2 });
const barTwo = fooTwo();

性能差异 #

• 语句1逻辑直接：一次性创建一个对象，再将该对象的引用赋值给barOne，全程无函数调用的额外开销，执行效率最高。
• 语句2多了一层函数调用：先定义箭头函数fooTwo，调用时才在内部创建对象返回。现代JS引擎虽对箭头函数有优化，但函数调用本身仍会产生微小的栈操作开销——若在循环、高频执行场景中，这种差异会被放大。

内存占用差异 #

• 语句1中fooOne和barOne指向同一个对象实例，内存仅存储一份{a:1, b:2}的数据，内存占用极低。
• 语句2每次调用fooTwo()都会生成全新的对象实例，哪怕内容完全一致，也会占用独立内存空间；此外，箭头函数本身也会占用少量内存存储函数定义。

推荐用法及原因 #

• 若仅需一个固定不变的对象，优先使用语句1：代码更简洁，性能更好，内存占用更少，可读性也更强。
• 仅当需要动态生成对象时，语句2的写法才有意义——比如每次调用需创建新对象，或对象属性需根据参数动态计算：

  const createUser = (name, age) => ({ name, age, id: Date.now() });
  const user1 = createUser("Alice", 25);
  const user2 = createUser("Bob", 30);
  

  这种场景下，函数可封装对象创建逻辑，实现代码复用。

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