[js高手之路] es6系列教程 - 对象功能扩展详解

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

1         //es6之前,这么写
2         var User = {
3             name : 'ghostwu',
4             showName : function(){
5                 return this.name;
6             }
7         };
8         console.log( User.showName() );

1         //有了es6之后，这么写
2         let User = {
3             name : 'ghostwu',
4             showName (){
5                 return this.name;
6             }
7         };
8         console.log( User.showName() );

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

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

1         //参数与属性同名
2         let User = function( name, age ){
3             return {
4                 name : name,
5                 age : age
6             }
7         };
8         let oUser = User( 'ghostwu', 22 );
9         console.log( oUser.name, oUser.age );

上面例子中的写法，可以简写为：

1         let User = function( name, age ){
2             return {
3                 name, //省略name的赋值, 会在作用域中查找同名的name变量或者参数
4                 age //省略age的赋值,会在作用域中查找同名的age变量或者参数
5             }
6         };
7         let oUser = User( 'ghostwu', 22 );
8         console.log( oUser.name, oUser.age );

1         let User = function(){
2             let name = 'ghostwu', age = 26;
3             return {
4                 name, //查找到同名变量name,赋值给name属性
5                 age   //查找到同名变量age,赋值给age属性
6             }
7         };
8         let oUser = User();
9         console.log( oUser.name, oUser.age );

1         let User = function(){
2             let name = 'ghostwu', age2 = 26;
3             return {
4                 name,
5                 age //当没有同名变量或者参数时,省略写法会报错
6             }
7         };
8         let oUser = User();
9         console.log( oUser.name, oUser.age );

1             let User = function( name, age ){//形参相当于var name, var age
2             let name = 'ghostwu', age = 26;//let不能重定义, 报错
3             return {
4                 name,
5                 age
6             }
7         };
8         let oUser = User( 'zhangsan', 20 );
9         console.log( oUser.name, oUser.age );

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

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

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

1          let User = {};
2         let lastName = "last Name";
3
4         User['first Name'] = 'ghost';
5         User[lastName] = 'wu'; //lastName被解释为last name, 从而等价于User['last Name'] = 'wu'
6         console.log( User['first Name'] , User['last Name'] );

1         let User = {
2             "full Name" : "ghostwu",
3             //  first Name : "ghostwu" //属性名包含空格或者特殊符号要用引号或者转义处理,否则报错
4         };
5         console.log( User['full Name'] );

1         let firstName = 'first name';
2         let lastName = 'last name';
3         //属性名如果用中括号括起来,属性名就被解释成了变量
4         let User = {
5             [firstName] : 'ghost',
6             [lastName] : 'wu',
7         };
8
9         console.log( User['firstName']); //undefined
10         console.log( User['lastName']); //undefined
11         console.log( User['first name']); //ghost
12         console.log( User['last name']); //wu

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

1         let suffix = ' Name';
2         let User = {
3             ['first' + suffix] : 'ghost',
4             ['last' + suffix] : 'wu',
5         };
6         console.log( User['first Name'], User['last Name']);