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]
  ``复制代码