zoukankan      html  css  js  c++  java
  • javascript对象和数组之 深拷贝和浅拷贝

    管是在面试中还是我们的项目中经常会用到数组或者对象的深拷贝,下面我就自己总结的分享给大家。

    首先要知道什么是深拷贝?什么是浅拷贝?

           深拷贝:源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另外一个对象造成影响。

           浅拷贝:拷贝出来的目标对象的指针和源对象的指针指向的内存空间是同一块空间。

    1、对象(object)的深拷贝和浅拷贝:

      1.1对象的浅拷贝:

    1 var a={x:0,y:0};
    2 var b=a;
    3       a.x=2;
    4 console.log(a); //=>Object {x: 2, y: 0}
    5 console.log(b); //=>Object {x: 2, y: 0}

    1.2对象的深拷贝的几种方法:

      方法1:利用JSON.parse();

    var obj1={x:0,y:0};
    var obj2=JSON.parse(JSON.stringify(obj1));
        obj1.x=2;
      console.log(obj1);  //=>Object {x: 2, y: 0}
      console.log(obj2);  //=>Object {x: 0, y: 0}

    方法2:es6中的Object.assign();

    var obj1={x:1,y:1};
    var obj2=Object.assign({},obj1);
        obj1.x=2;
    console.log(obj1);//=>Object {x: 2, y: 1}
    console.log(obj2);//=>Object {x: 1, y: 1}

      2、数组(Array)的深拷贝和浅拷贝:

      2.1数组的浅拷贝:

    var arr1=[1,2,3];
    var arr2=arr1;
        arr1.push(5);
      console.log(arr1);//=>[1, 2, 3, 5]
      console.log(arr2);//=>[1, 2, 3, 5]

       2.2数组深拷贝的几种方法:

    方法一:利用slice()方法:

         var arr=[1,2,3];
         var arr2=arr.slice();
             arr.push(4);
          console.log(arr); //=>[1, 2, 3, 4]
          console.log(arr2);//=>[1, 2, 3]

        方法二:利用 Object.assign() 方法:  

    var arr=[1,2,3];
    var arr2=Object.assign([],arr);
        arr.push(4);
       console.log(arr);//=>[1, 2, 3, 4]
       console.log(arr2);//=>[1, 2, 3]

    方法三:数组的 concat() 方法:  

    var arr=[1,2,3];
    var arr2=arr.concat();
        arr.push(4);
       console.log(arr);//=>[1, 2, 3, 4]
       console.log(arr2);//=>[1, 2, 3]

            方法四:es6中的扩展运算符:  

    let arr=[1,2,3];
    let [...arr2]=arr;
        arr.push(4);
       console.log(arr);//=>[1, 2, 3, 4]
       console.log(arr2);//=>[1, 2, 3]

    方法五:通过遍历将值赋值

     let arr=[1,2,3];
     let arr2=arr.map((item,index)=>{
               return item;
          })
         arr.push(4);
        console.log(arr);//=>[1, 2, 3, 4]
        console.log(arr2);//=>[1, 2, 3]

     通过以上5中方法实现了数组的深拷贝,数组arr1和数组arr2相互独自,互不影响。

  • 相关阅读:
    Oracle+Ado.Net(四)
    Oracle+Ado.Net(三)
    json-server 详解
    在线字体图标
    HTML页面模板代码
    CSS样式重置
    WEB前端开发流程总结
    大前端-全栈-node+easyui+express+vue+es6+webpack+react
    大前端全栈CSS3移动端开发
    jQuery学习
  • 原文地址:https://www.cnblogs.com/style-hyh/p/10477905.html
Copyright © 2011-2022 走看看