JS对象的拷贝

浅拷贝
let obj1 = {
    name:‘pan‘
}

let obj2 = obj1

obj2.name = ‘rui‘

console.log(obj1)  // { name: rui}
console.log(obj1 === obj2) //true

深拷贝方法1:JSON.parse(JSON.stringify(obj))
let obj1 = {
    name:‘pan‘
}

let obj2 = JSON.parse(JSON.stringify(obj1))

obj2.name = ‘rui‘
console.log(obj1)  //{name:pan}

console.log(obj2)    //{name:rui}
console.log(obj1 === obj2) //false
//缺点:对象必须遵从JSON的格式
let obj1 = {
  a: ‘1‘,
  b: ‘2‘,
  c: function func() {}
}

let obj4 = JSON.parse(JSON.stringify(obj1))

console.log(obj4) //{ a: ‘1‘, b: ‘2‘ } 好像漏了些什么

深拷贝方法2:Object.assign(target, …sources)
//Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
// 复制
let c = Object.assign({}, { a: ‘apple‘ });
console.log(c); // { a: ‘apple‘ }

//合并
let o = {}
let c = Object.assign(o, { a: ‘apple‘ }, { b: ‘banana‘ }, { c: ‘cake‘ } )
console.log(c) // { a: ‘apple‘, b: ‘banana‘, c: ‘cake‘ }

//如果对象本身存在的属性会更新,不存在的属性会增加
let o = {
  name:‘pan‘
}
let oo = {
  name:‘rui‘,
  id:100
}

let c = Object.assign(o, oo);
console.log(o);    //{name:‘rui‘,id:100}
console.log(oo);//{name:‘rui‘,id:100}
console.log(c);//{name:‘rui‘,id:100}

// 判断是否为对象
function isObject(o) {
    return (typeof o === ‘object‘ || typeof o === ‘function‘) && o !== null
}
//测试用例需要的对象
let test = {
    num: 0,
    str: ‘‘,
    boolean: true,
    unf: undefined,
    nul: null,
    obj: {
        name: ‘我是一个对象‘,
        id: 1
    },
    arr: [0, 1, 2],
    func: function() {
        console.log(‘我是一个函数‘)
    },
    date: new Date(0),
    reg: new RegExp(‘/我是一个正则/ig‘),
    err: new Error(‘我是一个错误‘)
}

深度拷贝方法3:迭代递归法 for...in
// 迭代递归法：深拷贝对象与数组
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error(‘obj 不是一个对象！‘)
    }
    //判断传进来的是对象还是数组
    let isArray = Array.isArray(obj)  
    let cloneObj = isArray ? [] : {}
    //通过for...in来拷贝
    for (let key in obj) {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    }

    return cloneObj
}
let result = deepClone(test)

console.log(result)

for (let key in result) {
    if (isObject(result[key]))
        console.log(`${key}相同吗？ `, result[key] === test[key])
}
//我们发现，arr 和 obj 都深拷贝成功了，它们的内存引用已经不同了，但 func、date、reg 和 err 并没有复制成功，因为它们有特殊的构造函数。

深度拷贝方法4:迭代递归法 Reflect 
// 代理法
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error(‘obj 不是一个对象！‘)
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [...obj] : { ...obj }
    Reflect.ownKeys(cloneObj).forEach(key => {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    })

    return cloneObj
}

let result = deepClone(test)

console.log(result)

for (let key in result) {
    if (isObject(result[key]))
        console.log(`${key}相同吗？ `, result[key] === test[key])
}
//结果其实和使用for...in相同。

function customizer(value) {
  if (_.isElement(value)) {
    return value.cloneNode(true);
  }
}

var el = _.cloneDeepWith(document.body, customizer);
 
console.log(el === document.body);
// => false
console.log(el.nodeName);
// => ‘BODY‘
console.log(el.childNodes.length);
// => 20

改造for...in
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error(‘obj 不是一个对象！‘)
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [] : {}
    let symKeys = Object.getOwnPropertySymbols(obj)
    // console.log(symKey)
    if (symKeys.length > 0) {
        symKeys.forEach(symKey => {
            cloneObj[symKey] =  isObject(obj[symKey]) ? deepClone(obj[symKey]) : obj[symKey]
        })
    }
    for (let key in obj) {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    }

    return cloneObj
}

let childTest = Object.create(test)
let result = deepClone(childTest)

//定义对象
Object.defineProperties(test, {
    ‘obj‘: {
        writable: false,
        enumerable: false,
        configurable: false
    },
    ‘arr‘: {
        get() {
            console.log(‘调用了get‘)
            return [1,2,3]
        },
        set(val) {
            console.log(‘调用了set‘)
        }
    }
})

function deepClone(obj, hash = new WeakMap()) {
    if (!isObject(obj)) {
        return obj
    }
    // 查表，防止循环拷贝
    if (hash.has(obj)) return hash.get(obj)

    let isArray = Array.isArray(obj)
    // 初始化拷贝对象
    let cloneObj = isArray ? [] : {}
    // 哈希表设值
    hash.set(obj, cloneObj)
    // 获取源对象所有属性描述符
    let allDesc = Object.getOwnPropertyDescriptors(obj)
    // 获取源对象所有的 Symbol 类型键
    let symKeys = Object.getOwnPropertySymbols(obj)
    // 拷贝 Symbol 类型键对应的属性
    if (symKeys.length > 0) {
        symKeys.forEach(symKey => {
            cloneObj[symKey] = isObject(obj[symKey]) ? deepClone(obj[symKey], hash) : obj[symKey]
        })
    }

    // 拷贝不可枚举属性,因为 allDesc 的 value 是浅拷贝，所以要放在前面
    cloneObj = Object.create(
        Object.getPrototypeOf(cloneObj),
        allDesc
    )
    // 拷贝可枚举属性（包括原型链上的）
    for (let key in obj) {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key], hash) : obj[key];
    }

    return cloneObj
}