JS----對象的合並與克隆


一. 合並與克隆的差別

1. 克隆是特殊的合並(以空對象作為目標對象,非空對象作為源對象進行合並),克隆要求目標對象與源對象的 constructor相同。

2. 克隆的源對象只有一個,合並的源對象可以是多個。

二. 合並的方法

1.Object.assign():

例:var obj1 ={

      m : 1,

      n : 2,

      j : {

           r : {

              h : 2

            },

           p : 4 } ,

      p : 1

   }

       var obj2 ={ m : 2 , n : undefined, j : { h : 2 ,o:  3}}

       var obj3 = Object.assign(obj1,obj2);

結果:obj1 = { m : 2,n : undefined, j : { h : 2, o : 3 }, p : 1 };

           obj2 ={ m : 2 , n : undefined, j : { h : 2, o : 3 } };

           obj3 ={ m : 2 , n : undefined, j : { h : 2, o : 3 }, p : 1 };

注意:1).  目標對象自身也會變  obj1===obj3

           2). 此方法為淺合並

           3). undefined參與合並

           4). 原型不屬性參與合並

 2. $.extend:

情況一:

例:var obj1 ={ m : 1, n : 2, j : { r : { h : 2 }, p : 4 }, p : 1 }

       var obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } }

       var obj3 = $.extend(obj1,obj2);

結果:obj1 = { m : 2, n : 2, j : { h : 2, o : 3 }, p : 1 };

           obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } };

           obj3 ={ m : 2, n : 2, j : { h : 2, o : 3 }, p : 1 };

注意:1).  目標對象自身也會變  obj1===obj3

           2). 此方法為淺合並

           3). undefined不參與合並

           4). 原型不屬性參與合並

 

情況二:

例:var obj1 ={ m : 1, n : 2, j : { r : { h : 2 }, p : 4 }, p : 1 }

       var obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } }

       var obj4 = $.extend({},obj1,obj2);

結果:obj1 = { m : 1, n : 2, j : { r : { h : 2 }, p : 4 }, p : 1 };

           obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } };

           obj3 ={ m : 2, n : 2, j : { h : 2, o : 3 }, p : 1 };

注意:1).  此方法為淺合並

           2). undefined不參與合並

           3). 原型不屬性參與合並

情況三:

例:var obj1 ={ m:1,n:2,j:{r:{h:2},p:4},p:1}

       var obj2 ={m:2,n:undefined,j:{h:2,o:3}}

       var obj3 = $.extend(true,obj1,obj2);

結果:obj1 = {m:2,n:2,j:{h:2,o:3,r:{h:2},p:4},p:1};

           obj2 ={m:2,n:undefined,j:{h:2,o:3}};

           obj3 ={m:2,n:2,j:{h:2,o:3,r:{h:2},p:4},p:1};

注意:1).  目標對象自身也會變  obj1===obj3

           2). 此方法為深合並

           3). undefined不參與合並

           4). 原型不屬性參與合並

3. 遍歷賦值法 

思路:將obj2中存在的屬性但obj1不存在的屬性賦值給obj1。

步驟:1). 遍歷obj2中屬性。

           2). 判斷obj1不存在此屬性

           3). 將次值賦給obj1

var extentObj = function(obj1,obj2){

    for(let key in obj2){

     if(obj2.hasOwnProperty(key) && (!obj1.hasOwnProperty(key))){

    obj1[key] = obj2[key]

   }

  }

 

}

 

 三. 克隆的方法

1. JSON.parse(JSON.stringify()):

    1). 先將對象變為字符串,然后再變為json對象,防止對象的指針指向問題,為深拷貝

     2). undefined 和 function 類型的屬性會被忽略,而 Date 類型的屬性則會被轉換為字符串

 2. $.extend:

    傳true為深拷貝,不傳為淺拷貝

注意:深拷貝與淺拷貝的區別

淺拷貝直接把引用地址原樣拿來,此時,不管源對象還是目標對象,修改引用屬性后另一個對象的同名屬性都會受到影響。

深拷貝則會遞歸地在目標對象上創建值,目標對象和源對象之間將完全獨立


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM