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扩展——对象的扩展(简洁表示法与属性名表达式)的更多相关文章

  1. ES6中对象的扩展

    ES6不仅为字符串.数值和数组带来了扩展,也为对象带来了很多新特性.这一节,我们来一起学习一下对象的扩展. 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { " ...

  2. ES6学习笔记--属性名表达式

    1.直接用标识符作为属性名: obj.foo = true 2.用表达式作为属性名: obj['a'+'bc'] = 123 //相当于 obj['abc'] = 123 3.ES6 允许字面量定义对 ...

  3. ES6 对对象的扩展

    1.对象类别 普通对象:具有JavaScript对象的所有默认内部行为 特异对象: 具有某些与默认行为不符的内部行为 标准对象: ECMAScript 6 规范中新定义的对象,例如Array,Date ...

  4. es6中的属性名表达式

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

  5. 关于es6中对象的扩展

    1.Object.is() es5比较两个值是否相等,只有两个运算符,相等(==) 和 严格相等(===),他们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0 等于 -0.es6提 ...

  6. ES6 之 对象的扩展

    1.Object.is() 判断俩个值是否相等 +0 不等于 -0 NaN 等于自身 console.log(Object.is('foo','foo')); // true console.log( ...

  7. web前端之es6对象的扩展

    1.属性的简洁表示法 2.属性名表达式 表达式作为对象的属性名 3.方法的 name 属性 例如:函数的name 属性,返回函数名. 4.Object.is() ES 比较两个值是否相等,只有两个运算 ...

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

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

  9. es6对象的扩展

    对象(object)是 JavaScript 最重要的数据结构之一. object 在es6中新增了很多便利的方法 在es6中允许直接写入变量和方法的名称直接作为对象的属性 let x =1 ,y=2 ...

随机推荐

  1. 【C#】C#中使用GDAL3(二):Windows下读写Shape文件及超详细解决中文乱码问题

    转载请注明原文地址:https://www.cnblogs.com/litou/p/15035790.html 本文为<C#中使用GDAL3>的第二篇,总目录地址:https://www. ...

  2. elastic query match_all 数据目标超过10000条出错 Result window is too large

    起因 elastic做文本索引,match_all目标索引超过10000条时,出错 { "error": { "root_cause": [ { "t ...

  3. 2021零售商业智能(BI)的 8大好处

    零售业的商业智能现在比以往任何时候都更加重要.客户数据不仅可以用来击败竞争对手,还可以用来识别模式和行为,确定哪些产品和服务适合当下销售,以及如何瞄准新市场. 什么是零售业的商业智能? 商业智能是使用 ...

  4. 基于BIT数组实现全局功能开关

    前提 某一天巧合打开了sofa-bolt项目,查找部分源码,看到了项目中使用bit数组实现功能开关的特性,感觉这种方式可以借鉴,于是写下这篇文章. 原理 bit数组的布局如下: 由于每个bit都可以表 ...

  5. 简明易懂,将细节隐藏,面向新手树立web开发概念——学完Java基础语法,超快速上手springboot+mybatiJavaWeb开发

    简明易懂,将细节隐藏,面向新手树立web开发概念 --学完Java基础语法,超快速上手JavaWeb开发 Web本质(先忽视各种协议) Web应用可以理解为浏览器和服务器之间的交互. 我们可以看一个简 ...

  6. Maven-内部多个项目依赖自动升级版本的部署

    需要自动升级版本的AAA项目发布 (有内部依赖时) 步骤比较复杂, 有一些需要根据实际情况调整. 考虑了以下几种可能性: 依赖模块的版本有更新 依赖模块版本没更新 依赖模块的版本号: 直接定义, 用属 ...

  7. Android中的一些小细节

    在代码中获取到的padding .margin.getWidth.event.getX.context.getResources().getDimensionPixelSize(R.dimen.key ...

  8. 来看看是什么原因导致生产服上的系统CPU高的?

    我们可能会遇到生产服务器CPU很高的问题,有时候能确定是哪个进程,但是不知道这个进程都在干什么,所以也无从下手,无法解决问题.只能不断的重启,重启等. 最近也看了[一线码农]的一些教程,觉得都很不错, ...

  9. maven将依赖打入jar包中

    1.在pom.xml中加入maven-assembly-plugin插件: <build> <plugins> <plugin> <artifactId> ...

  10. Devcpp(Dev-C++)代码编辑的快捷键

    转自:https://blog.csdn.net/u010940020/article/details/43735549 这里记录一些个人使用Devcpp时,摸索出来的代码编辑快捷键,感觉非常有用.如 ...