1、简洁表达法。

当属性名与属性值相同时,可省略属性值;例如:{name : name}可以写成 {name}

属性方法中,可省略冒号与function,直接 属性名(){}即可。例如{say : function(arr){}}可以写成{say(arr){}}

es5的写法:

  1. //es5:
  2. const getUserInfo = (id = 1) => {
  3. //ajax ...
  4. const name = 'xiaoming';
  5. const age = 10;
  6.  
  7. return{
  8. name: name,
  9. age: age,
  10. say: function(){
  11. console.log(this.name + this.age);
  12. }
  13. };
  14. };
  15. const xiaoming = getUserInfo();

es6的写法:

  1. //es6:
  2. const getUserInfo1 = (id = 1) => {
  3. //ajax ...
  4. const name = 'xiaoming';
  5. const age = 10;
  6. return{
  7. name,
  8. age,
  9. say(){
  10. console.log(this.name + this.age);
  11. }
  12. };
  13. };
  14. const xiaoming1 = getUserInfo();

2、属性名表达式。

可以将声明的变量用中括号 [] 包裹,作为属性名。也可以是表达式或模板字符串。

  1. const obj = {
  2. a:1,
  3. $abc:2,
  4. 'aflajroi23#$T':3 //不符合命名规范时要用单引号或者双引号括起来,否则报错
  5. };
  6. console.log(obj.a); //1
  7. console.log(obj.$abc); //2
  8. console.log(obj['aflajroi23#$T']); //3,要用中括号将带引号的属性名括起来才可以得到属性值,否则报错

属性名表达式的三种写法:

  1.  1)、['变量名']
  2. 2)、简单的表达式: ['xxx'+'yyy'+123],属性名为xxxyyy123
  3. 3)、模板字符串:[`${变量名}123`],属性名为变量名123
  1. const key = 'age';
  2. const xiaohong = {
  3. name:'xiaohong',
  4. //属性名表达式的三种写法
  5. [key]:14,
  6. ['abc'+'bbc'+123]:23 , //简单的表达式,该属性名为abcbbc123
  7. [`${key}123`]:34 //模板字符串,该属性名为age123
  8. }

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. Linux + .net core 开发升讯威在线客服系统:首个经过实际验证的高性能版本

    业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程: .net core 和 WPF 开发升讯威在线客服系统:目录 https://blog.she ...

  2. informix 数据库锁表分析和解决方法

    一.前言 在联机事务处理(OLTP)的数据库应用系统中,多用户.多任务的并发性是系统最重要的技术指标之一.为了提高并发性,目前大部分RDBMS都采用加锁技术.然而由于现实环境的复杂性,使用加锁技术又不 ...

  3. synchronized锁机制(六)

    前言 1.理解同步关键词synchronized 2.同步方法与同步代码块的区别 3.理解锁的对象this 脏读 一个常见的概念.在多线程中,难免会出现在多个线程中对同一个对象的实例变量进行并发访问的 ...

  4. [考试总结]noip模拟26

    首先看到这样中二的题目心头一震.... 然而发现又是没有部分分数的一天. 然而正解不会打.... 那还是得要打暴力. 但是这套题目有两个题目只有一个参数. 所以... (滑稽).jpg 然后我就成功用 ...

  5. 初学MyBatis(踩坑)Error querying database. Cause: java.sql.SQLException: java.lang.ClassCastException: java.math.BigInteger cannot be cast to java.lang.Long

    最近在学习Mybatis,代码全部根据教程写好了,一运行结果报了一个错误,主要错误内容: Caused by: org.apache.ibatis.exceptions.PersistenceExce ...

  6. JS对DOM的操作优化法则

    html页面显示过程 解析HTML,并生成一棵DOM tree 解析各种样式并结合DOM tree生成一棵Render tree 对Render tree的各个节点计算布局信息,比如box的位置与尺寸 ...

  7. 面试问题记录 三 (JavaWeb、JavaEE)

    前言 这块还是比较关键的,考察你对整个业务流程的熟练度吧,虽然企业级的项目没有接触过,但像最基本的内容必须得融会贯通,这一点我感觉自己还是处于浅层,没有深入的去思考以及练习过,其实就像那句话,&quo ...

  8. 当鼠标移入div上时,div的背景色在4s之内渐变为灰色,同时在5s之内顺时针旋转45度,且尺寸缩小一半;当鼠标移走时,再渐变恢复初始样式

    <style> #d1{ width:200px; height:200px; border:1px solid #000; transition:background 4s linear ...

  9. 手写Pascal解释器(一)

    目录 一.编写解释器的动机 二.part1 三.part2 四.part3 一.编写解释器的动机 学习了Vue之后,我发现对字符串的处理对于编写一个程序框架来说是非常重要的,就拿Vue来说,我们使用该 ...

  10. 乘风破浪,遇见Android Jetpack之Compose声明式UI开发工具包,逐渐大一统的原生UI绘制体系

    什么是Android Jetpack https://developer.android.com/jetpack Android Jetpack是一个由多个库组成的套件,可帮助开发者遵循最佳做法.减少 ...