js中Object那些不常用的方法

猛虎嗅薔薇發表於2019-04-03
JSObject

算是一個記錄練習把，或者是回顧一下編輯器自動補出來的方法，或許有一些只是看著熟悉，但是沒用過呢？ 比如下面這樣

js中Object那些不常用的方法
一個點引出了很多方法，但是你真的用過這些嗎？

  • 一. Object屬性

    Object.length 【值為 1】

    Object.prototype 【老相識了，給物件新增屬性】

  • 二.Object方法

    1、Object.assign(target, source): 通過複製一個或多個物件來建立一個新的物件

      1.會複製後面的源物件到前面的目標物件，不會忽略symbol，也不會忽略null和undefined、
  2.該方法我們經常用於前後端處理資料的時候合併物件
  3.如果有相同的屬性，則後面的源物件覆蓋前面的源物件，最後覆蓋目標物件
複製程式碼
    Object.assign({}, obj1, obj2, obj3)
複製程式碼

    2、Object.keys()、Object.values()、Object.entries() 這三個方法我們算是常用的了，都返回陣列，只不過返回值不一樣

      keys返回的是可列舉屬性組成的陣列
  values返回的是可列舉屬性的值組成的陣列
  entries返回鍵值對陣列
複製程式碼
    Object.entries({a: 1}, {b: 2}) // [["a", 1], ["b", 2]]
複製程式碼
      我們可以把獲取到的陣列再進行遍歷等操作
複製程式碼

    3、Object.defineProperties(obj, props) 在物件上定義新屬性，或者修改現有屬性，然後返回物件,obj就是目標物件，props是我們設定的時候各種引數，具體的欄位可以自行查閱，這裡舉一個例子

    var obj = {}
Object.defineProperties(obj, {
  'a': {
    writable: true,
    value: 'aaa'
  },
  'b': {
    writable: false,
    value: 'bbb'
  }
})
obj.a = 'aaaa'
obj.b = 'bbbb'
複製程式碼
      當我們定義好了obj之後，可以看到a和b定義的時候writable的不同,我理解為可寫，是可以被賦值、
  被改變的，如果是false的時候，就會報錯，大家不妨試試
複製程式碼

    4、Object.defineProperty(obj, prop, descriptor) 是不是發現和上面的這個方法很像啊，前一個算是可以同時加好幾個屬性，當前的這個方法只能加一個，直接看一個例子

    Object.defineProperty(obj, 'a', {
  enumerable: false, // 置為true的時候，才能出現在列舉屬性中
  configurable: false, // 該屬性才能被改變，同時該屬效能在物件上被刪除
  writable: true,
  value: '測試'
})
複製程式碼

    5、Object.freeze() 凍結大法。凍結一個物件，使其不能被新增屬性、刪除、改寫等操作。

    var obj = {a : 1}
Object.freeze(obj)
Object.defineProperty(obj, 'a', {
    value: '修改一下'
}) // 報錯 TypeError: Cannot redefine property: a
    
obj.a = 'ccc' //如果直接賦值的話 
   // TypeError: Cannot assign to read only property 'a' of object '#<Object>'
複製程式碼

    6、Object.isFrozen(obj) 顧名思義，判斷是不是被凍結，返回的肯定是一個Boolean了

    7、Object.seal()、Object.isSealed() 密封和判斷是否被密封。密封是在當前物件屬性的基礎上，進行封閉，不讓新增和修改屬性，如果已有屬性是可寫的，那就可以改變，否則不能改變。

    var obj = {a : '1'}

Object.seal(obj)

obj.a = '2' // 可寫

Object.defineProperty(obj, 'b', {
  writable: true,
  value: '測試'
}) // 報錯 不能新增

delete obj.a // 報錯 不能刪除
複製程式碼

    8、Object.getOwnPropertyNames() 返回物件的屬性名組成的陣列，包括不可列舉屬性，但是不包括Symbol型別的屬性

    let getObjs = { a: 1, b: 2, c: 3}
const arr = Object.getOwnPropertyNames(getObjs) ['a', 'b', 'c']

------------------------------------------------------------------------
getObjs[Symbol('foo')] = 'symbol' // 新增一個symbol屬性
Object.getOwnPropertyNames(getObjs) // ['a', 'b', 'c'] 還是a\b\c

複製程式碼

    9、Object.getOwnPropertySymbols() 返回物件屬性為Symbol的。 還是跟著上面的例子

    const arr1 = Object.getOwnPropertySymbols(getObjs) [Symbol(foo)]
是不是隻返回了symbol的
複製程式碼

    10、Object.getOwnPropertyDescriptor() 返回一個單個屬性的描述符，就是我們上面多次提到的descriptor，比如defineProperty的第三個引數

    let des = Object.getOwnPropertyDescriptor(getObjs, "a") 
-------------------------------------------------------
// 返回值是物件 預設是下面的形式
{
    configurable: true
    enumerable: true
    value: 1
    writable: true
}
複製程式碼

    11、Object.getOwnProperty返回一個所有屬性的描述符，可以和上面的一個做比較，一個是返回指定屬性，一個是所有屬性，注意返回值是一個陣列

    12、Object.fromEntries() 把鍵值對列表轉化為一個物件，前面的時候我們知道了entries，是把物件轉化為鍵值對的陣列

    var obj = {
    a: 'a1',
    b: 'b1',
    c: 'c1'
}

Object.entries(obj) // [["a", "a1"], ["b", "b1"], ["c", "c1"]]

Object.fromEntries(Object.entries(obj)) // 把鍵值對陣列轉化為物件
複製程式碼

    雖說我們在使用的時候，只會用到常用的一些迴圈，其餘的還是要作為了解，作為知識儲備知道的，保不齊哪天就能拿來撩妹了呢？

相關文章