[js高手之路] es6系列教程 - 对象功能扩展详解
2017-08-06 10:31
791 查看
第一:字面量对象的方法,支持缩写形式
方法缩写规则: 在原来的基础上去掉 冒号 和 function关键字
第二:对象中的属性与变量名或者参数 同名的时候, 可以省略赋值的操作
上面例子中的写法,可以简写为:
如果同时出现同名参数和let定义的同名变量时候,会报语法错误,如果不知道为什么,请看下我之前写的博客文章:
用中括号把属性括起来,属性就变成了变量,变量就可以用操作符组合成表达式,参与运算,所以叫计算表达式
//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系列教程 - 对象功能扩展详解
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
- [js高手之路] es6系列教程 - 函数的默认参数详解
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - 箭头函数详解
- [js高手之路] es6系列教程 - 箭头函数详解
- [js高手之路] es6系列教程 - 解构详解
- [js高手之路] es6系列教程 - 迭代器与生成器详解
- [js高手之路] es6系列教程 - 解构详解
- [js高手之路] es6系列教程 - Map详解以及常用api
- [js高手之路] es6系列教程 - 函数的默认参数详解
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
- [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
- [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
- [js高手之路] es6系列教程 - 新的类语法实战选项卡