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

Posted 2020-12-12 rickdiculous

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、属性名表达式与简洁表达式，不能同时使用，会报错。