The enhanced Object literals: ES6 has added some new syntax-based extensions to {} object literal for creating properties. (增强的对象字面量: 对于创建对象字面量的属性,ES6 新增了一些语法层面的扩展)

  1, Defining Properties(定义属性)

  ES6 provides a shorter syntax for asssinging the object properties to the values of the variables, which have the same name as the properties. (给一个属性赋一个变量值,如果变量名和属性名相同,ES6 提供了一个简洁的语法,可以省略变量名)

  In ES5, you have been doing this:

  1. var x = 1, y = 2;
  2. var object = {
  3.   x: x,
  4.   y: y
  5. };
  6. console.log(object.x); //output "1"

  In ES6, you can do it this way:

  1. let x = 1, y = 2;
  2. let object = {
      x,
      y
    };
  3. console.log(object.x); //output "1"

  2, Defining methods(定义方法)

  ES6 provides a new syntax for define the methods on an object. Here is an example to demonstrate the new syntax: (ES6提供了简洁的方法来定义方法,省略function关键字)

  1. let object = {
  2. myFunction(){
  3. console.log("Hello World")
  4. }
  5. }

  This concise function allows the use of super in them, whereas the traditional methods of the objects don't allow the use of super(这种简洁的函数可以使用super,super在class 中用到). 

  3, The computed property names (计算属性名)

  The property names that are evaluated during runtime are called as the computed property names. An expression is usually resolved to find the property name dynamically. (在程序运行过程中才能确认的属性名叫动态属性名, 表达式通常来动态获取这个属性名)

  In ES5, the computed properties are defined in this way:

  1. var object = {};
  2. object["first"+"Name"] = "Eden";//"firstName" is the property name

  3. //extract
  4. console.log(object["first"+"Name"]); //Output "Eden"

  Here, after creating the object, we attach the properties to the object. But In ES6, we can add the properties with the computed name while creating the objects. Here is an example: (ES5中,先创建一个对象,再添加属性,但在ES6中,创建对象的同时可以添加动态属性名)

  1. let object = {
  2.   ["first" + "Name"]: "Eden",
  3. };
  4. //extract
  5. console.log(object["first" + "Name"]); //Output "Eden"

Array Destructuring Assignment

  1, Using the rest operator(可以使用剩余操作符)

  We can prefix the last variable of the array destructuring expression using the " … " token. In this case, the variable is always converted into an array object, which holds the rest of the values of the iterable object, if the number of other variables is less than the values in the iterable object. Consider this example to understand it: (当使用剩余操作符的时候,当然只能是最后一个变量使用剩余操作符,这个变量就变成了数组,且如果我们声明的变量的个数小于数组中元素的个数,这个变量就会把数组中剩余的元素收集起来)

  1. let [a, b, ...c] = [1,3,4,5,6]
  2.  
  3. console.log(a) // 1
  4. console.log(b) // 3
  5. console.log(c) // [4,5,6]

  2, Default values(默认参数)

  While destructuring, you can also provide the default values to the variables if the array index is undefined. Here is an example to demonstrate this:(如果右边的数组的元素的个数少于我们声明的变量的个数,我们可以给变量赋一个默认值)

  1. let [a, b, c=2] = [1,3];
  2. console.log(c) // 2

  3, Using the destructuring assignment as a parameter (解构赋值用作函数参数)

  We can also use the array destrucuring expression as the function parameters for extracting the values of an iterable object, passed as argument into the function parameters. Here is an example to demonstrate this:

  1. function myFunction([a, b, c = 3])
  2. {
  3. console.log(a, b, c); //Output "1 2 3"
  4. }
  5. myFunction([1, 2]);

ES6 对象增强和结构赋值的更多相关文章

  1. ES6中的变量结构赋值

    小编的上一篇文章更新了es6中关于变量定义的问题,这篇文章继续来一些实用的干货,关于数组.对象的赋值问题.特别是在前后端合作项目的时候,对后端数据的拆分,还有就是对于函数的默认值的惰性赋值问题.看完下 ...

  2. JS ES6的变量的结构赋值

    变量的结构赋值用户很多 1.交换变量的值 let x = 1; let y = 2; [x,y] = [y,x] 上面的代码交换变量x和变量y的值,这样的写法不仅简洁,易读,语义非常清晰 2.从函数返 ...

  3. ES6 对象的解构赋值

    对象的解构赋值 解构不仅可以用于数组,还可以用于对象. let {foo,bar} = {foo:"aaa",bar:"bbb"}; console.log(f ...

  4. es6☞对象的解构赋值

    变量必须与属性同名 let {name, age} = {name: 'wang', age: 22}; console.log(name, age); //wang 22 let {name} = ...

  5. ES6 对象增强

    对象字面量语法扩展: 1, 属性初始化语法简写:给一个属性赋一个变量值,如果变量名和属性名相同,可以省略变量名和冒号,直接写属性名,js引擎在执行代码的时候,自动查找 和属性命名相同的变量并赋值. l ...

  6. 2、ES6结构赋值和模板字符串

    ES6允许按照一定的模式,从数组和对象中提取值,这被称为结构,即解开数据的结构 1.数组的解构赋值 let [a,b] = [1,2] let [a,b,c=100] = [1,2] //c的默认值为 ...

  7. es6对象字面量增强

    相对于ES5,ES6的对象字面量得到了很大程度的增强.这些改进我们可以输入更少的代码同时语法更易于理解.那就一起来看看对象增强的功能.对象字面量简写(Object Literal Shorthand) ...

  8. ES6 变量的结构赋值

    1.数组的解构赋值 a.基本用法:(‘模糊匹配’) let [a, b, c] = [1, 2, 3]; a b c b.嵌套数组结构例子: let [x, , y] = [1, 2, 3]; x y ...

  9. 一个令人兴奋的ES6星特性-结构赋值

    学完了前4节,今天我给大家带来的是一个令人兴奋的特性:解构赋值.这个章节代码片段有点偏多,不过可以放心,一点都不烧脑,还是老样子:简单易懂. 什么是解构赋值 按照一贯的套路,接下来的内容是解释:什么是 ...

随机推荐

  1. 【C#进阶】override new virtual

    class Organ { public virtual void Intro() { Console.WriteLine("I'm a organ."); } public st ...

  2. Java被忽略的基本知识(三)

    35.e.printStackTrace();输出异常信息,也可以使用System.out.println(e); 36.范围小的异常,要放在范围大的异常前面. 37.断言:判断某个结果的正确性,正确 ...

  3. Hdu 2955 Robberies 0/1背包

    Robberies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  4. Android ps命令执行后的各项参数含义

    直接输入ps后可以看到如下信息: # ps ps USER     PID   PPID  VSIZE  RSS     WCHAN    PC         NAME root      1    ...

  5. 微信接口php

    官方提供的SDK只有一个文本消息功能,我们将所有消息的消息类型及事件响应都整理了进来,并且加入日志记录,代码如下: 更新日志: 2013-01-01 版本1.0,包含Token验证及基本消息接口的收发 ...

  6. ResultSet用法集锦

    ResultSet用法集锦 结果集(ResultSet)是数据中查询结果返回的一种对象,可以说结果集是一个存储查询结果的对象,但是结果集并不仅仅具有存储的功能,他同时还具有操纵数据的功能,可能完成对数 ...

  7. ASP.NET MVC 异步获取和刷新ExtJS6 TreeStore

    从数据库获取构造树结构是ExtJS TreePanel的核心技术,常用方法是TreeStroe里配置proxy,这种方式的root成了一个不受控制的节点. TreeStroe的root实际是一个层叠j ...

  8. (Interface)接口特点

    接口是一种规范.只要一个类继承了一个接口,这个类就必须实现这个接口中所有的成员 为了多态. 接口不能被实例化.也就是说,接口不能new(不能创建对象) 接口中的成员不能加"访问修饰符&quo ...

  9. Linq创建带命名空间、前缀、Soap格式的XML

    关于XML,我也是刚接触,关于一般常见的XML,博客园.CSDN上的资料很多,对于不常见的带命名空间.前缀.Soap格式的XML的描述相对来说寥寥无几,上一篇我写到了对相对复杂的XML的读操作,下面说 ...

  10. U-Boot移植

    基于天翔的老师的课程, 他的博客在这儿: http://blog.csdn.net/johnmcu/article/details/6561311 注明不能转载, 就重新写一下吧: 1. 安装韦东山的 ...