对象的新增方法 —— 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() 的逆操作。

感谢阅读，如有问题，欢迎指正。