zoukankan      html  css  js  c++  java
  • 9.对象的拓展

    对象的扩展

    一.属性和方法的简洁表示

    1. ES6为对象的属性和方法增加了更为简洁的表示方法

    2. ES6允许在对象中,直接写变量,变量名为对象的属性名,变量的值为对象属性的值

      var name = 'hello';
      var age = 18;
      
      var obj = {
          name,
          age
      }
      
      =>等价于
      var obj = {
          name:'hello',
          age:18
      }
      
    3. 方法的简写方式

      var obj = {
          sayHello:function(){
              alert("hello!");
          }
      }
      
      =>
      
      var obj = {
          sayHello(){
              alert('hello');
          }
      }
      

    二.属性名表达式

    1. ES6允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内

      • 注意:属性名简洁法和属性名表达式不可以同时使用,会报错
      var first = 'firstName';
      var obj = {
          ['na' + 'me']:'小明',
          ['first']:'欧阳'
      }
      
      =>
      var obj = {
          name:'小明'
          firstName:'欧阳'
      }
      
    2. 表达式还可以用来定义方法名

      var obj = {
          ['say' + 'Hello'](){
              alert('hello');
          }
      }
      

    三.属性的可枚举和遍历

    1. 属性的可枚举性

    • 对象的每一个属性都有一个描述对象(Descriptor),用来控制该属性的行为,Object.getOwnpropertyDescriptor方法可以获取该属性的描述对象
    let obj = {foo:'123'}
    Object.getOwnPropertyDescriptor(obj,'foo');
    //返回
    {
        configurable: true,
        enumerable: true,
        value: 123,
        writable: true,
        __proto__: Object
    }
    
    • 描述对象的 enumerable属性,称为可枚举性,如果该属性为false,表示某些操作会忽略当前属性
    • 目前,有四个操作会忽略 enumerable 属性为 false的情况
      • for...in循环,只遍历对象自身的和可继承的可枚举属性
      • Object.keys(),返回对象自身的所有可枚举属性的键名
      • JSON.stringify(),只串行化对象自身的可枚举属性
      • Object.assign(),忽略 enumerable 为false的属性,只拷贝对象自身可枚举的属性

    2. 属性的遍历

    • ES6一共有5种方法可以遍历对象的属性
      • for...in:循环遍历自身的可继承的可枚举属性
      • Object.keys():返回一个数组,包含对象自身的所有可枚举属性(不含继承的)
      • Object.getOwnPropertyNames(obj):返回一个数组,包含对象自身的所有属性的键名(包括不可枚举属性)
      • Reflect.ownKeys(obj):返回一个数组,包含对象自身所有的键名

    四.super关键字

    1. ES6新增一个super关键字,指向当前对象的原型对象
    2. super关键字表示原型对象时,只能用在对象的方法中,用在其他地方会报错
    //报错,用在属性上
    const obj = {
        foo:super.foo
    }
    
    //报错,用在函数,但是赋值给了属性
    const obj = {
        foo:() => super.foo
    }
    
    //报错,用在函数,但是赋值给了属性
    const obj = {
        foo:function(){
            return super.foo
        }
    }
    

    五.对象的拓展运算符

    1. 解构赋值

    • 由于解构赋值要求右边是一个对象,所以如果等号右边是undefined或者null,就会报错
    //报错
    let {...x} = null;
    let {...x} = undefined;
    
    • 解构赋值必须是最后一个参数,否则报错
    //报错
    let {x,...y,z} = someObj;
    
    • 注意:解构赋值的拷贝为浅拷贝,即如果一个键的值是复合类型的值,那么拷贝的是这个值的引用,而不是这个值的副本

    六.对象的新增方法

    1. Object.is()

    • 判断两个值是否相等,类似于 ===

    2. Object.assign()

    • 用于对象的合并,将源对象的所有可枚举属性,复制到目标对象
      • 注意:
      • 浅拷贝
      • 同名属性的替换
      • 可以用来处理数组,但是把数组当对象
      • 如果复制的是一个取值函数,那么会求值后再复制
    • 用途:
      • 为对象添加属性
      • 为对象添加方法
      • 克隆对象
      • 合并多个对象

    3. Object.getOwnPropertyDescriptor

    • 返回对象属性的描述对象

    4. _proto_属性

    • Object.setPrototypeOf():设置一个对象的原型对象
    • Object.getPrototypeOF():读取一个对象的原型对象

    5. Object.keys(),Object.values(),Object.entries()

    • Object.keys():获取对象的键值数组
    • Object.values():获取对象的属性值数组
    • Object.entries():获取对象的键值数组

    6. Object.fromEntries

    • 该方法是Object》entries的逆操作,将数组转换为对象

    总结

    1. 在ES6中,对象的属性和方法可以采用简洁的表示方法
    2. 对象的属性名可以采用表达式的方式来设置
    3. 对象的每一个属性,都拥有可枚举和遍历的属性
    4. super关键字,可以用来获取原型对象的属性,但是只能用在对象内置的方法中
    5. 对象的扩展运算符,同数组
    6. 对象新增了一些方法,了解即可,具体需要用到的时候,再详细查看
  • 相关阅读:
    vlan原理与配置
    路由协议-ospf
    路由协议-rip
    人品
    阿波罗礼赞
    跳石头
    FBI树
    方程求解
    循环比赛
    国王的游戏
  • 原文地址:https://www.cnblogs.com/mapengfei247/p/11116720.html
Copyright © 2011-2022 走看看