第一:字面量对象的方法,支持缩写形式

         //es6之前,这么写
var User = {
name : 'ghostwu',
showName : function(){
return this.name;
}
};
console.log( User.showName() );
         //有了es6之后,这么写
let User = {
name : 'ghostwu',
showName (){
return this.name;
}
};
console.log( User.showName() );

方法缩写规则: 在原来的基础上去掉 冒号 和 function关键字

第二:对象中的属性与变量名或者参数 同名的时候, 可以省略赋值的操作

         //参数与属性同名
let User = function( name, age ){
return {
name : name,
age : age
}
};
let oUser = User( 'ghostwu', 22 );
console.log( oUser.name, oUser.age );

上面例子中的写法,可以简写为:

         let User = function( name, age ){
return {
name, //省略name的赋值, 会在作用域中查找同名的name变量或者参数
age //省略age的赋值,会在作用域中查找同名的age变量或者参数
}
};
let oUser = User( 'ghostwu', 22 );
console.log( oUser.name, oUser.age );
         let User = function(){
let name = 'ghostwu', age = 26;
return {
name, //查找到同名变量name,赋值给name属性
age //查找到同名变量age,赋值给age属性
}
};
let oUser = User();
console.log( oUser.name, oUser.age );
         let User = function(){
let name = 'ghostwu', age2 = 26;
return {
name,
age //当没有同名变量或者参数时,省略写法会报错
}
};
let oUser = User();
console.log( oUser.name, oUser.age );
             let User = function( name, age ){//形参相当于var name, var age
let name = 'ghostwu', age = 26;//let不能重定义, 报错
return {
name,
age
}
};
let oUser = User( 'zhangsan', 20 );
console.log( oUser.name, oUser.age );

如果同时出现同名参数和let定义的同名变量时候,会报语法错误,如果不知道为什么,请看下我之前写的博客文章:

[js高手之路] es6系列教程 - var, let, const详解

第三:可计算属性名, 即: 属性名支持表达式参与运算

          let User = {};
let lastName = "last Name"; User['first Name'] = 'ghost';
User[lastName] = 'wu'; //lastName被解释为last name, 从而等价于User['last Name'] = 'wu'
console.log( User['first Name'] , User['last Name'] );
         let User = {
"full Name" : "ghostwu",
// first Name : "ghostwu" //属性名包含空格或者特殊符号要用引号或者转义处理,否则报错
};
console.log( User['full Name'] );
         let firstName = 'first name';
let lastName = 'last name';
//属性名如果用中括号括起来,属性名就被解释成了变量
let User = {
[firstName] : 'ghost',
[lastName] : 'wu',
}; console.log( User['firstName']); //undefined
console.log( User['lastName']); //undefined
console.log( User['first name']); //ghost
console.log( User['last name']); //wu

用中括号把属性括起来,属性就变成了变量,变量就可以用操作符组合成表达式,参与运算,所以叫计算表达式

         let suffix = ' Name';
let User = {
['first' + suffix] : 'ghost',
['last' + suffix] : 'wu',
};
console.log( User['first Name'], User['last Name']);

[js高手之路] es6系列教程 - 对象功能扩展详解的更多相关文章

  1. [js高手之路] es6系列教程 - 迭代器与生成器详解

    什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...

  2. [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

    关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...

  3. [js高手之路] es6系列教程 - var, let, const详解

    function show( flag ){ console.log( a ); if( flag ){ var a = 'ghostwu'; return a; } else { console.l ...

  4. [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

    接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...

  5. [js高手之路] es6系列教程 - 函数的默认参数详解

    在ES6之前,我们一般用短路表达式处理默认参数 function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ) ...

  6. [js高手之路] es6系列教程 - 箭头函数详解

    箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...

  7. [js高手之路] es6系列教程 - 不定参数与展开运算符(...)

    三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...

  8. [js高手之路]es6系列教程 - 解构详解

    解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法, es6之前,我们通过对象名称[键] 读取数据 var User = { 'name' : 'ghostwu', 'age' : ...

  9. [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战

    我们还是从一些现有的需求和问题出发,为什么会有set,他的存在是为了解决什么问题? 我们看一个这样的例子,为一个对象添加键值对 var obj = Object.create( null ); obj ...

随机推荐

  1. Xmanager连接到RedHat Enterprise Linux 6.8

    RedHat Enterprise Linux 6 配置Xmanager ,实现图形界面连接 X是用在大多数UNIX系统中的图形支持系统.如果你在你的Linux机器上使用GNOME或者KDE的话,你就 ...

  2. 从Html5直播到互动直播,看直播协议的选择

    目前,国内主流的直播协议有HLS.RTMP.HTTP FLV,适用于不同的直播场景. 一.HLS.RTMP与HTTP FLV 1.HLS HLS 全称是 HTTP Live Streaming, 是一 ...

  3. Linux搭建SVN服务器(服务端)

    Linux搭建SVN服务器(服务端) 1 安装SVN SVN客户端:TortoiseSVN,官网下载:https://tortoisesvn.net/downloads.html(客户端) # yum ...

  4. 在CentOS7上使用systemctl配置tomcat

    最近买了一台阿里云,现在阿里云CentOS都已经支持7了(前面都是使用CentOS6),索性直接使用CentOS7,7上面目前最大区别就是service变成了现在的systemctl,简单的查了一下并 ...

  5. JAVA基础——运算符和表达式

    JAVA语言常用的运算符和表达式详解 一.简述 运算符是一种"功能"符号,用以通知 Java 进行相关的运算.譬如,我们需要将变量 age 的值设置为 20 ,这时候就需要一个&q ...

  6. VMware中Mac OS中显示共享文件夹的方法

    在finder 偏好设置里的通用标签下,勾选  “已连接的服务器”

  7. JS将文件以form表单一样提交到后台

    这是很简单.. HTML <div> <input type="file" id="myfile"> <input type=&q ...

  8. Wince 创新布局

    如果你的项目是用wince开发并且机器是小型的pda,你可以考虑有这种布局方式. IDE上布局,如图 /// <summary> /// 显示层 /// </summary> ...

  9. 面向对象15.3String类-常见功能-转换

    public static void main(String[] args) { //2.1// String s="张三,李四,王五";// String [] arr=s.sp ...

  10. python+selenium自动化测试环境安装

    因为自己安装自动化测试环境时,遇到过许多问题,自己整理了一下安装的步骤,感谢那些帮助过我的人. 1.安装python,我装的是3.5版本,网络上也有许多安装步骤,照着就可以了(其实一直下一步也行) 不 ...