JSON对象实现深度克隆

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSON对象实现深度克隆相关的知识,希望对你有一定的参考价值。

cloneObj = function(obj)
var newobj = obj.constructor === Object ? : [];
if(typeof JSON === 'object')
var s = JSON.stringify(obj), //系列化对象
newobj = JSON.parse(s); //反系列化(还原)
else
if(newobj.constructor === Array)
newobj.concat(obj);
else
for(var i in obj)
newobj[i] = obj[i];



return newobj;
;
这是js深度克隆的一般实现,这儿JSON这个对象为什么一直没有查到,JSON对象所带的方法如Stringify是新定义的???

JSON 是 ecma5新定义的对象,你要在 现代浏览器中才能有,如果你用ie6这样的浏览器就找不到,这个是先检查有没有JSON这个对象有的话就用这个对象深拷贝,没有的话自己实现,你这个自己实现的方法,不是深度拷贝,而是浅拷贝 参考技术A cloneObj = function(obj)
var newobj = obj.constructor === Object ? : [];
if(typeof JSON === 'object')
var s = JSON.stringify(obj), //系列化对象
newobj = JSON.parse(s); //反系列化(还原)
else
if(newobj.constructor === Array)
newobj.concat(obj);
else
for(var i in obj)
newobj[i] = obj[i];



return newobj;
参考技术B 百度百度百度

26.JavaScript实现对象混合与对象浅度克隆和对象的深度克隆

JavaScript实现对象混合与对象浅度克隆和对象的深度克隆

1.实现对象混合:

this.myPlugin = this.myPlugin || {};


/**
 * 将obj2混合到obj1产生新对象
 * 实现方式1
 */
this.myPlugin.mixObj = function (obj1, obj2) {
    var newObj = {};
    //把obj2对象中的所有属性和值,赋值到newObj中
    for (var prop in obj2) {
        if (obj2.hasOwnProperty(prop)) { //obj2继承的属性不被混合
            newObj[prop] = obj2[prop];
        }
    }
    //找到obj1中有但是obj2中没有的属性
    for (var prop in obj1) {
        if (obj1.hasOwnProperty(prop) && !(prop in obj2)) {
            newObj[prop] = obj1[prop];
        }
    }

    return newObj;
}

/**
 * 将obj2混合到obj1产生新对象
 * 实现方式2
 */
this.myPlugin.mixObj = function (obj1, obj2) {
    return Object.assign({}, obj1, obj2);
}
myPlugin.js

调用对象混合:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/myPlugin.js"></script>
    <script>
        var obj1 = {
            x:1,
            y:2,
            z:3
        }
        var obj2 = {
            x:"abc",
            a:4,
            y:"bcd"
        }
        var obj = myPlugin.mixObj(obj1, obj2);
        console.log(obj);
    </script>
</body>
</html>
index.html

效果展示:

 

 

2.实现对象浅度克隆和深度克隆

this.myPlugin = this.myPlugin || {};


/**
 * 把某个对象进行浅度克隆或深度克隆
 * @param {boolean} deep 是否深度克隆,默认false
 */

this.myPlugin.clone = function (obj, deep) {
    if (Array.prototype.isPrototypeOf(obj)) { //是数组
        if (deep) { //深度克隆
            var newObj = [];
            for (var i = 0; i < obj.length; i++) {
                newObj.push(this.clone(obj[i], deep));
            }
            return newObj;
        } else {
            return obj.slice(); //返回一个数组
        }
    } else if ((typeof obj === "object") && (typeof obj !== null)) {
        var newObj = {};
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                if (deep) {
                    newObj[prop] = this.clone(obj[prop], deep);
                } else {
                    newObj[prop] = obj[prop];
                }
            }
        }
        return newObj;
    } else {
        //函数、原始类型:null, string, undefined, boolean, number
        return obj; //递归的终止条件
    }

}
myPlugin.js

调用对象浅度克隆:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/myPlugin.js"></script>
    <script>
        var obj1 = {
            array:[
                function(){},
                null,
                "string",
                undefined,
                1,
                false
            ],
            obj:{
                value1:null,
                value2:undefined,
                value3:"string",
                value4:1,
                value5:true
            }
        }
        
    </script>
</body>
</html>
index.html

效果展示:

 

 调用对象深度克隆:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/myPlugin.js"></script>
    <script>
        var obj1 = {
            array:[
                function(){},
                null,
                "string",
                undefined,
                1,
                false
            ],
            obj:{
                value1:null,
                value2:undefined,
                value3:"string",
                value4:1,
                value5:true
            }
        }
        
    </script>
</body>
</html>
index.html

效果展示:

 

以上是关于JSON对象实现深度克隆的主要内容,如果未能解决你的问题,请参考以下文章

Js如何实现对json克隆

js对象拷贝的方法

如何创建和克隆 JSON 对象?

克隆解析服务器对象

ES6学习一--ES5

26.JavaScript实现对象混合与对象浅度克隆和对象的深度克隆