码迷,mamicode.com
首页 > 其他好文 > 详细

ES6扩展——对象的扩展(简洁表示法与属性名表达式)

时间:2020-06-24 00:24:11      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:命名   code   表达式   方法   报错   简单的   不能   abc   div   

1、简洁表达法。

当属性名与属性值相同时,可省略属性值;例如:{name : name}可以写成 {name}

属性方法中,可省略冒号与function,直接 属性名(){}即可。例如{say : function(arr){}}可以写成{say(arr){}}

es5的写法:

            //es5:
            const getUserInfo = (id = 1) => {
                //ajax ...
                const name = ‘xiaoming‘;
                const age = 10;
                
                return{
                    name: name,
                    age: age,
                    say: function(){
                        console.log(this.name + this.age);
                    }
                };
            };
            const xiaoming = getUserInfo();

es6的写法:

            //es6:
            const getUserInfo1 = (id = 1) => {
                //ajax ...
                const name = ‘xiaoming‘;
                const age = 10;
                return{
                    name,
                    age,
                    say(){
                        console.log(this.name + this.age);
                    }
                };
            };
            const xiaoming1 = getUserInfo();
            

 

 

 

2、属性名表达式。

可以将声明的变量用中括号 [] 包裹,作为属性名。也可以是表达式或模板字符串。

            const obj = {
                a:1,
                $abc:2,
                ‘aflajroi23#$T‘:3  //不符合命名规范时要用单引号或者双引号括起来,否则报错
            };
            console.log(obj.a);  //1
            console.log(obj.$abc);  //2
            console.log(obj[‘aflajroi23#$T‘]);  //3,要用中括号将带引号的属性名括起来才可以得到属性值,否则报错
            

属性名表达式的三种写法

 

 (1)、[‘变量名‘]
(2)、简单的表达式: [‘xxx‘+‘yyy‘+123],属性名为xxxyyy123
(3)、模板字符串:[`${变量名}123`],属性名为变量名123
            const key = ‘age‘;
            const xiaohong = {
                name:‘xiaohong‘,
                //属性名表达式的三种写法
                [key]:14,
                [‘abc‘+‘bbc‘+123]:23 ,  //简单的表达式,该属性名为abcbbc123
                [`${key}123`]:34  //模板字符串,该属性名为age123
            }

 

 

 

3、属性名表达式与简洁表达式,不能同时使用,会报错。

ES6扩展——对象的扩展(简洁表示法与属性名表达式)

标签:命名   code   表达式   方法   报错   简单的   不能   abc   div   

原文地址:https://www.cnblogs.com/rickdiculous/p/13185464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!