本文共 920 字，大约阅读时间需要 3 分钟。

technology tidbits about dynamic attribute names in JavaScript

In ES5和以前，如果属性名需要动态计算，通常需要通过对象.[变量名]的方式访问。在这种情况下，字面量（例如{ attName: '王五' }）并不支持引用前定义的变量作为属性名。

作为演示，考虑以下代码：

var attName = 'name';var p = {     name : '王五',     age : 20 };console.log(p[attName]); // 输出: '王五'

这段代码中，p对象中的属性名是直接硬编码的“name”。与此相反，如果我们希望属性名与变量attName一起动态计算：

var attName = 'name';var p = {     [attName] : '王五',     age : 20 };console.log(p[attName]); // 输出: '王五'

通过使用方括号，我们可以在ES6中将已定义的变量作为属性名引用。这一改变使得动态属性名的实现更加方便和直观。

需要注意的是，在字面量中ynamically computed property names仍然需要使用传统的对象.变量名的方式，而不是直接使用方括号。例如：

var p = { attName: '王五' };console.log(p['name']); // 输出: undefined

这样，attName属性的值被硬编码为对象中属性名为"attName"，而不是根据变量attName计算。这反映了在ES6中方括号语法带来的便利性。

学习和应用这一知识点对于理解现代JavaScript对象模型和动态属性访问非常有用。如果你遇到需要在对象中基于变量或表达式动态添加属性的情况，记得使用方括号语法。这不仅能提高代码的可维护性，还能减少错误和使代码更加简洁易读。

摘要：在JavaScript中，动态计算属性名是通过对象.变量名实现的，而在ES6及以上版本中，通过使用方括号括起来的属性名可以直接引用已定义的变量。这些方法简化了动态属性管理和使代码更加灵活。

转载地址：http://exjaz.baihongyu.com/