JS:深拷贝

深拷贝:

是将其他对象的属性值拷贝过来,且那个对象的属性值并不受到影响,但那个对象和接收拷贝属性的对象并不是同一个对象。

 

 

1、如果内部没有引用数据或者时间正则null等等数据时

        var obj={name:"lili"};                
        var str=JSON.stringify(obj);//'{"name":"lili"}'    
        var obj2=JSON.parse(str);//{name:"lili"}    
        console.log(obj2,obj==obj2);//{name:"lili"}  false

*stringify():将一个 JavaScript 对象或值转换为 JSON 字符串

*parse():将字符串转换为 JavaScript 对象

注意:

obj和obj2值相同,但不是同一个对象

var str=JSON.stringify(obj);

var obj2=JSON.parse(str);

以上两句可以等价于==>var obj2=JSON.parse(JSON.stringify(obj));

 

2、内部有引用数据或者时间正则null等等数据时

        var obj = {
            x1: null,
            x2: new Date(),
            x3: "hello",
            son: {
                age: 20
            },
            x4: new RegExp('\\w+'),
            x5:function(){}
        }
        var obj2 = JSON.parse(JSON.stringify(obj));
        console.log(obj2, obj);

打印结果:

 

 这里的obj2和obj对比:

x2/x4/x5都不是拷贝的结果。

 

3、基本数据类型和引用数据类型

因此,对于这些特殊的类型我们可以将其拷贝方式都封装进一个函数内:

        var obj = {
            x1: null,
            x2: new Date(),
            x3: "hello",
            son: {
                age: 20
            },
            x4: new RegExp('\\w+'),
            x5: function () {}
        }

        function clone(obj) {
            // 当null NaN undefined number string等基本数据类型时直接返回
            if (obj === null || typeof obj !== 'object') {
                return obj
            }
            // Date类型
            if (obj instanceof Date) {
                const copy = new Date()
                copy.setTime(obj.getTime())
                return copy
            }
            // 正则类型类型
            if (obj instanceof RegExp) {
                const Constructor = obj.constructor
                return new Constructor(obj)
            }
            // 数组等引用数据类型
            if (obj instanceof Array || obj instanceof Object) {
                const copyObj = Array.isArray(obj) ? [] : {}
                for (const key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        copyObj[key] = clone(obj[key])
                    }
                }
                return copyObj
            }
        }
        var obj2;
        obj2= clone(obj);
        console.log(obj2,obj);

这次再对比一下打印结果就是一样的了:

 

posted on 2022-06-26 21:37  香香鲲  阅读(72)  评论(0编辑  收藏  举报