js---深拷贝和浅拷贝

浅拷贝：

只是拷贝了一层，遇到更深层次的对象会新开辟出空间。

拷贝的是地址引用。

oldList和newList指向的是同一个数据/同一个地址；

数据相互影响：

修改了一个数据会改变另一个数据，

浅拷贝

1.eg：

    <script>
        var list = {
            id: 1,
            name: '管理员'
        }
        var newList = {};
        //K是属性名       list[k]是属性值 
        for (var k in list) {
            //将原先list的数据赋值给
            //注意大小写*
            newList[k] = list[k]
        }
        console.log(newList);

//打印结果：
//{id: 1, name: "管理员"}
//id: 1
//name: "管理员"
//__proto__: Object
    </script>

2.eg： 给oldLIst新增一个对象

administer: {
                pid: 1,
                username: 'administer'

            }

然后打印newLIst

    <script>
        var oldList = {
            id: 1,
            name: '管理员',
            //新增一个对象
            administer: {
                pid: 1,
                username: 'administer'

            }


        }
        var newList = {};
        //K是属性名       list[k]是属性值 
        for (var k in oldList) {
            //将原先list的数据赋值给
            //注意大小写*
            newList[k] = oldList[k]
        }
        console.log(newList);
       //打印结果：
      // administer: { pid: 1, username: "administer" }
      //id: 1name: "管理员"__proto__: Object
</script>

3.eg :  新的newList  修改 pid的值    pid的值1  =>    2.         

   <script>
        var oldList = {
            id: 1,
            name: '管理员',
            //新增一个对象
            administer: {
                pid: 1,
                username: 'administer'
              }
             }
        var newList = {};
        //K是属性名       list[k]是属性值 
        for (var k in oldList) {
            //将原先list的数据赋值给
            //注意大小写*
            newList[k] = oldList[k]
        }
        //修改  Pid的值
       newList.administer.pid = 2

        console.log(newList);
       //打印结果：
      // administer: { pid: 2, username: "administer" }
      //id: 1name: "管理员"__proto__: Object
</script>

说明  ： oldList和newList指向的是同一个数据/同一个地址；

数据相互影响：

拓展：  用 k  in  比较繁琐      

es6新增了一个浅拷贝的语法糖 :Object.assign('拷贝给谁' ，'拷贝那个对象')

1.eg       新的复制旧的

    <script>
        var oldList = {
            id: 1,
            name: '管理员',
            //新增一个对象
            administer: {
                pid: 1,
                username: 'administer'
            }
        }
        var newList = {};
        //es6新增了一个浅拷贝的语法糖 :Object.assign('拷贝给谁' ，'拷贝那个对象')
        //把oldList，拷贝给newList
        Object.assign(newList, oldList)
      
        console.log(newList);
       //打印结果：
       //administer: {pid: 1, username: "administer"}
       //id: 1
       //name: "管理员"
    </script>

2.eg            新的 newLIst修改   pid的值

  <script>
        var oldList = {
            id: 1,
            name: '管理员',
            //新增一个对象
            administer: {
                pid: 1,
                username: 'administer'
            }
        }
        var newList = {};
        //es6新增了一个浅拷贝的语法糖 :Object.assign('拷贝给谁' ，'拷贝那个对象')
        //把oldList，拷贝给newList
        Object.assign(newList, oldList)
        //修改  Pid的值
        newList.administer.pid = 2
        console.log(newList);
       //打印结果：
       //administer: {pid: 2, username: "administer"}
       //id: 1
       //name: "管理员"
    </script>

深拷贝

1.采用递归的方式。 递归：自身调用自身.

1.eg1

    <script>
        var oldList = {
            id: 1,
            name: '管理员',
            //新增一个对象
            administer: {
                pid: 1,
                username: 'administer'
            }
        }
        var newList = {};
        function deepCopy(newLis, oldList) {
            for (var k in oldList) {
                //1.简单数据类型直接拷贝
                //2.复杂数据类型Object遍历  复杂数据类型包括：  1.数组Array 2.函数function 3.对象 object 
                //3.判断数据类型
                //K是属性名       list[k]是属性值 
                var judge = oldList[k]
                if (judge instanceof Object) {
                    //判断这个值是否为对象
                    newList[k] = {}
                    //递归
                    deepCopy(newList[k], judge)
                } else {
                    //简单数据类型
                    newList[k] = judge
                }
            }
        }
        //调用函数
        deepCopy(newList, oldList)

        console.log(newList);
       //打印结果：
       //administer: {}
       //id: 1
       //name: "管理员"
       //pid: 1
       //username: "administer"
    </script>

2.eg2  修改了newList.administer.pid 的值为 2

   <script>
        var oldList = {
            id: 1,
            name: '管理员',
            //新增一个对象
            administer: {
                pid: 1,
                username: 'administer'
            }
        }
        var newList = {};
        function deepCopy(newLis, oldList) {
            for (var k in oldList) {
                //1.简单数据类型直接拷贝
                //2.复杂数据类型Object遍历  复杂数据类型包括：  1.数组Array 2.函数function 3.对象 object 
                //3.判断数据类型
                //K是属性名       list[k]是属性值 
                var judge = oldList[k]
                if (judge instanceof Object) {
                    //判断这个值是否为对象
                    newList[k] = {}
                    //递归
                    deepCopy(newList[k], judge)
                } else {
                    //简单数据类型
                    newList[k] = judge
                }
            }
        }
        //调用函数
        deepCopy(newList, oldList)
        //2.eg2修改了newList.administer.pid 的值为 2
        newList.administer.pid = 2

        console.log(newList);
        //pid的 结果与1.eg1中打印结果 一致.  
        //结论：深拷贝是重新开辟了空间，对原来的值没有影响
       //打印结果：
       //administer: {}
       //id: 1
       //name: "管理员"
       //pid: 1
       //username: "administer"
    </script>

-是把新的内存空间重新复制了一份，

-oldList和newList指向的是不同的空间，

-newLIst新的，拷贝旧的不会修改值，

-深拷贝是重新开辟了空间，对原来的值没有影响，

所以修改newList只会影响自己的值，