零基础理解ES6计算属性名与简写方法
用好这两个 ES6 小技巧，你的对象写法从此不一样
你有没有写过这样的代码？
const actions = {}; const prefix = 'USER'; actions[prefix + '_LOGIN'] = { type: 'USER_LOGIN' }; actions[prefix + '_LOGOUT'] = { type: 'USER_LOGOUT' }; // ...后面还有七八个类似的赋值或者定义一个工具对象时，满屏都是function：
const utils = { formatName: function(name) { return name.trim().toUpperCase(); }, isValidEmail: function(email) { // ... }, debounce: function(fn, delay) { // ... } };看着就累，写着也烦。其实从 ES6 开始，JavaScript 已经悄悄给了我们两个“语法糖”来解决这些问题：计算属性名（Computed Property Names）和方法简写（Method Shorthand）。
别被名字吓到——它们一点都不复杂，反而会让你觉得：“啊，早该这样了！”
动态键名不再是难题：计算属性名到底怎么用？
在 ES5 时代，如果你想用变量作为对象的属性名，只能先创建空对象，再通过中括号动态赋值：
var key = 'username'; var obj = {}; obj[key] = 'alice';这没问题，但如果你要一次性定义多个动态属性，逻辑就被拆得七零八落。更糟的是，你没法在对象字面量里直接完成这件事。
ES6 改变了这一切。现在你可以这样写：
const key = 'username'; const obj = { [key]: 'alice' };就这么简单？是的。方括号[]包裹的表达式会在对象初始化时立即求值，并将其结果转为字符串作为属性名。这就是所谓的“计算属性名”。
它能做什么？远比你想的灵活
✅ 字符串拼接：构建标准化 action type
const ENTITY = 'PRODUCT'; const actionTypes = { [`${ENTITY}_FETCH`]: `${ENTITY}_FETCH`, [`${ENTITY}_SAVE`]: `${ENTITY}_SAVE` }; console.log(actionTypes.PRODUCT_FETCH); // "PRODUCT_FETCH"这种模式在 Redux、Vuex 等状态管理库中非常常见，避免了硬编码字符串带来的维护成本。
✅ 条件判断：根据环境切换配置键
const env = 'prod'; const config = { url: 'api.example.com', [env === 'prod' ? 'apiKeyProd' : 'apiKeyDev']: 'xyz123' }; // 结果：{ url: ..., apiKeyProd: 'xyz123' }不需要额外判断分支，一行搞定多环境适配。
✅ 使用 Symbol 做私有属性
const UID = Symbol('id'); const user = { [UID]: 'abc123', name: 'Alice' }; console.log(user[UID]); // 可访问，但不会被枚举或意外覆盖由于 Symbol 的唯一性，它非常适合用来定义不希望被外部轻易访问的“伪私有”字段。
✅ 自动类型转换：数字、布尔也能当键
const obj = { [1 + 2]: 'three', // → '3': 'three' [true]: 'yes', // → 'true': 'yes' [null]: 'nothing' // → 'null': 'nothing' };所有非字符串的键都会被自动.toString()转换。注意这不是 bug，而是设计行为。
⚠️ 小心陷阱：
[{}]会变成'[object Object]'，因为{}转字符串就是这个值。除非你故意要做映射，否则慎用复杂表达式。
方法定义太啰嗦？试试这个“少打六个字母”的写法
还记得以前写对象方法时，总要重复敲function吗？
const player = { play: function() { console.log('Playing...'); }, pause: function() { console.log('Paused.'); } };ES6 允许你省掉function和冒号，直接写成：
const player = { play() { console.log('Playing...'); }, pause() { console.log('Paused.'); } };看起来只是少了几个字符，但实际上意义不小：
- 更像类的方法写法（
class Player { play() {} }），风格统一； - 减少视觉噪音，一眼就能看出这是“行为”而非“数据”；
- 社区普遍采纳，已成为现代 JS 的标准实践。
它和箭头函数有什么区别？
很多人容易混淆下面两种写法：
// 写法一：方法简写（推荐用于对象方法） const obj1 = { greet() { console.log(this.name); } }; // 写法二：箭头函数赋值（this 绑定不同！） const obj2 = { greet: () => { console.log(this.name); // this 不指向 obj2！ } };关键区别在于this的绑定方式：
- 方法简写中的
this指向调用它的对象实例； - 箭头函数中的
this是词法作用域，继承自外层上下文。
所以，在 Vue/React 组件、普通对象方法中，应优先使用方法简写，而不是箭头函数。
还支持生成器方法！
你甚至可以用*配合方法简写定义生成器：
const iterableObj = { *values() { yield 1; yield 2; yield 3; } }; for (let val of iterableObj.values()) { console.log(val); // 输出 1, 2, 3 }简洁又强大。
实战场景：它们在哪最常用？
场景一：状态管理中的 action type 生成
在 Redux 或 Vuex 中，我们经常需要定义一系列命名规范的动作类型。过去容易出错且难维护：
// ❌ 老旧写法：分散、易拼错 const USER_LOGIN = 'USER_LOGIN'; const USER_LOGOUT = 'USER_LOGOUT';现在可以集中管理：
const TYPE_PREFIX = 'USER'; const actionTypes = { [`${TYPE_PREFIX}_LOGIN`]: `${TYPE_PREFIX}_LOGIN`, [`${TYPE_PREFIX}_LOGOUT`]: `${TYPE_PREFIX}_LOGOUT` };还能进一步封装成工厂函数：
function createTypes(prefix) { return { [`${prefix}_FETCH`]: `${prefix}_FETCH`, [`${prefix}_SUCCESS`]: `${prefix}_SUCCESS`, [`${prefix}_FAIL`]: `${prefix}_FAIL` }; } const postActions = createTypes('POST'); console.log(postActions.POST_FETCH); // "POST_FETCH"干净、可复用、不易出错。
场景二：组件中的 methods 定义（Vue / React）
看看 Vue 组件里的methods：
export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; }, decrement() { this.count--; }, reset() { this.count = 0; } } };没有一个function关键字，清爽得像是在读一份接口文档。React 类组件虽然用class，但原理一致——方法简写让代码更贴近自然语言。
场景三：工具库组织（Utils）
当你写一个通用函数集合时，方法简写能让整个结构更清晰：
const Validator = { isEmail(str) { return /\S+@\S+\.\S+/.test(str); }, isPhone(str) { return /^1[3-9]\d{9}$/.test(str); }, required(value) { return value != null && String(value).trim() !== ''; } };对比老写法，少了冗余关键字，多了专业感。
常见误区与最佳实践
✅ 推荐做法
| 场景 | 建议 |
|---|---|
| 对象中定义行为函数 | 使用方法简写methodName() {} |
| 动态生成属性名 | 使用[expression]计算属性名 |
| 多环境配置 | 结合三元运算符 + 模板字符串 |
| 私有属性需求 | 使用Symbol+ 计算属性 |
❌ 应避免的情况
// 1. 过度嵌套，难以理解 const obj = { [`key_${(() => Math.random())()}`]: 'value' }; // 2. 在循环中频繁创建含复杂计算属性的对象（影响性能） for (let i = 0; i < 10000; i++) { const item = { [`prop_${i}`]: i }; // 每次都解析表达式 }这类写法虽然合法，但会让后续维护的人抓狂。
TypeScript 用户注意
TypeScript 能很好地推断方法简写的类型，但对于复杂的计算属性名，有时需要手动标注：
const KEY = 'status'; interface ApiResponse { status: string; } const response: ApiResponse = { [KEY]: 'success' // TS 可能报错，需确保 KEY 是字面量或联合类型 };必要时可用类型断言或常量收敛处理。
兼容性提醒
这些特性属于 ES6 标准，IE 全系不支持。但在现代开发中：
- 使用 Webpack/Babel 构建项目时，会被自动转译；
- Node.js 6+、Chrome 47+ 均原生支持；
- 若需兼容低版本浏览器，请确保已配置 Babel 插件（如
@babel/plugin-transform-computed-properties和@babel/plugin-transform-shorthand-properties）。
写在最后
计算属性名和方法简写看似只是“小改进”，实则深刻改变了我们编写 JavaScript 对象的方式。
它们不是炫技，而是真正解决了实际开发中的痛点：
- 减少样板代码→ 提升效率；
- 增强动态能力→ 提高灵活性；
- 统一编码风格→ 改善协作体验。
掌握这两个特性，不只是学会新语法，更是融入现代 JavaScript 开发范式的起点。
下次当你再想写obj[someKey] = value或者method: function() {}的时候，不妨停下来想想：能不能用[someKey]和method() {}来代替？你会发现，代码不仅变短了，还变得更优雅了。
如果你正在重构旧项目，不妨把这两招当作“最小成本优化”的首选项。改几行代码，换来的是长期的可维护性和团队接受度。
欢迎在评论区分享你在项目中是如何使用计算属性名或方法简写的，也许下一个灵感就来自你的实践！