JS之浅拷贝、深拷贝

浅拷贝与深拷贝

1. 浅拷贝： 赋值拷贝，A只拷贝B的引用地址，改变A的值，B的值也会改变 。

示例：

 <script>
        var arr1 = [1, 2, 3, 4, 5]
        var arr2 = arr1      
        arr2[0] = 5          
        console.log(arr2)  //输出[5, 2, 3, 4, 5]
        console.log(arr1);  //同样输出[5, 2, 3, 4, 5]
    </script>

2. 深拷贝：用for循环或函数赋值拷贝，改变A的值，B的值不改变

先讲讲数组的深拷贝： 这里先介绍三种

①for循环拷贝：

<script>
        var arr = [1, 2, 3, 4, 5]
        var arr1 = arrCopy(arr) 
        function arrCopy(arr1){
            var arr2 = []
            for(var i=0; i<arr.length; i++){
                arr2.push(arr[i])
            }
            return arr2
        }
        arr1[0] = 2
        console.log(arr1);   //输出[2, 2, 3, 4, 5]
        console.log(arr);   //输出[1, 2, 3, 4, 5]
</script>

解释：进行深拷贝后，改变arr1的值，arr的值并没有改变。

②slice()方法：

<script>
        var arr = [1, 2, 3, 4, 5]
        var arr2 = arr.slice(0)  //  只写start索引0，不写end索引，默认切出arr数组的所有元素
        arr2[0] = 2
        console.log(arr2);  //输出[2, 2, 3,  4, 5]
        console.log(arr);    //输出[1, 2, 3,  4, 5]
</script>

解释： 同上。

③contact()方法：

<script>
        var arr = [1, 2, 3, 4, 5]
        var arr2 =arr.concat()   //arr.concat()方法创建一个新数组
        arr2[2] = 4
        console.log(arr2);  //输出[1, 2, 4, 4, 5]
        console.log(arr);    //输出[1, 2, 3, 4, 5]
</script>

解释： 同上。

再讲讲对象的深拷贝：这里先介绍两种

①for循环(var in)：

<script>
        var obj = {
            name: 'james',
            age: 22,
            gender: '男'
        }
        var obj2 = objCopy(obj)
        function objCopy(obj){
            var obj3 = {}
            for(var pro in obj){             //遍历obj对象的每一个属性
                obj3[pro] = obj[pro]          
            }
            return obj3
        }
        obj2.name = 'john'
        console.log(obj2);  //输出{age: 22，gender: "男"，name: "john"}
        console.log(obj);  //输出{age: 22，gender: "男"，name: "james"}
</script>

解释：进行深拷贝后，改变obj2的值，obj的值并没有改变。

②转换成JSON字符串再转换为JS对象：

<script>
        var obj = {
            name: 'james',
            age: 22,
            gender: '男'
        }
        var obj2 = JSON.parse(JSON.stringify(obj))
        obj2.age = 25
        console.log(obj2);  //输出{age: 25，gender: "男"，name: "james"}
        console.log(obj);  //输出{age: 22，gender: "男"，name: "james"}
</script> 

解释：同上。

完。

文章供自身学习与巩固，若能帮到大家我也很开心。
如有不当和错误，望大家多指点，谢谢。