Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Objekterweiterung in JavaScript es6

Detaillierte Erläuterung der Objekterweiterung in JavaScript es6

黄舟
黄舟Original
2017-08-13 10:31:211433Durchsuche

1. Es gibt immer noch viele Browser, die die es6-Syntax nicht direkt verwenden können. Insbesondere einige Browser niedrigerer Versionen auf Mobiltelefonen. Alle müssen mithilfe von Ballen umgebaut werden.

Allerdings in den aktuell gängigen Frameworks (Vue, React, Angular). Jedes verfügt über ein eigenes Gerüst und kann mithilfe eines Webpacks konvertiert werden. Oder konfigurieren Sie Webpack, FIS3, Nowa und andere Konvertierungen direkt selbst.

Immer noch nicht glücklich.

2. Prägnantes Schreiben von Attributen


//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. Attributausdrücke


//属性名表达式
         // 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  是不是很奇怪啊

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Objekterweiterung in JavaScript es6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn