在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]) // 李四

ES6 动态计算属性名的更多相关文章

  1. js动态的属性名如何取该属性的值

    var cls={cn1:"nihao",cn2="made",cn3="shuide"};var index=2;//可变获取cn2的值 ...

  2. ES6学习笔记--属性名表达式

    1.直接用标识符作为属性名: obj.foo = true 2.用表达式作为属性名: obj['a'+'bc'] = 123 //相当于 obj['abc'] = 123 3.ES6 允许字面量定义对 ...

  3. es6中的属性名表达式

    代码如下: 问题: 为什么我可以这样给obj1对象添加动态属性? 为什么我最终的结果是只添加了right属性? 解答: 1. 第一个问题解答如下: 我们知道在es5中给对象添加属性有两种方法,一种是通 ...

  4. es6中的对象的可计算的属性名

    先简单的啰嗦一下对象的属性: var obj = { a:2 } 要访问obj中a的位置,方法:1. obj.a     //2            2..obj ["a"]   ...

  5. javascript动态修改对象的属性名

    在做东钿业务系统的时候,经常碰到写很多重复的ajax对接,于是就想封装一个方法,但是接收data的字段名不一样,所以就需要用到动态对象属性名这个写法了.其实很简单.直接看一下代码吧.

  6. Swift面向对象基础(中)——Swift中的存储属性和计算属性

    学习来自<极客学院> 1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型 ...

  7. Swift—计算属性-备

    计算属性本身不存储数据,而是从其他存储属性中计算得到数据. 计算属性概念: 计算属性提供了一个getter(取值访问器)来获取值,以及一个可选的setter(设置访问器)来间接设置其他属性或变量的值. ...

  8. 《从零开始学Swift》学习笔记(Day 32)——计算属性

    原创文章,欢迎转载.转载请注明:关东升的博客 计算属性本身不存储数据,而是从其他存储属性中计算得到数据. 计算属性概念: 计算属性提供了一个getter(取值访问器)来获取值,以及一个可选的sette ...

  9. computed 计算属性

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...

随机推荐

  1. Qt程序crash信息的捕捉与跟踪(转)

    本文转自 https://blog.csdn.net/lanhy999/article/details/12189375

  2. win7 无法启动此程序,因为计算机中丢失glut32.dll

    http://zhidao.baidu.com/link?url=9NZxqCvR7hvmKuVR1dUSdQB-TTv_re-g7lp-xZj5FKII04FnMvIKjFhKv299t6wv5Ht ...

  3. Linux内核实践之工作队列【转】

    转自:http://blog.csdn.net/bullbat/article/details/7410563 版权声明:本文为博主原创文章,未经博主允许不得转载. 工作队列(work queue)是 ...

  4. Fiddler抓包6-get请求(url详解)【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/fiddler/ 前言 上一篇介绍了Composer的功能,可以模拟get和post请求 ...

  5. xxx.service is not a native service, redirecting to /sbin/chkconfig.

    centos7编译安装的程序无法用systemctl 启动 [root@nagios-server check_commands]# systemctl enable npcd.service npc ...

  6. [BZOJ4990][Usaco2017 Feb]Why Did the Cow Cross the Road II dp

    4990: [Usaco2017 Feb]Why Did the Cow Cross the Road II Time Limit: 10 Sec  Memory Limit: 128 MBSubmi ...

  7. Tarjan缩点+Spfa最长路【p3627】[APIO2009] 抢掠计划

    Description Siruseri 城中的道路都是单向的.不同的道路由路口连接.按照法律的规定, 在每个路口都设立了一个 Siruseri 银行的 ATM 取款机.令人奇怪的是,Siruseri ...

  8. 【IntellJ IDEA】idea启动测试类报错Error running 'Test1.test': Command line is too long. Shorten command line for Test1.test or also for JUnit default configuration.

    idea启动测试类报错 Error running 'Test1.test': Command line is too long. Shorten command line for Test1.tes ...

  9. vue axios跨域请求,apache服务器设置

    问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...

  10. Hive JDBC——深入浅出学Hive

    第一部分:搭建Hive JDBC开发环境 搭建:Steps •新建工程hiveTest •导入Hive依赖的包 •Hive  命令行启动Thrift服务 •hive --service hiveser ...