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 ...
随机推荐
- python程序开机自启动
windows下设置 因为服务器是windows环境 担心黑窗口不小心被关闭 因此想要让python程序在后台运行 只需要一下几步 1. 在启动python启动文件加入以下代码 import win ...
- Visual Studio2019下载最新离线安装包
首先可以参考微软官方的离线安装说明-->点击这里打开 =================================================================== 1. ...
- 纯C语言(C89)实现动态数组
起因 工作很少接触纯C项目,业余写着玩玩,不断雕琢 目标 纯C实现动态数组,提供方便易用泛型接口,避免依赖 实现 完全封装,隐藏结构体细节,不支持栈创建 拷贝存储,轻微性能代价换来易用性 vector ...
- jquery 获取url地址参数
1 var url = document.URL; 2 var a = url.split("="); 3 4 if(a[1]){ 5 return options.fn(this ...
- solr(CVE-2019-17558)远程命令执行
影响版本 Apache Solr 5.x到8.2.0版本 测试 https://github.com/jas502n/CVE-2019-0193
- 终拿字节Offer...动态规划复盘...
大家好!我是 Johngo 呀! 和大家一起刷题不快不慢,没想到已经进行到了第二阶段,「动态规划」这部分题目很难,而且很不容易理解,目前我的题目做了一半,凭着之前对于「动态规划」的理解和最近做的题目做 ...
- Python - 函数实战
前言 参考的是慕课网提供的实战,自己编码 http://www.imooc.com/wiki/pythonlesson1/function2.html 什么是模块化程序设计 在进行程序设计时将一个大程 ...
- vue 子目录配置,负载均衡 nginx
1. 我使用的是,腾讯云做负载均衡. 负载均衡配置: https://www.xxxx.com/vue 域名指向的服务器地址:10.10.10.10:80/vue 2. nginx 配置: ser ...
- Mybatis学习笔记-第一个Mybatis程序
思路 搭建环境 搭建数据库(略) CREATE DDATABASE CREATE TABLE INSERT VALUES 新建项目 普通Maven项目 删除src文件夹 --> 建立父工程 导入 ...
- ip地址分配
目录 一.子网划分基础 二.子网划分的原理 三.IP地址汇总 四.ip地址规划 一.子网划分基础 二进制: 特点:基数为2,数值部分用2个不同的数字符号0.1表示逢二进一 IP地址:IP地址由32位二 ...