美文网首页
原生JavaScript对象复制

原生JavaScript对象复制

作者: 天乡墨客 | 来源:发表于2017-10-11 00:39 被阅读0次

    简单深度复制

        var a = {
            a:1,
            b:2,
            c:{
                d:4,
                e:5
            },
            f:6
        };
        function simpleDeepClone(obj){
            return JSON.parse(JSON.stringify(obj));
        }
        var c = simpleDeepClone(a);
        console.log(a); //{a:1, b:2, c:{d:4, e:5}, f:6}
        console.log(c); //{a:1, b:2, c:{d:4, e:5}, f:6}
    
        a.g = 4;
        console.log(a); //{a:1, b:2, c:{d:4, e:5}, f:6, g:4}
        console.log(c); //{a:1, b:2, c:{d:4, e:5}, f:6}
    
        c.h = 5;
        console.log(a); //{a:1, b:2, c:{d:4, e:5}, f:6}
        console.log(c); //{a:1, b:2, c:{d:4, e:5}, f:6, h:5}
    

    对象合并或者称为浅复制(对象只是复制应用,原对象改变会影响新对象,新对象改变不会影响原来的对象)

            // 会改变第一个对象参数的值
        function mergeClone() {
            var len = arguments.length;
            var target;
            if (typeof arguments[0] === 'object')
                target = arguments[0];
            else
                target = arguments[0] = {};
            for (var index = 1; index < len; index++) {
                if (typeof arguments[index] === 'object')
                    target = Object.assign(target, arguments[index])
            }
            return target;
        }
    
    
        // 不会改变原有参数的值
        function mergeClone() {
            var target = {};
            for (var index in arguments) {
                if (typeof arguments[index] === 'object')
                    target = Object.assign(target, arguments[index])
            }
            return target;
        }
    
            // 上面的复制改变新对象对原有对象没有影响,但改变原有对象对新对象有影响
            var a = {a:1, b:2, c:{d:4, e:5 }, f:6 };
            var c = {hi: 'hi', hello: 'world'};
            var newObj = mergeClone(a, c);
        console.log(newObj) // {a:1, b:2, c:{d:4, e:5}, f:6, h:5, hello: 'world', hi: 'hi'}
            // 在上面的consloe语句前面怎么加如下语句后打印出来的结果是:
            a.c.d = 123;
        console.log(newObj) // {a:1, b:2, c:{d:123, e:5}, f:6, h:5, hello: 'world', hi: 'hi'}
            c.lol = 456;
        console.log(newObj) // {a:1, b:2, c:{d:123, e:5}, f:6, h:5, hello: 'world', hi: 'hi'}
            // 也就是说如果合并的对象里的属性是对象,他只是获取引用
    

    高级深度复制

        // 聪明的你早就看来了这个只是上面2个函数的合体
        function deepClone() {
            var target = {};
            for (var index in arguments) {
                if (typeof arguments[index] === 'object')
                    target = Object.assign(target, arguments[index])
            }
            return JSON.parse(JSON.stringify(target));
        }
            // 但是这样就完全可以旧对象中的子对象对变化对新对象的影响
    

    相关文章

      网友评论

          本文标题:原生JavaScript对象复制

          本文链接:https://www.haomeiwen.com/subject/gtciyxtx.html