對象的新增方法 —— ES6基礎總結（六）

前言

本文主要介紹ES6中對象新增的一些方法，關於對象其它擴展知識，請戳對象的擴展 —— ES6基礎總結（五）

新增方法

Object.is()

JavaScript 缺少一種運算，在全部環境中，只要兩個值是同樣的，它們就應該相等。

同值相等（Same-value equality），與 === 的行爲基本一致。

+0 === -0   // true
    Object.is(+0, -0)   // false
    
    NaN === NaN     // false
    Object.is(NaN, NaN)     // true
    
    {} === {}   // false
    Object.is({}, {})   // false
複製代碼

Object.assign()

Object.assign(target, source1, ... sourceN)

合併對象，將源對象的全部 可枚舉 屬性，合併到目標對象。

Object.assign({a: 1}, {b: 2}, {c: 3})   // {a: 1, b: 2, c: 3}
複製代碼

注意：

1. 同名屬性，後面的屬性會覆蓋前面的屬性；

   Object.assign({a: 1}, {b: 2}, {a: 11}, {b: 22})     // {a: 11, b: 22}
   複製代碼

2. 參數不是對象，會將其轉成對象再返回。轉對象失敗時（undefined和null）：

   目標參數：報錯

   Object.assign(null, {a: 1})     // Cannot convert undefined or null to object
   複製代碼

   源參數：跳過

   Object.assign({a: 1}, undefined)    // {a: 1}
   複製代碼

3. 布爾值和數值對應的包裝對象，不會被拷貝；

   Object.assign({a: 1}, true, 520)    // {a: 1}
   複製代碼

4. 只有字符串對應的包裝對象，會產生可枚舉屬性，會被拷貝；

   Object.assign({a: 1}, 'test')   // {0: "t", 1: "e", 2: "s", 3: "t", a: 1}
   複製代碼

5. Symbol值的屬性，會被拷貝；

   Object.assign({s: Symbol('s')}, {a: 1})     // {s: Symbol(s), a: 1}
   複製代碼

6. 只拷貝源對象的自身屬性（不拷貝繼承屬性），也不拷貝不可枚舉的屬性；

   Object.assign({a: 1},
       Object.defineProperty({}, 'enum', {
           enumerable: false,
           value: 'test'
       })
   )   // {a: 1}
   複製代碼

7. 淺拷貝；

   let source = {
     a: 1,
     b: {
       b1: 'test1'
     }
   }
   let target = {}
   
   Object.assign(target, source)       // {a: 1, b: {b1: "test2"}}
   
   target.b.b1 = 'test2'
   target.b.b1     // "test2"
   source.b.b1     // "test2"
   source.b === target.b   // true
   複製代碼

8. 處理數組;

   Object.assign([1, 2, 3], [4, 5])    // [4, 5, 3]
   複製代碼

Object.getOwnPropertyDescriptors()

返回指定對象全部自身屬性（非繼承屬性）的描述對象。

Object.getOwnPropertyDescriptor(): 返回某個對象屬性的描述對象。

let obj = {
        a: 1,
        fun () {
            console.log('fun')
        }
    }
    
    Object.getOwnPropertyDescriptors(obj)   
    // { 
    // a: {value: 1, writable: true, enumerable: true, configurable: true}
    // fun: {value: ƒ, writable: true, enumerable: true, configurable: true}
    // }
    Object.getOwnPropertyDescriptor(obj, 'a')   // {value: 1, writable: true, enumerable: true, configurable: true}
    Object.getOwnPropertyDescriptor(obj, 'fun')     // {value: ƒ, writable: true, enumerable: true, configurable: true}
複製代碼

Object.setPrototypeOf() & Object.getPrototypeOf()

Object.setPrototypeOf(obj, proto)：設置對象的proptotype對象，相似於__proto__。

Object.getPrototypeOf(obj)：獲取對象的proptotype對象。

let proto = {
      a: 1,
    }
    let obj = {
      b: 2
    }
    // 相似於 obj.__proto__ = proto
    Object.setPrototypeOf(obj, proto)
    
    obj.a   // 1
    obj.b   // 2
    Object.getPrototypeOf(obj) === proto    // true
複製代碼

注意：

1. obj不是對象，會自動轉成對象；

   Object.setPrototypeOf(1, {}) === 1 // true
   Object.setPrototypeOf(true, {}) === true // true
   
   Object.getPrototypeOf(1)    // Number {[[PrimitiveValue]]: 0}
   Object.getPrototypeOf(true)     // Boolean {[[PrimitiveValue]]: false}
   
   Object.getPrototypeOf(1) === Number.prototype   // true
   Object.getPrototypeOf(true) === Boolean.prototype   // true
   複製代碼

2. 因爲undefined、null沒法轉成對象，就會報錯。

   Object.setPrototypeOf(undefined, {})    // Object.setPrototypeOf called on null or undefined
   
   Object.getPrototypeOf(undefined)    // Cannot convert undefined or null to object
   複製代碼

Object.keys() & Object.values() & Object.entries()

Object.keys()：返回參數對象自身的全部可遍歷屬性的鍵名；

Object.values()：返回參數對象自身的全部可遍歷屬性的鍵值；

Object.entries()：返回參數對象自身的全部可遍歷屬性的鍵值對。

let obj = {
        a: 1,
        b: 1,
    }
    
    Object.keys(obj)    // ["a", "b"]
    Object.values(obj)      // [1, 2]
    Object.entries(obj)     // [["a", 1], ["b", 2]]
複製代碼

Object.fromEntries()

Object.entries()的逆操做，用於將一個鍵值對數組轉爲對象。

Object.fromEntries([
      ['a', 1],
      ['b', 2]
    ])      // {a: 1, b: 2}
複製代碼

配合URLSearchParams對象，將查詢字符串轉爲對象。

Object.fromEntries(new URLSearchParams('a=1&b=2'))      // {a: "1", b: "2"}
複製代碼

參考

ECMAScript 6 入門

小結

本文只要介紹了ES6中對象的一些新增方法，其中包括：

1. Object.is()： 基本行爲與===類似;
2. Object.assign()：快速合併對象，但必定要注意是淺拷貝；
3. Object.getOwnPropertyDescriptors()：是對ES5中Object.getOwnPropertyDescriptor()進行的封裝，返回對象全部的自身屬性的描述對象；
4. Object.setPrototypeOf() & Object.getPrototypeOf()：用來讀取/設置當前對象的prototype對象，與__proto__相同，兩者配合使用；
5. Object.keys() & Object.values() & Object.entries()：返回可遍歷屬性造成的一個數組；
6. Object.fromEntries()：Object.entries()的逆操做。

感謝閱讀，若有問題，歡迎指正。