vim复制 Java中高进阶架构 animation sharepoint graph sdk 逻辑端口 callback angularjs版本 jquery去空格 linux查看mysql进程 mysql设置自增初始值 centos查看python版本 oracle数据库创建表空间 svn安装后右键不显示 python的数据类型 python调用方法 python零基础 java对象 java平台 java求阶乘 java集合类 java中的集合 linux的find 易语言进度条 剑三醉猿 dep extjs视频教程 dnf传说装备 用流量打电话的软件 mysql使用教程 x64dbg 软件龙头股 网卡驱动安装包 sql2008r2 枪林弹雨辅助 qq浏览器全屏 手机号正则表达式 centos配置ip python游戏ps竖排文字
当前位置: 首页 > 学习教程  > 编程语言

ES6的计算属性名语法

2021/2/13 16:19:09 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

计算属性名 在JavaScript中,我们定义属性时,有两种方式:中括号[]或.的方式: // 方法一 obj.foo true;// 方法二 obj[abc] 123;.运算符具有很大的局限性,比如first name这种属性只能通过中括号的方式来定义。中括号的…

计算属性名
在JavaScript中,我们定义属性时,有两种方式:中括号[]或.的方式:

// 方法一
obj.foo = true;

// 方法二
obj['a'+'bc'] = 123;

.运算符具有很大的局限性,比如first name这种属性只能通过中括号的方式来定义。中括号的方式允许我们使用变量或者在使用标识符时会导致语法错误的字符串直接量来定义属性。例如:

var person = {},
    lastName = "last name";

person["first name"] = "Nicholas";
person[lastName] = "Zakas";

console.log(person["first name"]);      // "Nicholas"
console.log(person[lastName]);          // "Zakas"

这两种方式只能通过中括号的方式来定义的。在ES5中,你可以在对象直接量中使用字符串直接量作为属性,例如:

var person = {
    "first name": "Nicholas"
};

console.log(person["first name"]);      // "Nicholas"

但是当我们的属性名存在一个变量中或者需要计算时,使用对象直接量是无法定义属性的。

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

在对象直接量中的中括号表明属性名是需要被计算的,它的内容被计算为字符串


本文链接: http://www.dtmao.cc/news_show_700008.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?