您的位置:首页 > Web前端 > JavaScript

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

2017-08-06 10:31 791 查看
第一:字面量对象的方法,支持缩写形式

//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']);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: