对象的扩展

作者: 前白 | 来源:发表于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');
        }
    };
    /*  */

相关文章

  • JQuery插件

    类扩展: 对象扩展:

  • 《ECMAScript 6 入门》笔记

    变量的解构赋值 字符串的扩展 正则的扩展 数值的扩展 函数的扩展 数组的扩展 对象的扩展 对象的新增方法 表单验证...

  • 对象的扩展

    属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 Object.is(...

  • 对象的扩展

    对象的扩展 属性和方法简写 var foo ='bar' var baz = {foo} <=> va...

  • 对象的扩展

    1、属性方法的简洁表示 属性简写 var foo='foo'; var goo= {'foo':foo};可以写成...

  • 对象的扩展

    属性的简洁表示法 属性名表达式 方法的 name 属性 Object.is() Object.assign() 属...

  • 对象的扩展

    属性的简结表示法 属性名表达式 Object.is() Object.assign() Object.keys()...

  • 对象的扩展

    一、属性的简介表示法 (1)ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁 上面代码表明...

  • 对象的扩展

    ** 参考**书籍:ECMAScript 6 入门作者:阮一峰 属性的简洁表示法ES6 允许直接写入变量和函数,作...

  • 对象的扩展

    简而言之,对象的扩展就是通过类似于 extend 的方法,将对象的功能进行方便的管理(删除或者添加或者是修改)。 ...

网友评论

    本文标题:对象的扩展

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