ES6引入对象属性简写和方法缩写语法糖以提升简洁性与可读性:属性简写要求变量名与属性名完全一致,方法缩写省略function关键字;二者需规范使用,避免歧义、作用域错误或JSON误用,并推荐ESLint object-shorthand规则统一风格。

JavaScript中对象属性简写和方法缩写是ES6引入的常用语法糖,能提升代码简洁性和可读性,但需遵循合理规范,避免歧义或可维护性下降。
属性简写:仅适用于变量名与属性名完全一致
当变量名与要定义的对象属性名相同时,可省略冒号和变量名,直接写变量名。
- ✅ 正确用法:const name = "Alice"; const user = { name }; 等价于 { name: name }
- ❌ 避免混淆:不要用于值为字面量或表达式的情况,如 { name: "Alice" } 不能简写为 { "Alice" }(语法错误)
- ⚠️ 注意作用域:简写依赖当前作用域中存在同名绑定,若变量未声明或被遮蔽,会报错 ReferenceError
方法缩写:省略 function 关键字和冒号
对象中定义函数属性时,若不需箭头函数特性且无动态 this 需求,优先使用方法缩写语法。
- ✅ 推荐写法:const obj = { init() { console.log("ready"); } }; 等价于 init: function() { ... }
- ❌ 不适用场景:需要绑定固定 this(如事件回调)或使用 arguments、super 等特殊语义时,应显式用 function 或箭头函数
- ⚠️ 不能简写的函数:异步方法、生成器、带参数默认值或解构参数的函数仍可缩写,但需确保语法合法,例如 run(val = 1) { } 是允许的
组合使用时保持一致性与可读性
属性简写与方法缩写常一起出现在对象字面量中,此时应统一风格,避免混用冗余写法。
立即学习“Java免费学习笔记(深入)”;
- ✅ 清晰示例:const { x, y } = coords; const point = { x, y, distance() { return Math.hypot(x, y); } };
- ❌ 削弱可读性:const point = { x: x, y: y, distance: function() { ... } }; —— 在支持ES6的环境中显得冗余
- ? 团队建议:在 ESLint 中启用 object-shorthand 规则(推荐配置为 "always"),自动提示可简写而未简写的情况
注意兼容性与工具链支持
属性/方法缩写是标准ES6语法,现代浏览器和 Node.js 环境均支持,但需确认构建工具配置。
- ✅ Babel 默认处理:若项目已配置 @babel/preset-env,无需额外操作
- ⚠️ TypeScript 用户:类型推导对简写完全友好,但若属性名来自类型别名或泛型,需确保变量有明确类型标注
- ❌ 不要用于 JSON:JSON 格式不支持任何简写,仅限 JS 对象字面量中使用


















