es6对象字面量简写语法包含属性简写(如{name, age})、方法简写(如fetch(){...})和计算属性名(如[prefix+'_timeout']:5000),三者组合可减少冗余、提升可读性与可维护性。

ES6 对象字面量的简写语法不是为了炫技,而是从根源上减少视觉噪音和逻辑冗余,让对象结构一目了然。
属性简写:去掉重复的 key: value
当变量名和期望的属性名一致时,直接写变量名即可,不用再写一遍冒号和值。
- 传统写法:
const name = 'Lucy'; const age = 26; const user = { name: name, age: age }; - ES6 简写:
const user = { name, age }; - 适用场景:函数返回值、配置对象、表单数据组装等,比如
return { id, title, createdAt }; - 注意:只对合法标识符有效,
{ 'user-id': id }或{ 123: value }不能简写
方法简写:告别 function 和冒号
对象里定义普通函数时,省略 function 关键字和冒号,写成 methodName() { ... } 即可。
- 传统写法:
const api = { fetch: function() { return fetch('/data'); } }; - ES6 简写:
const api = { fetch() { return fetch('/data'); } }; - 支持完整函数特性:参数、默认值、
this绑定、多语句块,行为与传统写法完全一致 - 不适用于箭头函数或 getter/setter,但
async method() {}是合法的
计算属性名:动态键名一步到位
用方括号包裹表达式,直接在对象字面量中生成键名,避免先建空对象再赋值的繁琐步骤。
- 例如:
const prefix = 'api'; const config = { [prefix + '_timeout']: 5000 };→{ api_timeout: 5000 } - 常用于事件处理器命名:
{ [`on${type}`]() { /* 处理逻辑 */ } } - 可与方法简写组合,但不能和属性简写混用:
{ [key] }会报错,必须写成{ [key]: value }
组合使用让配置类代码更聚焦
三者配合特别适合构建 API 封装、状态初始化、组件 props 等场景,把“怎么建对象”这个动作压缩到最简,注意力自然落在“建什么”上。
- 比如封装一个请求工具:
const request = { baseUrl, timeout, get(url) { return fetch(`${baseUrl}${url}`, { signal: AbortSignal.timeout(timeout) }); } }; - 再比如初始化状态:
const state = { loading, error, data, [`${entity}List`]: [] }; - 关键效果:减少中间变量、避免键值重复、消除无意义的语法符号,代码密度提升,可维护性增强
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











