对象的新增方法 —— 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):

    目标参数:报错

    扫描二维码关注公众号,回复: 6433979 查看本文章
    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. 由于undefinednull无法转成对象,就会报错。

    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()的逆操作。

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

转载于:https://juejin.im/post/5ce2ce6ee51d451061721025

猜你喜欢

转载自blog.csdn.net/weixin_33713350/article/details/91421332