ES6 动态计算属性名

摘要：在ES5之前，如果属性名是个变量或者需要动态计算，则只能通过对象.[变量名] 的方式去访问,而且这种动态计算属性名的方式在字面量中是无法使用的

在ES5之前，如果属性名是个变量或者需要动态计算，则只能通过对象.[变量名] 的方式去访问。

<script type="text/javascript">
    var p = {
        name : '李四',
        age : 20
    }
    var attName = 'name';
    console.log(p[attName]) //这里 attName表示的是一个变量名。
</script>

而且这种动态计算属性名的方式在字面量中是无法使用的。

var attName = 'name';
    var p = {
        attName : '李四',  // 这里的attName是属性名，相当于各级p定义了属性名叫 attName的属性。
        age : 20
    }
    console.log(p[attName])  // undefined

在ES6中，把属性名用[ ]括起来，则括号中就可以引用提前定义的变量。

var attName = 'name';
    var p = {
        [attName] : '李四',  // 引用了变量attName。相当于添加了一个属性名为name的属性
        age : 20
    }
    console.log(p[attName])  // 李四

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8933