js进阶：对象的克隆

在js中，有时候写对象太麻烦了，就需要克隆一个对象，对象就是无序属性的集合，属性值可以是任意数据类型。

而克隆就是:复制出一份一摸一样的数据,但是操作时,二者相互不影响。

先创建一个user带有属性的对象和创建一个空的新对象obj,遍历一个原始对象user,将属性一一追加到新对象obj当中

<script>       
         var user = {
            name: "天才",
            role: "用户",
            age: 22
        }


        var obj = {}


        for(var k in user){
            // k属性名  user[k]属性值
            obj[k]=user[k]
        }

        console.log(obj);
        obj.role='管';
        console.log(obj,user)//没有相互影响
 </script>

控制台输出如下图

当然还有更加简单的办法

方法：可以使用object.assign(test,s1,s2,s3...)实现上述对象的克隆操作

把s1,1,2,3这些对象的属性,合并到目标对象test当中

    <script>
        var temp=Object.assign({},user)//{}表示一个空对象
        console.log(temp);

        temp.age=198;//改变数值
        console.log(temp,user)//同样也没有相互影响
</script>

并且改变temp中的age属性user中的age没有改变，互相不影响如下图控制台输出所示：

 以上克隆属于浅克隆，就是说只克隆对象的第一层数据而已，深层次的依然是赋值的行为，还会互相影响，下面的例子：在对象中再创建一个属性是对象的值。

<script>

   var userfo={
                name:'jon',
                age:34,
                ch:{
                    neme:'小明',
                    age:1
                }

        }


    var res=Object.assign({},userfo);
    console.log(res,userfo) ;
    res.age=59;
    console.log(res,userfo);//没有相互影响


</script>

 改变第一层的数据输出，感觉还是没有影响，如下图

 但是当我们改变对象res中ch属性里面的值时

<script>
        var userfo={
                name:'jon',
                ag:34,
                ch:{
                    neme:'小明',
                    age:1
                }

        }

    var res=Object.assign({},userfo);
    console.log(res,userfo) ;
    res.ag=59;
    console.log(res,userfo);//没有相互影响

    res.ch.age=10;
    console.log(res,userfo);//有影响



</script>

 结果如下：

可以发现 不止res对象的ch中age值改变了，连同对象userfo里的ch里面的age值也改变了，这是什么原因，这就要谈到数据类型了。深层的克隆和数据类型下期会有更加详细的解说。创作不易，多支持转发点赞