零基础理解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）。