Detailed explanation of object expansion in JavaScript es6

1. There are still many browsers that cannot directly use es6 syntax. Especially some lower version browsers on mobile phones. All need to be converted using bale.

But in the currently popular frameworks (vue, react, angular). Each has its own scaffolding and can be converted using webpack. Or directly configure webpack, fis3, nowa and other conversions yourself.

It’s still not flattering.

2. Concise writing of attributes

//1.属性简洁表示语法
        var foo = 'bar';        var obj = {foo};
        console.log(obj);        //创建对象的函数
        function createOjb(x = 1,y = 1){  //x = 1, y = 1; 参数的默认值
            return {
                x,y
            }
        }        var newObj = createOjb(); 
        console.log(newObj); //{x:1,y:1} 
        var birthDate = '2017/8/12'        //2 方法的简写
        var person = {
            name:'绿巨人',
            age:'200岁',
            birthDate,
            say(){
                console.log(this.name);  //等同于  say:function(){ console.log(this.name)};            }
        }
        person.say();  // 绿巨人
        //in  方法
         var msg = {
            hello:'helloValue',
            world:'worldValue'
         }
         console.log('hello' in msg,'helloValue' in msg); 
         // true,false; => 判断某个键值是在某个对象里面
         //commonJS 模块化输出
         function Obj(methods){            this.methods = methods || {};
         }
         Obj.prototype.getItem = function(key){            return key in this.methods ? methods[key] : null;
         }
         Obj.prototype.setItem = function(key,value){            this.methods[key] = value;
         }         var obj = new Obj();         //module.exports = {obj};
         //4.注意点  ：简洁写法的属性名总是字符串，这会导致一些看上去比较奇怪的结果。

3. Attribute expression

//属性名表达式
         // 1. 对象添加属性的两种方式
         var newObj = new Object();
         newObj.name = 'html';
         newObj['age'] = '20岁';         //对象字面量的方式  se5 中字面量方式下 属性名字只能用 字符串形式。不能用 ['name']
         var newObj1 = {
            name:'css',
            age:'30岁'
         }         //SE6
         var newObj2 = {
            ['name']:'js',
            ['a' + 'ge']:'40岁',
            ['hello world']:'say hello world',
            ['say' + ' hi'](){
                console.log(this['hello world'])
            }
         }
         console.log(newObj2.name); // jss
         console.log(newObj2['hello world']);  // say hello world
         newObj2['say hi'](); // say hello world
         //！！！注意  属性名表达式是不能喝属性简写一起使用的
         var objKey = {a:1};         var newObj3 = {
            [objKey]:'我是一个对象'
         }
         console.log(newObj3);  // {[object object]:'我是一对象'}
         console.log(newObj3[{a:1}]); // 我是一个对象  
         console.log(newObj3['object object']); // undefined  是不是很奇怪啊

The above is the detailed content of Detailed explanation of object expansion in JavaScript es6. For more information, please follow other related articles on the PHP Chinese website!