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

Posted rickdiculous

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6扩展——对象的扩展(简洁表示法与属性名表达式)相关的知识,希望对你有一定的参考价值。

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扩展——对象的扩展(简洁表示法与属性名表达式)的主要内容,如果未能解决你的问题,请参考以下文章

web前端之es6对象的扩展

对象的扩展

对象的扩展

ES6对象的扩展

JavaScript ES6 - 对象扩展

JavaScript ES6 - 对象扩展