js深拷贝和浅拷贝

2021-08-19

一.什么是深拷贝和浅拷贝

浅拷贝:对内存地址的复制，让目标对象指针和源对象指向同一片内存空间。注意：当内存销毁的时候，只想对象的指针，必须重新定义，才能够使用
深拷贝:深拷贝是指，拷贝对象的具体内容，二内存地址是自主分配的，拷贝结束之后俩个对象虽然存的值是一样的，但是内存地址不一样，俩个对象页互相不影响，互不干涉

二.实现一个简单浅拷贝

var a = 20
var b = a
var obj = {
    name:'小吴',
    age:20
}
var obj2 = obj

三.实现深拷贝

3.1 JSON.parse(JSON.stringify())

var Person = {
            name: 'dadaguai',
            age: 20,
            dog: {
                name: 'xiaobai',
                age: 2
            },
            friends: [{ name: 'xiaoxiaoguai', age: 18 }],
            run: function () {
                console.log('我会运动')
            }
        }
var copyPerson = JSON.parse(JSON.stringify(person))
person.friends[0].name = 'wuyupei'
console.log(Person, copyPerson);//打印结果中，没有把原来的函数拷贝过来

3.2自定义函数实现深拷贝

3.2.1 首先实现一个简单的浅拷贝思路:创建一个新的对象，遍历需要克隆的对象，将需要克隆对象的属性依次添加到新对象上，返回。

function clone(target) {
    const cloneTarget = {}
    for (const key in target) {
        cloneTarget[key] = target[key]
    }
    return cloneTarget
}

3.2.2 对上面clone函数进行改造实现深拷贝

function clone(target,map = new Map()) {
           // 首先判断target是否是一个对象类型  如果不知 直接把原来的值返回出去
           if (!(typeof target === 'object')) return target

           const cloneTarget = Array.isArray(target) ? [] : {}
           if (map.get(target)) {
               return map.get(target);
           }
           map.set(target, cloneTarget);
           for (const key in target) {
               cloneTarget[key] = clone(target[key],map)
           }
           return cloneTarget
       }
       const copyPerson = clone(Person)
       console.log(Person, copyPerson);

2021-11-22 补充:

对深拷贝完善

// 深拷贝
var s = Symbol('aaa')
var s2 = Symbol('bbb')
const obj = {
    name: 'wuyupei',
    age: 12,
    friend: {
        name: 'liuxu',
        age: 3
    },
    colors: ['block', 'red'],
    foo: function () {
        console.log('foo');
    },
    [s]: 'aaa',
    s2: s2,
    set: new Set([1, 2, 3]),
    map: new Map([['name', 'wuyupei'], ['age', '20']])
}
obj.info = obj
// 判断类型
function wytypeof(target) {
    let res = Object.prototype.toString.call(target).split(' ')[1]
    return res.substring(0, res.length - 1)
}
// 判断是否使对象类型
function isObject(target) {
    var targetType = typeof target
    return target !== null && (targetType === 'object' || targetType === 'function')
}

function deepCopy(target, map = new WeakMap()) {

    if (!isObject(target)) {
        return target
    }
    if (wytypeof(target) === "Set") {
        return new Set([...target])
    }
    if (wytypeof(target) === "Map") {
        return new Map([...target])
    }
    // 处理函数
    if (wytypeof(target) === 'Function') {
        return target
    }
    // 处理symbol
    if (wytypeof(target) === 'Symbol') {
        return Symbol(target.description)
    }
    // 处理循环引用问题
    if (map.has(target)) {
        return map.get(target)
    }
    // 处理数组
    const newObj = (wytypeof(target) === "Object") ? {} : []
    // 记录拷贝过的对象
    map.set(target, newObj)
    for (const key in target) {
        newObj[key] = deepCopy(target[key], map)
    }

    // 遍历Symbal  Object.getOwnPropertySymbols
    const symbolKeys = Object.getOwnPropertySymbols(target)
    for (const skey of symbolKeys) {
        newObj[skey] = deepCopy(target[skey], map)
    }

    return newObj
}

var newObj = deepCopy(obj)
obj.name = 'growing'
obj.friend.name = 'xiaoxiaoguai'
obj.colors[0] = '00'
obj.s2 = Symbol('1212')
console.log(obj, newObj);