Object.asign

Object.asign()对象的拷贝

作用

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

定义

Object.asing(target,...sources)

  • target 目标对象
  • source 源对象(可多个)

例子

const obj1 = {
    a: 1,
    b: 2,
    c: 3,
    d: [1,2,3,4]
}
const obj2 = {
    e: 22,
    f: 'eee',
    d: ['d','s','dss','4']
}
const c = Object.assign(obj1, obj2)
console.log(c)
console.log(obj1)

最终输出c和obj1的结果都为:

{a: 1, b: 2, c: 3, d: Array(4), e: 22, …}
a: 1
b: 2
c: 3
d: (4) ['d', 's', 'dss', '4']
e: 22
f: "eee"
[[Prototype]]: Object

由结果我们可以得出Object.assign(target, ...source)返回的目标对象包含源对象,如果源对象中存在同目标对象的属性,源对象的值将会覆盖目标对象的值

注意:

  1. 如果目标对象中的属性方法具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
  2. Object.assign方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关的getter和setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter。这可能使其不适合将新的属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor(),和Object.defineProperty()

因为Object.assign方法只会拷贝源对象自身的并且可枚举的属性到目标对象,当我们修改对象c的d属性值时候,obj2也会相应改变。Object.assign()方法拷贝的是属性值。加入源对象的属性值是一个对象的引用,那么它也只只想那个引用。

深拷贝方法

  1. JSON.parse(JSON.stringify())
  2. 递归方法

hasOwnProperty

hasOwnProperty作用是在一个对象里面找是否有某个属性或对象,但是不会在他的原型中找,返回boolean类型,一般用来过滤for in循环,for in循环中,会遍历对象原型中的属性,如果js代码太多,封装了一些组件,大概就是模块化开发那种,一个对象继承了另一个对象,你或许不知道这个对象继承了那个对象,就可以在遍历的时候用hasOwnProperty过滤了。

function _deepClone(source){
    let target = Array.isArray(source)? [] : {}
    if(typeof source === 'object') {
        
        for(let key in source) {
            if(source.hasOwnProperty(key)) {
                console.log(typeof source[key])
                if(typeof source[key] !== 'object') {
                    target[key] = source[key]
                } else {
                    target[key] = _deepClone(source[key])
                }
            } 
        }
        console.log(target)
    } else {
        target = source
    }
    return target
}
const a = {d:'33', b:[29,'dsd'],e:{s: 'hello'}}
const b = _deepClone(a)
console.log(b) // {d:'33', b:[29,'dsd'],e:{s: 'hello'}}
b.d = 'dd'
console.log(a, b) {d:'33', b:[29,'dsd'],e:{s: 'hello'}} , {d:'dd', b:[29,'dsd'],e:{s: 'hello'}}
posted @ 2022-03-31 11:39  upupupupupgo  阅读(91)  评论(0编辑  收藏  举报