拷贝-优快云博客

本文详细解析了JavaScript中对象的浅拷贝与深拷贝的区别及实现方法，包括使用for循环、Object.assign()进行浅拷贝，以及利用JSON.parse(JSON.stringify())实现深拷贝的过程，并展示了不同拷贝方式下原始数据与拷贝数据的变化情况。

 1 <script type="text/html">
 2     var obj1 = {
 3         'name': '撩课',
 4         'age': 2
 5     };
 6     var obj2 = {};
 7 
 8     for(var key in obj1){
 9         obj2[key] = obj1[key];
10     }
11     obj1.age = 30;
12     console.log(obj1);
13     console.log(obj2);
14 
15 </script>

<script type="text/html">
    var obj1 = {
        'name': '撩课',
        'age': 2
    };
    var obj2 = {};

    Object.assign(obj2, obj1);//合并
    obj2.age = 100;
    console.log(obj1);
    console.log(obj2);
</script>

上面的两种都是浅拷贝

 1 <script>
 2     var p = {
 3         'name': '张三',
 4         'pets': ['哈哈', '旺财', '小旺旺']
 5     };
 6 
 7     var copyP = {};
 8     Object.assign(copyP, p);
 9 
10     p.pets.push('我好的和我大河网');
11     console.log(copyP);
12     console.log(p);
13 </script>
14 
15 会增加，影响原数据

深拷贝

 1 <script>
 2     var obj = {
 3         name: '撩课',
 4         age: 18,
 5         friends: ['小花', '小黑'],
 6         goodF: {
 7             name: '小撩',
 8             age: 19,
 9             address: '上海',
10             pets: [{name: '土豆'}, {name: '马铃薯'}]},
11         bir: new Date()
12     };
13 
14     var newObj = JSON.parse(JSON.stringify(obj));
15 　　通过这样就是深拷贝，不会相互影响
16     obj.goodF.pets[0].name = '哈哈哈哈哈哈哈哈';
17     console.log(newObj);
18     console.log(obj);
19 
20     //不管改新的，和旧的都不会相互影响  存在缺陷（递归来做）
21 </script>