1.直接用标识符作为属性名:

obj.foo = true

2.用表达式作为属性名:

obj['a'+'bc'] = 123

//相当于

obj['abc'] = 123

3.ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。

let key = 'foo';
let obj = {
[key]: true,
['a'+'bc']: 123
};
var lastWord = 'last word';

var a = {
'first word': 'hello',
[lastWord]: 'world'
}; a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

4.表达式用来定义方法名

let obj = {
['say' + 'Something']() {
return 'hello word';
}
}; obj.saySomething(); // hello word

5.注意,属性名表达式与简洁表示法,不能同时使用,会报错。

// 会报错
var foo = 'bar';
var bar = 'abc';
var baz = {[foo]}; //正确写法:
var foo = 'bar';
var baz = {[foo]: 'abc'};

6.注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object],这一点要特别小心。

const keyA = {a: 1};
const keyB = {b: 2}; const myObject = {
[keyA]: 'valueA',
[keyB]: 'valueB'
}; myObject // Object {[object Object]: "valueB"}

上面代码中,[keyA][keyB]得到的都是[object Object],所以[keyB]会把[keyA]覆盖掉,而myObject最后只有一个[object Object]属性。

ES6学习笔记--属性名表达式的更多相关文章

  1. es6中的属性名表达式

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

  2. ES6扩展——对象的扩展(简洁表示法与属性名表达式)

    1.简洁表达法. 当属性名与属性值相同时,可省略属性值:例如:{name : name}可以写成 {name} 属性方法中,可省略冒号与function,直接 属性名(){}即可.例如{say : f ...

  3. es6学习笔记--字符串&数值&数组&函数&对象的扩展

    这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...

  4. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

  5. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  6. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  7. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  8. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  9. ES6学习笔记(二)

    1.数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...

随机推荐

  1. 使用springboot mybatis 查询时实体类中的驼峰字段值为null

    看到返回结果以后主要分析了一下情况: 实体类的get.set方法确实 mapper.xml文件中的resultMap.resultType等原因导致 数据库中数据存在问题 经过检查与验证发现以上都不存 ...

  2. 深入理解AQS

    前记 在看JUC中并发相关的源码时经常看到AQS的身影,这到底是个什么鬼?必须要一探究竟. 一. AQS背景了解 JUC包中的锁,包括: Lock接口,ReadWriteLock接口,LockSupp ...

  3. docker 的Portainer和Dive

    Portainer Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容器控制台操作 ...

  4. Codeforces Round #580 (Div. 1)

    Codeforces Round #580 (Div. 1) https://codeforces.com/contest/1205 A. Almost Equal 随便构造一下吧...太水了不说了, ...

  5. 每天固定备份db sqlserver

    DECLARE @DBName varchar(255) DECLARE @DATABASES_Fetch int DECLARE DATABASES_CURSOR CURSOR FOR select ...

  6. vim中常用折叠命令

    最常用3个折叠命令 .反复打开关闭折叠:za (意思就是,当光标处折叠处于打开状态,za关闭之,当光标处折叠关闭状态,打开之) .打开全部折叠:zR .关闭全部折叠:zM 小试折叠: :set fdm ...

  7. texstudio基本设置

    一开始默认为英文,在上面菜单栏,“option” 1.设置中文:options->general->language->zh-cn 2.编辑和查看按钮: 3.设置默认编译器:选项-& ...

  8. CentOS 7.0 更改SSH 远程连接 端口号

    许多学习过redhat 7的同学们,在使用centos的时候总会遇到一些问题,因为centos在安装时会默认开启一些服务,今天我们就来更改下centos 7.0的SSH端口. 操作步骤: 远程登录到c ...

  9. VS 发布MVC网站缺少视图

    mvc项目发布之后会有一些视图文件缺少,不包含在发布文件中,虽然可以直接从项目文件中直接拷贝过来,但还是想知道是什么原因,发布文件好像没有找到哪里有设置这个的地方 把生成操作:无-改成内容即可 原文

  10. String常用使用方法,1.创建string的常用3+1种方式,2.引用类型使用==比较地址值,3.String当中获取相关的常用方法,4.字符串的截取方法,5.String转换常用方法,6.切割字符串----java

    一个知识点使用一个代码块方便查看 1.创建string的常用3+1种方式 /* 创建string的常用3+1种方式 三种构造方法 public String():创建一个空字符串,不含有任何内容: p ...