js-深克隆，浅克隆

最新推荐文章于 2025-06-11 09:27:17 发布

原创最新推荐文章于 2025-06-11 09:27:17 发布 · 758 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#深克隆 #浅克隆 #javascript

javaScript 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了JavaScript中实现对象的深克隆与浅克隆的方法。通过实例代码展示了如何递归复制对象及其属性来实现深克隆，以及如何仅复制顶层属性实现浅克隆。深入探讨了对象复制过程中需要注意的问题，例如原始值与引用类型的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1深克隆

<script type="text/javascript">
    var obj={
        name:"abc",
        age:123,
        card:[' visa','master'],
        wife:{
            name:"bcd",
            son:{
                name:"aaa"
            }
        }
    }
    var obj1={};
    //深克隆


    // 遍历对象 for（ var prop in obj）
    //1.判断是不是原始值  typeof() object
    //2.判断是数组还是对象   instanceof  constructor  toString//--推荐使用：toString
    //3.建立相应的数组或对象
    //递归

    function deepClone(origin,target){
        var target = target || {},
            toStr = Object.prototype.toString,
            arrStr="[object Array]";
        for(var prop in origin){
            if(origin.hasOwnProperty(prop)){//判断是否是直系属性
                if(origin[prop]!=="null" && typeof(origin[prop])=='object'){
                    if(toStr.call(origin[prop])==arrStr){//如果是数组
                        target[prop]=[];
                    }else{//如果是对象
                        target[prop]={};
                    }
                    //递归copy每个数组或对象中的值
                    deepClone(origin[prop],target[prop]);
                }else{
                    target[prop] = origin[prop];
                }
            }
        }
        return target;
    }
</script>

2浅克隆

<script type="text/javascript">
    var obj={
        name:"abc",
        age:123,
        card:[' visa','master'],
        wife:{
            name:"bcd",
            son:{
                name:"aaa"
            }
        }
    }
    var obj1={};

    function clone(origin,target){
        var target = target || {};
        for(var prop in origin){
             if(origin.hasOwnProperty(prop)){//判断是否是直系属性
                    target[prop] = origin[prop];
            }
        }
        return target;
    }
</script>