对象字面量支持属性名和方法名简写:同名变量可直接写为{key},函数属性可省略function关键字写为{method(){}},但箭头函数不可简写。

对象字面量的简写语法能让代码更简洁、可读性更强,尤其在变量名与属性名一致,或定义普通方法时特别实用。
简写属性名(当变量名和属性名相同时)
如果已有变量,且想用它作为对象的属性,不用再写 key: key 这种重复形式。
说明:JavaScript 会自动把同名变量名当作属性名,并取其值赋给该属性。
- 传统写法:const name = "Alice"; const age = 25; const user = { name: name, age: age };
- 简写写法:const name = "Alice"; const age = 25; const user = { name, age };
- 支持解构后直接重组:const { x, y } = point; const newPoint = { x, y };
简写方法名(定义普通函数属性)
当对象中某个属性值是函数,且不需要箭头函数或特殊绑定时,可省略 function 关键字和冒号。
说明:这种写法等价于完整方法定义,this 指向仍为当前对象(非箭头函数)。
- 传统写法:const obj = { greet: function() { return "Hello"; } };
- 简写写法:const obj = { greet() { return "Hello"; } };
- 也支持带参数和返回值:const math = { add(a, b) { return a + b; }, square(x) { return x * x; } };
组合使用提升开发效率
实际开发中,属性简写和方法简写经常一起出现,尤其在构造配置对象、组件选项或 API 响应处理时。
- 例如 Vue 或 React 中传入 props 配置:return { loading, error, data, fetchData() { /* ... */ } };
- 创建工具对象更清晰:const utils = { now(), format(date), parse(str) { /* ... */ } };
- 注意:不能简写箭头函数,{ fn: () => {} } 必须显式写,因为箭头函数没有自己的
this,无法用方法简写语法替代。
掌握这两种简写,能显著减少冗余代码,让对象结构一目了然,写起来也更快。不复杂但容易忽略。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











