对象的扩展

作者: 前白 | 来源:发表于2019-08-12 09:41 被阅读20次

    对象的改变分为对象的扩展和对象的新增方法。

    对象的扩展和新增的方法都有哪些?

    1:属性的简洁表示法

        //在ES6中的写法:
        const week = 'week';
        const year = {
            week,
            hello() {
                console.log('我的名字是', this.name);
            }
        };
        year;
        /* { week: "week", hello: ƒ } */
        
        
        //正常写法:
        const week = 'week';
        const year = {
            week,
            hello:function() {
                console.log('我的名字是', this.name);
            }
        };
    

    2:属性名表达式

        const obj = {};
        objp['a' + 'bc'] = 123;
        
        obj;
        /*{ abc : 123 }*/
    

    3:方法name属性

        const person = {
            speakName(){
                console.log('hello');
            },
        };
        
        person.speakName.name;
        /* "speakName" */
    

    4:可枚举性(enumerable)

    在我们其他的一些需要获取对象枚举属性的时候,也就是获取对象的key,对象的方法时,如果有了这个enumerale可枚举性,那么我们才能获取得到;反之,没有的话就获取不到。常见的有四个:

    • for...in
    • Object.keys()
    • JSON.stringify()
    • Object.assign()
        let obj = { week: 123 };
        Object.getOwnPropertyDescriptor(obj, 'week');
        
        /*
        {
            value: 123,
            writable: true,
            enumerable: true,
            configurable: true
        }
        */
    

    5:属性遍历

    • for...in 遍历对象自身的和继承的可枚举性属性(不含Symbol)
          for ( s in { [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) {
              console.log(s)
          }
          /* 2 10 b a */
    
    • Object.keys 包括对象自身的(不含继承的)所有可枚举性(不含Symbol 属性)的键名
          Object.keys({ [Symbol()] : 0, b:0, 10:0, a:0 })
          /* ['2', '10', 'b', 'a'] */
    

    for in 和 object.keys都是一样的,先返回数字的枚举然后再返回字母枚举,最后如果有Symbol就返回当然了object.keys是不支持Symbol的。

    • Object.getOwnPropertySymbols 对象自身的所有Symbol属性的键名
         Object.getOwnProertySymbol({ [Symbol()] : 0, b:0, 10:0, a:0 })
         /* [Symbol()] */
      
    • Object.getOwnProertyNames 包含自身对象的所有(不可枚举属性)属性(不包含Symbol)的键名
         Object.getOwnPropertyNames({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
         /* ["2", "10", "b", "a"] */
      
    • Reflect.ownKeys 包含自身对象的所有键名(不包含继承)
         Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
         /* ['2', '10', 'b', 'a', Symbol()] */
      
    • 顺序——数字——字符——Symbol

    6:super 关键字

    在ES6中,super是指向当前对象的原型对象(只能用在对象的方法之中)

        const proto = {
            week: 'hello'
        };
        
        const obj = {
            week: 'world',
            find() {
                return super.week;
            }
        };
        
        obj.__proto__ = proto;
        // Object.setPrototypeOf(obj, proto);
        
        obj.find();
        /* "hello" */
        
        
        const obj = {
            week: super.week
        }
        /* SyntaxError: 'super' keyword unexpected here */
        
        
        const obj = {
            week: () => super.week
        }
        /* SyntaxError: 'super' keyword unexpected here */
        
        
        const obj = {
            week: function () {
                return super.week
            }
        }
        /* SyntaxError: 'super' keyword unexpected here */
    

    7:解构

        let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
        x;
        /* 1 */
        y;
        /* 2 */
        z;
        /* { a: 3, b: 4 } */
        
        
        let { ...z } = null;
        /* TypeError: Cannot destructure 'undefined' or 'null'. */
        let { ...z } = undefined;
        /* TypeError: Cannot destructure 'undefined' or 'null'. */
        
        let { ...x, y, z } = { x: 1, y: 2, a: 3, b: 4 };
        /* Uncaught SyntaxError: Rest element must be last element */
    

    8:扩展运算符

        let z = { a: 3, b: 4 };
        let n = { ...z };
        n;
        /* { a: 3, b: 4 } */
        
        let week = { ...['a', 'b', 'c'] };
        week
        /* { 0: "a", 1: "b", 2: "c" } */
        
        {...'hello'}
        /* { 0: "h", 1: "e", 2: "l", 3: "l", 4: "o" } */
        
        let ab = { ...a, ...b };
        let ab = Object.assign({}, a, b);
        
        let aWithXGetter = {
            ...a,
            get x() {
                throw new Error('not throw yet');
            }
        };
        /*  */
    

    相关文章

      网友评论

        本文标题:对象的扩展

        本文链接:https://www.haomeiwen.com/subject/efryjctx.html