JS中Object的API详解

Object的api一览表

Object的使用频率非常高，熟练掌握其拥有的api，灵活应用，很有必要

ES2019新增API

• fromEntries
  • 作用：把Object.entries转换后的二维数组重新转换为对象
  • 接受参数：目标数组

      const obj = {x:3,y:4}
      let entries = Object.entries(obj)    // [[x:3],[y:4]]
      let obj2 = Object.fromEntries(entries)   // {x:3,y:4}
  复制代码

API详解

• assign

  Object.assign(): 将多个对象合并到目标的属性合并到目标对象中，相同属性的值以最后一个合并对象的为准，返回目标对象，不改变被合并对象，可以实现浅克隆

  • 语法: Object(obj,obj1,obj2...)
  • obj: 目标对象，推荐传{}
  • obj1,obj2...: 被合并的对象，可以传多个
  • 注意: 兼容性不好，PC端IE全不兼容，移动端只有少量浏览器兼容

    let obj = {name: 'derek',age: 18}
    let obj1 ={ name: 'tom', sex: 'F' }
    let result = Object.assign({},obj,obj1,{aa:1})
    result  // => {name:'tom',age:18,sex: 'F',aa:1}
    obj   // => {name: 'derek',age: 18}
    obj1  // => { name: 'tom', sex: 'F' }
  复制代码

• create

  Object.create(): 初始化一个对象，和使用{}基本一样

  • 语法: Object.create(proto,[propertiesObject])
  • proto:新创建对象的原型对象
  • propertiesObject:可选,要添加到新对象的可枚举（新添加的属性是其自身的属性，而不是其原型链上的属性）的属性。
  • 注意: proto传null时，创建的对象没有继承Object的任何东西（调用toString等方法会报错），如果需要一个非常干净且高度可定制的对象当作数据字典的时候或者想节省hasOwnProperty带来的一丢丢性能损失可以使用，其他时间推荐使用{}

    //传 null
    let o = Object.create(null,{
      a:{
          writable:true,
          configurable:true,
          value:'1'
      }
    })
    o   // => {}
    let a =o.toString() // => toString is not a function
    // 传 {}
    let o = Object.create({},{
      a:{
          writable:true,
          configurable:true,
          value:'1'
      }
    })
    o   // => {}
    let a =o.toString() // => [object, Object]
  
  复制代码

  • defineProperty

    Object.defineProperty(obj,prop,descriptor):对obj对象上对prop属性进行定义或修改，其中descriptor为被定义或修改的属性符。其中对于descriptor属性符可以设置的值如下显示

    • value:表示属性的值，默认为undefined
    • writable:该属性是否为可写，如果直接在对象上定义属性，则默认为true。如果设置为false，则属性仅为可读。
    • configurable: 如果为false的话，则不能修改（writabel,configurable,enumerable），如果直接在对象上定义属性，则默认为true
    • enumerable:是否能够被枚举，如果直接在对象上定义属性，则默认为true
    • get:当对象访问prop属性的时候，会调用这个方法，并返回结果。默认为undefined
    • set:当对象设置该属性的时候，会调用这个方法，默认为undefined 注意：兼容性不错，移动端几乎全兼容，PC端兼容IE9以上，IE8也能运行，但是只能传dom对象

    var obj = {}, value = null;
    Object.defineProperty(obj, "num", {
        get: function(){
            console.log('执行了 get 操作')
            return value;
        },
        set: function(newValue) {
            console.log('执行了 set 操作')
            value = newValue;
        }
    })
  
    obj.num = 1 // 执行了 set 操作
  
    console.log(obj.num) // 1 执行了 get 操作
  复制代码

• getOwnPropertyDescriptor

  Object.getOwnPropertyDescriptor(obj,prop):查询prop属性存是否在对象obj上，在则返回其属性描述符，如果不存在就返回undefined

  属性描述符包括：

  • value:表示属性的值，默认为undefined
  • writable:该属性是否为可写，如果直接在对象上定义属性，则默认为true。如果设置为false，则属性仅为可读。
  • configurable: 如果为false的话，则不能修改（writabel,configurable,enumerable），如果直接在对象上定义属性，则默认为true
  • enumerable:是否能够被枚举，如果直接在对象上定义属性，则默认为true
  • get:当对象访问prop属性的时候，会调用这个方法，并返回结果。默认为undefined
  • set:当对象设置该属性的时候，会调用这个方法，默认为undefined

    let obj = {name: 'derek',age:22,sex:'M'}
    let a = Object.getOwnPrepertyDescriptor(obj,'name')
    let b = Object.getOwnPrepertyDescriptor(obj,'test')
    console.log(a) // => {value:'derek',writable: true,enumerable: true,configurable: true}
    console.log(b) // => undefined
  复制代码

• getOwnPropertyDescriptors

  Object.getOwnPropertyDescriptor(obj):返回一个对象的所有属性的属性描述符，没有属性返回{}

  属性描述符包括：

  • value:表示属性的值，默认为undefined
  • writable:该属性是否为可写，如果直接在对象上定义属性，则默认为true。如果设置为false，则属性仅为可读。
  • configurable: 如果为false的话，则不能修改（writabel,configurable,enumerable），如果直接在对象上定义属性，则默认为true
  • enumerable:是否能够被枚举，如果直接在对象上定义属性，则默认为true
  • get:当对象访问prop属性的时候，会调用这个方法，并返回结果。默认为undefined
  • set:当对象设置该属性的时候，会调用这个方法，默认为undefined

    let obj = {name: 'derek',age:22,sex:'M'}
    let a = Object.getOwnPropertyDescriptors(obj)
    console.log(a) // => {name:{value:'derek',writable: true,enumerable: true,configurable: true},age:{value:22,writable: true,enumerable: true,configurable: true}...}
    let obj = {}
    let b = Object.getOwnPrepertyDescriptor(obj)
    console.log(b) // => {}
  复制代码

• getOwnPropertyNames

  Object.getOwnPropertyNames(obj): 查找目标对象的所有key值，并返回一个包含所有key值的数组，和Object.keys()效果一致

    let obj = {name: 'derek',age:22,sex:'M'} 
    let a = Object.getOwnPropertyNames(obj)
    console.log(a) //=> ['name','age','sex']
  复制代码

• keys

  Object.keys(obj): 查找目标对象的所有key值，并返回一个包含所有key值的数组，和Object.getOwnPropertyNames()效果一致

    let obj = {name: 'derek',age:22,sex:'M'} 
    let a = Object.keys(obj)
    console.log(a) //=> ['name','age','sex']
  复制代码

• getPrototypeOf

  Object.getPrototypeOf(obj): 该方法返回对象的原型对象，如果没有的话，则返回null。

    let obj = {name: 'derek',age:22,sex:'M'} 
    let a = Object.getPrototypeOf(obj)
    console.log(a) //=> {}
  复制代码

• is

  Object.is(val1,val2): 是确定两个值是否是相同的值,

  • 注意：与===相比，其会将-0和+0看成不等，并且对于两个NaN的比较，Object.is()会看成是相等的，而===会将0、-0、+0看成相等的，两个NaN看成不等

    Object.is(0,-0) // => false
    Object.is(0,0) // => true
    Object.is(NAN,0/0) // => true
    Object.is(3,3/1) // => true
  复制代码

• preventExtensions

  Object.preventExtensions(obj):让一个对象永远不能添加新的属性，严格模式下会报错

    let obj = {name: 'derek'}
    obj.age = 22 
    console.log(obj.age) // => 22
    Object.preventExtensions(obj)
    obj.sex = 'M'  // 报错
    obj._proto_.sex = 'M'  //可以在原型对象上添加属性
    console.log(obj.sex) // => 'M'
  复制代码

• isExtensible

  Object.isExtensible(obj): 判断一个对象是否可以修改属性,是放回true，反之返回false

    let obj = {name: 'derek'}
    Object.isExtensible(obj) //=> true
  复制代码

• seal

  Object.seal(obj):对一个对象进行密封，并返回被密封的对象，这些对象都是不能够添加属性，不能删除已有属性，以及不能够修改已有属性的可枚举型、可配置型、可写性

    let obj = {name: 'derek'}
    Object.seal(obj)
    obj.name = 'tom' // 可以修改原有属性对应的值
    console.log(obj) // => {name:'tom'}  
    obj.test = 'test' // 不能给对象添加新属性
    console.log(obj)  // => {name: 'tom'}
    delete obj.name   // 不能删除对象的属性
    console.log(obj)  // => {name: 'tom'}
  复制代码

• isSealed

  Object.isSealed(obj): 判断一个对象是否被密封,是放回true，反之返回false

    let obj = {name: 'derek'}
    Object.isSealed(obj) //=> false
    Object.freeze(obj)
    Object.isSealed(obj) //=> true
  复制代码

• freeze

  Object.freeze(obj):浅冻结一个对象，使其不能做任何修改，深层级的还是可以修改

    let obj = {name: 'derek',child:{age:18}}
    Object.freeze(obj)
    obj.name = 'tom' // 不能修改原有属性对应的值
    console.log(obj) // => {name:'derek'}  
    obj.test = 'test' // 不能给对象添加新属性
    console.log(obj)  // => {name: 'derek'}
    delete obj.name   // 不能删除对象的属性
    console.log(obj)  // => {name: 'derek'}
  
    obj.child.age=22 // 可以对深层级的进行修改
    console.log(obj.child) // => {age:22}
  复制代码

  如果要实现深度冻结，可以通过递归来实现

    Object.prototype.deepFreeze = Object.prototype.deepFreeze || function (o){
      let prop, propKey
      Object.freeze(o) // 首先冻结第一层对象
      for (propKey in o){
          prop = o[propKey];
          if(!o.hasOwnProperty(propKey) || !(typeof prop === "object") || Object.isFrozen(prop)){
              continue;
          }
          deepFreeze(prop); // 递归
      }
    }
  复制代码

• isFrozen

  Object.isFrozen(obj): 判断一个对象是否被冻结,是放回true，反之返回false

    let obj = {name: 'derek'}
    Object.isFrozen(obj) //=> false
    Object.freeze(obj)
    Object.isFrozen(obj) //=> true
  复制代码

• getOwnPropertySymbols

  Object.getOwnPropertySymbols(obj): 返回一个对象中所有以Symbol类型为key的的数组

    let obj = {name: 'derek'}
    let a =Object.getOwnPropertySymbols(obj)
    console.log(a) // => []
    let sys = Symbol()
    obj[sys] = 'test'
    let b =Object.getOwnPropertySymbols(obj)
    console.log(b) // => [Symbol()]
  复制代码

• entries

  Object.entries(obj): 将对象中的所有key:value转为[key,value]格式，返回包含所有健值对的二维数组

    let obj = {name: 'derek',age:18}
    let result = Object.entries(obj) 
    console.log(result) // => [['name','derek'],['age',18]]
  复制代码

• values

  Object.values(obj): 返回一个对象的所有value值的数组集合

    let obj = {name: 'derek',age:18}
    let result = Object.values(obj) 
    console.log(result) // => ['derek',18]
  ``复制代码

转载于:https://juejin.im/post/5c9257aef265da60e86e0c7b