对象的扩展

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

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

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://my.oschina.net/u/4144971/blog/3092755

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值