es6属性简写要求变量名与属性名相同且变量已声明,适用于函数返回对象、组合配置、解构后重建等场景,禁用字面量简写,需保持风格一致并配合eslint规范。

ES6 属性简写能直接减少重复书写,让对象构建更干净、更直观。核心就一条:变量名和属性名相同时,只写一次变量名即可。
什么时候能用属性简写
必须同时满足两个条件:当前作用域存在同名变量,且该变量已声明(非 undefined 或未定义)。
- ✅ 可用:const name = 'Tom'; const user = { name }; → { name: 'Tom' }
- ❌ 不可用:const user = { 'Tom' };(语法错误)或 { name: 'Tom' } 强行改写为 { 'Tom' }(不合法)
- ⚠️ 注意:const name = 'Tom'; { name }; 若在函数内但外层有同名变量被遮蔽,可能报 ReferenceError
常见高价值使用场景
不是所有地方都值得简写,优先用在逻辑清晰、变量语义明确的位置。
-
函数返回对象:参数直接转为对象属性,省去冗长赋值
function createPost(title, content, author) { return { title, content, author }; } -
组合配置对象:从多个已有变量快速拼出配置
const port = 3000; const env = 'dev'; const debug = true;
const config = { port, env, debug }; -
与解构搭配使用:先解构再简写,形成简洁的数据流
const { x, y, z } = coords;
const point3D = { x, y, z, distance() { return Math.sqrt(x*x + y*y + z*z); } };
容易踩的坑
简写是语法糖,不是万能胶,用错反而降低可读性或引发错误。
- 不要对字面量值使用简写,比如 { 'Alice' } 是非法的,{ name: 'Alice' } 就不能缩成那样
- 避免在对象中混用风格,比如 { name, age: age, email } —— 要么全简写,要么全显式,保持一致性
- 注意变量是否真的存在:在 if 块或异步回调里声明的变量,若提前用于简写,会触发 ReferenceError
配合 ESLint 自动保障
团队协作中,靠人眼检查容易遗漏。启用 ESLint 的 object-shorthand 规则(推荐设为 "always"),工具会在你该简写却没简写时自动提示。
- 配置示例:"object-shorthand": ["error", "always"]
- 效果:{ name: name } 会被标记为警告,鼓励改为 { name }
- 好处:统一风格、减少审查负担、新人也能快速写出规范代码











