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]
  ``複製代碼