博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[js高手之路] es6系列教程 - 对象功能扩展详解
阅读量:4322 次
发布时间:2019-06-06

本文共 3234 字,大约阅读时间需要 10 分钟。

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

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 : age6             }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 age2 let name = 'ghostwu', age = 26;//let不能重定义, 报错3 return {4 name,5 age6 }7 };8 let oUser = User( 'zhangsan', 20 );9 console.log( oUser.name, oUser.age );

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

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

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']); //undefined10         console.log( User['lastName']); //undefined11         console.log( User['first name']); //ghost12         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']);

 

转载于:https://www.cnblogs.com/ghostwu/p/7294048.html

你可能感兴趣的文章
@ServletComponentScan ,@ComponentScan,@Configuration 解析
查看>>
unity3d 射弹基础案例代码分析
查看>>
thinksns 分页数据
查看>>
os模块
查看>>
LINQ to SQL vs. NHibernate
查看>>
基于Angular5和WebAPI的增删改查(一)
查看>>
windows 10 & Office 2016 安装
查看>>
最短路径(SP)问题相关算法与模板
查看>>
js算法之最常用的排序
查看>>
Python——交互式图形编程
查看>>
经典排序——希尔排序
查看>>
团队编程项目作业2-团队编程项目代码设计规范
查看>>
英特尔公司将停止910GL、915GL和915PL芯片组的生产
查看>>
Maven配置
查看>>
HttpServletRequest /HttpServletResponse
查看>>
SAM4E单片机之旅——24、使用DSP库求向量数量积
查看>>
从远程库克隆库
查看>>
codeforces Unusual Product
查看>>
hdu4348 - To the moon 可持久化线段树 区间修改 离线处理
查看>>
正则表达式的搜索和替换
查看>>