ES6学习笔记--属性名表达式
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学习笔记--属性名表达式的更多相关文章
- es6中的属性名表达式
代码如下: 问题: 为什么我可以这样给obj1对象添加动态属性? 为什么我最终的结果是只添加了right属性? 解答: 1. 第一个问题解答如下: 我们知道在es5中给对象添加属性有两种方法,一种是通 ...
- ES6扩展——对象的扩展(简洁表示法与属性名表达式)
1.简洁表达法. 当属性名与属性值相同时,可省略属性值:例如:{name : name}可以写成 {name} 属性方法中,可省略冒号与function,直接 属性名(){}即可.例如{say : f ...
- es6学习笔记--字符串&数值&数组&函数&对象的扩展
这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...
- es6学习笔记-class之一概念
前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
- ES6学习笔记(二)
1.数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...
随机推荐
- npm install 报错 error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,"d' 解决办法
npm install 报错 : error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,& ...
- 怎么看系统是UEFI还是Legacy BIOS启动模式?
在命令行 cmd 中输入 msinfo32 ,找到右侧[BIOS模式],看到这里显示的是[uefi],那么说明是[uefi]方式启动的,反之显示为[BIOS],那么就是传统[BIOS]启动模式.如下 ...
- Java学习:面向对象三大特征:封装性、继承性、多态性之多态性。
面向对象三大特征:封装性.继承性.多态性之多态性. extends继承或者implemens实现,是多态性的前提. 例如:小菜是一个学生,但同时也是一个人.小菜是一个对象,这个对象既有学生形态,也有人 ...
- SQL系列(七)—— 相似(like)
在看like之前先了解下通配符和搜索模式: 通 配 符 ( wildcard) 用来匹配值的一部分的特殊字符. 搜索模式(search pattern) 由字面值.通配符或两者组合构成的搜索条件. 目 ...
- java异常的嵌套和级联
一.分开捕获或者嵌套使用 我们先看看下面这段代码: public class Cal { public int div(int a, int b) { int result = a / b; retu ...
- 【转载】Windows系统电脑如何更换盘符号
在笔记本电脑或者办公电脑的使用过程中,有时候需要更换盘符号,例如在重装系统后,硬盘相应的分区盘符号可能会发生错乱变化,此时如果想更换回重装系统之前的盘符号,可以通过计算机管理里面的磁盘管理来实现更换盘 ...
- 剑指前端(前端入门笔记系列)——BOM
BOM ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些 ...
- mongoDB看这篇就够了
写在前面 hello,小伙伴们,我是 pubdreamcc ,本篇文章依旧出至于我的 GitHub仓库 node学习教程 ,如果你觉得我写的还不错,欢迎给个 star ,小伙伴们的 star 是我持续 ...
- rabbitmq:配置rabbitmq-management插件
rabbitmq提供了一个图形的管理界面,用于管理.监控rabbitmq的运行情况,它是以插件的形式提供的,如果要启用需要启用插件 一.启用插件 rabbitmq-plugins enable rab ...
- Java集合学习(6):LinkedHashSet
一.概述 首先我们需要知道的是它是一个Set的实现,所以它其中存的肯定不是键值对,而是值.此实现与HashSet的不同之处在于,LinkedHashSet维护着一个运行于所有条目的双重链接列表.此链接 ...