ES6扩展——对象的扩展(简洁表示法与属性名表达式)
1、简洁表达法。
当属性名与属性值相同时,可省略属性值;例如:{name : name}可以写成 {name}
属性方法中,可省略冒号与function,直接 属性名(){}即可。例如{say : function(arr){}}可以写成{say(arr){}}
es5的写法:
//es5:
const getUserInfo = (id = 1) => {
//ajax ...
const name = 'xiaoming';
const age = 10; return{
name: name,
age: age,
say: function(){
console.log(this.name + this.age);
}
};
};
const xiaoming = getUserInfo();
es6的写法:
//es6:
const getUserInfo1 = (id = 1) => {
//ajax ...
const name = 'xiaoming';
const age = 10;
return{
name,
age,
say(){
console.log(this.name + this.age);
}
};
};
const xiaoming1 = getUserInfo();
2、属性名表达式。
可以将声明的变量用中括号 [] 包裹,作为属性名。也可以是表达式或模板字符串。
const obj = {
a:1,
$abc:2,
'aflajroi23#$T':3 //不符合命名规范时要用单引号或者双引号括起来,否则报错
};
console.log(obj.a); //1
console.log(obj.$abc); //2
console.log(obj['aflajroi23#$T']); //3,要用中括号将带引号的属性名括起来才可以得到属性值,否则报错
属性名表达式的三种写法:
(1)、['变量名']
(2)、简单的表达式: ['xxx'+'yyy'+123],属性名为xxxyyy123
(3)、模板字符串:[`${变量名}123`],属性名为变量名123
const key = 'age';
const xiaohong = {
name:'xiaohong',
//属性名表达式的三种写法
[key]:14,
['abc'+'bbc'+123]:23 , //简单的表达式,该属性名为abcbbc123
[`${key}123`]:34 //模板字符串,该属性名为age123
}
3、属性名表达式与简洁表达式,不能同时使用,会报错。
ES6扩展——对象的扩展(简洁表示法与属性名表达式)的更多相关文章
- ES6中对象的扩展
ES6不仅为字符串.数值和数组带来了扩展,也为对象带来了很多新特性.这一节,我们来一起学习一下对象的扩展. 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { " ...
- ES6学习笔记--属性名表达式
1.直接用标识符作为属性名: obj.foo = true 2.用表达式作为属性名: obj['a'+'bc'] = 123 //相当于 obj['abc'] = 123 3.ES6 允许字面量定义对 ...
- ES6 对对象的扩展
1.对象类别 普通对象:具有JavaScript对象的所有默认内部行为 特异对象: 具有某些与默认行为不符的内部行为 标准对象: ECMAScript 6 规范中新定义的对象,例如Array,Date ...
- es6中的属性名表达式
代码如下: 问题: 为什么我可以这样给obj1对象添加动态属性? 为什么我最终的结果是只添加了right属性? 解答: 1. 第一个问题解答如下: 我们知道在es5中给对象添加属性有两种方法,一种是通 ...
- 关于es6中对象的扩展
1.Object.is() es5比较两个值是否相等,只有两个运算符,相等(==) 和 严格相等(===),他们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0 等于 -0.es6提 ...
- ES6 之 对象的扩展
1.Object.is() 判断俩个值是否相等 +0 不等于 -0 NaN 等于自身 console.log(Object.is('foo','foo')); // true console.log( ...
- web前端之es6对象的扩展
1.属性的简洁表示法 2.属性名表达式 表达式作为对象的属性名 3.方法的 name 属性 例如:函数的name 属性,返回函数名. 4.Object.is() ES 比较两个值是否相等,只有两个运算 ...
- es6学习笔记--字符串&数值&数组&函数&对象的扩展
这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...
- es6对象的扩展
对象(object)是 JavaScript 最重要的数据结构之一. object 在es6中新增了很多便利的方法 在es6中允许直接写入变量和方法的名称直接作为对象的属性 let x =1 ,y=2 ...
随机推荐
- 使用Angular CDK实现一个Service弹出Toast组件
在Angular中,官方团队在开发Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中大名鼎鼎的CDK,这套工具包提供了非常多的前端开发的通用功能 ...
- 就这?一篇文章让你读懂 Spring 事务
什么是事务 ▲ 百度百科 概括来讲,事务是一个由有限操作集合组成的逻辑单元.事务操作包含两个目的,数据一致以及操作隔离.数据一致是指事务提交时保证事务内的所有操作都成功完成,并且更改永久生效:事务回滚 ...
- 关于intouch/ifix嵌入视频控件并使用(海康,大华)
2017年下半年项目开始接触利用intouch工控软件来进行项目二次开发.其中关于驱动的问题始终是上位机的重中之重,暂且不表(嘿嘿--),首先遇到的问题就是在弹窗中嵌入视频控件,监控设备的开停状态.经 ...
- jquery 判断单/复选框是否被选中
1 <div> 2 <span>高亮:</span><input type="checkbox" name="light&quo ...
- solr(CVE-2017-12629)远程命令执行
影响版本Apache Solr 5.5.0到7.0.1版本 solr(CVE-2017-12629-RCE) 环境搭建 1.burp检测 创建listen POST /solr/demo/config ...
- Hadoop 3.1.1 - 概述 - 总览
Apache Hadoop 3.1.1 和之前发布的 3.0.X 版本线相比,Apache Hadoop 3.1.1 吸收了许多重要的改进. 总览 建议用户阅读完整的版本说明.本文提供了对主要变动的总 ...
- 就这?Spring 事务失效场景及解决方案
小明:靓仔,我最近遇到了很邪门的事. 靓仔:哦?说来听听. 小明:上次看了你的文章<就这?一篇文章让你读懂 Spring 事务>,对事务有了详细的了解,但是在项目中还是遇到了问题,明明加了 ...
- i春秋“百度杯”CTF比赛 十月场-Vld(单引号逃逸+报错注入)
题目源代码给出了提示index.php.txt,打开拿到了一段看不太懂得东西. 图片标注的有flag1,flag2,flag3,同时还有三段字符,然后还出现了_GET,脑洞一一点想到访问 ?flag1 ...
- 线程礼让_yield
线程礼让_yield 礼让线程,让当前正在执行的线程暂停,但不阻塞 将线程从运行状态转为就绪状态 让cpu重新调度,礼让不一定成功!看CPU心情 测试案例: package multithreadin ...
- Java面板Panel的使用,监听窗口关闭事件
面板Panel的使用 待解决问题: 1.设计模式:适配器模式 2.frame.setLayout(null); package GUI; import javax.swing.*; import ja ...