javascript對象和數組之 深拷貝和淺拷貝

管是在面試中仍是咱們的項目中常常會用到數組或者對象的深拷貝，下面我就本身總結的分享給你們。

首先要知道什麼是深拷貝？什麼是淺拷貝？

       深拷貝：源對象與拷貝對象互相獨立，其中任何一個對象的改動都不會對另一個對象形成影響。

       淺拷貝：拷貝出來的目標對象的指針和源對象的指針指向的內存空間是同一塊空間。

一、對象(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}

  二、數組(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相互獨自，互不影響。