当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 26.JavaScript实现对象混合与对象浅度克隆和对象的深度克隆

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

2020年05月04日  | 移动技术网IT编程  | 我要评论

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);
}

调用对象混合：

<!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>

效果展示：

 

 

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; //递归的终止条件
    }

}

调用对象浅度克隆：

<!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>

效果展示：

 

 调用对象深度克隆：

<!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>

效果展示：

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网