文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载导读本文来自本仓库javascript/目录下的实战笔记讲解 ES6 引入的**对象简写属性名shorthand property names**语法。当你手里已经有一批命名规范的变量希望把它们打包成对象时简写语法可以让冗长的key: value显式写法大幅精简。读完本文你将掌握简写属性名的基本用法、它与显式写法的等价关系以及如何与解构赋值、计算属性名、对象展开等周边 ES6 特性组合使用写出更简洁、更不易出错的初始化代码。从冗余的显式初始化说起假设我们已经有了三个变量const one 1, two 2, three 3;现在要把它们放进一个对象里。传统ES5 及以前的写法是逐个显式指定key: valueconst obj1 { one: one, two: two, three: three }; // Object { one: 1, two: 2, three: 3 }这段代码完全正确但one: one、two: two这种写法明显是“自己重复自己”属性名和变量名完全相同右边的one只是把左边写过的one再抄一遍。当对象字段一多这种重复会让代码变得臃肿也增加了手误的机会。ES6 简写属性名一次省略两处ES6 提供了shorthand property names简写属性名语法。只要变量名与想生成的属性名一致就可以直接写变量名让它同时充当“键名”和“取值来源”const obj2 { one, two, three }; // Object { one: 1, two: 2, three: 3 }obj1与obj2的最终结果完全相同都是Object { one: 1, two: 2, three: 3 }但obj2的写法更简洁。它在语义上完全等价于{ one: one, two: two, three: three }并非省略了取值而是由语言层面自动完成了“键名 变量名、值 变量值”的映射。实战价值哪里最能体现简写的好处简写属性名在实际代码中最常见的收益场景有三类1. 返回值直接打包函数计算结果往往以局部变量形式存在简写语法让返回对象的构建一目了然function parseUser(raw) { const name raw.name.trim(); const email raw.email.toLowerCase(); const isActive raw.active true; // 直接简写打包键名与变量名一一对应 return { name, email, isActive }; }2. 与解构赋值天然配对解构赋值把对象里的值“取”进同名变量简写属性名再把变量“装”回同名键二者互为逆操作关于解构的更多用法仓库javascript/目录下还有 destructure-with-access-to-nested-value-and-parent-value.md、destructuring-the-rest-of-an-array.md 等笔记可继续阅读const { one, two, three } obj2; // 取出 const copy { one, two, three }; // 装回等价于 { one: one, two: two, three: three }3. 从函数参数构造配置对象接收“命名好的参数”再组装成对象传下去是函数式组合中的常见模式。与周边 ES6 对象特性的搭配简写属性名通常不是孤立使用的仓库中其他 JavaScript 笔记记录了它最常见的搭档与计算属性名computed property names配合键名来自变量时简写无法覆盖这种动态场景需要改用[表达式]语法。详见 computed-property-names-in-es6.mdconst dynamic1 hello, dynamic2 world; const obj { [dynamic1 dynamic2]: true, // 键名由表达式动态求值 [5 * 11]: false }; // { 55: false, helloworld: true }简写属性名解决“键名 变量名”的静态场景计算属性名解决“键名需要动态求值”的场景二者互补。与对象展开spread配合做条件装配需要根据某个布尔条件决定是否把一批键值对放进对象时简写与展开运算符可以一起使用。相关笔记见 conditionally-include-pairs-in-an-object.mdconst isArriving true; const payload { ...(isArriving { hello: world }), // 条件成立才展开 ...{ one, two, three } // 简写后整体展开 };展开合并时的 nil 值语义用展开合并对象时后出现的null/undefined值同样会覆盖前面的真实值这对“从简写变量组装后再合并”的场景是一个需要留意的行为差异详见 spread-merging-objects-includes-nil-values.md。使用前提与注意事项键名必须与变量名完全一致简写才成立。如果你需要userName之外的键名例如下划线风格的user_name则必须退回显式{ user_name: userName }写法。只适用于“变量 → 属性”的单向映射需要求值得到键名的场景如上面的[dynamic1 dynamic2]不属于简写范畴。简写语法是 ES6ECMAScript 2015标准特性现代浏览器与 Node.js 均已原生支持无需转译即可在当代环境中直接使用若需兼容老旧运行时仍可借助 Babel 等工具转译后使用仓库 transforming-es6-and-jsx-with-babel-6.md 记录了相关转译配置思路。代码风格上简写属性名已进入几乎所有主流风格指南如 Airbnb、Standard的推荐写法配合 ESLint 的object-shorthand规则可以直接在 CI 中强制使用。小结ES6 的简写属性名是一个“语法糖”级别的小特性它不改变对象语义只消除key: value中的无谓重复让“用同名变量初始化对象”这件事变得自然、简洁。把它与解构赋值、计算属性名、对象展开等特性配合使用是编写现代 JavaScript 时构建配置对象与数据载荷的常用基本功。本仓库 javascript/object-initialization-with-shorthand-property-names.md 即是这一特性的原始出处更多 ES6 对象相关技巧可继续翻阅仓库javascript/目录下的系列笔记。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐ES6 计算属性名Computed Property Names在对象字面量中动态生成键ES6 计算属性名Computed Property Names在对象字面量中动态生成键 导读 在 JavaScript 中对象属性的键名经常取决于运行文档教程知识库Bourbon compact-shorthand简化CSS简写属性的工具Bourbon compact shorthand简化CSS简写属性的工具 在CSS开发中简写属性如margin、padding、border可以大幅减前端如何借助ultimate-go掌握Go Mocking实战不改动API也能让第三方包轻松可测试的完整指南如何借助ultimate go掌握Go Mocking实战不改动API也能让第三方包轻松可测试的完整指南 如果你正在学习 Go语言测试 ultimate g示例工程教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考