ホームページ > 記事 > ウェブフロントエンド > JS配列とオブジェクトの深いコピーと浅いコピーの詳細な説明

JS配列とオブジェクトの深いコピーと浅いコピーの詳細な説明

小云云オリジナル: 2018-02-01 09:03:401319ブラウズ

この記事では主に js の配列とオブジェクトの深いコピーと浅いコピーについて詳しく紹介します。興味のある方は参考にしていただければ幸いです。

前提:値を代入する際のプリミティブデータ型とオブジェクト型の違い

JavaScriptのデータ型はプリミティブデータ型とオブジェクト型に分けられます。この 2 つはメモリ内で異なる方法で保存されるため、割り当てに違いが生じます。それぞれ栗を取ってみましょう

var x = 1;
 var y = x; //y获得了和x同样的值
 y = 2;
 console.log(x); // 1

 var m = [1,2]; //m存放的是指向[1,2]这个数组对象的引用地址
 var n = m; //n也获得 [1,2]数组对象的引用地址
 n[0] = 3;
 console.log(m); //[3,2]

上の栗からわかるように、元のデータ型が割り当てられると、割り当て後に実際のデータ値が与えられ、2 つの値は同じになりません。相互に影響を与えますが、オブジェクトタイプは元のデータの参照アドレスを与えるため、Shangli の配列など、本質的に同じデータオブジェクトであるため、古いデータと新しいデータは相互に影響します。浅いコピー？

名前が示すように、浅いコピーは表面的なコピー方法であり、属性値がオブジェクト型の場合、オブジェクトデータへの参照のみがコピーされるため、古いデータと新しいデータが完全に分離されず、それぞれに影響を与えます。他の。別の例を見てみましょう...

//测试数据
var array1 = [&#39;a&#39;,1,true,{name:&#39;lei&#39;,age:18}];
 
//concat() slice() 实现浅拷贝
var array2 = array1.concat()
 
//修改拷贝后的数据
array2[0] = &#39;b&#39;;      //array1[0]是原始数据类型 所以是直接赋值的
array2[3].name = &#39;zhang&#39;;  //array1[3]是对象数据类型 所以拷贝的是对象的引用，其实还是和原数组使用同一对象
 
console.log(array1);  // [&#39;a&#39;,1,true,{name:&#39;zhang&#39;,age:18}]

この例では、array2 は array1 の浅いコピーオブジェクトであり、配列要素は元のデータ型であり、相互に影響しません (array1[0])。ただし、array1[3] ] はオブジェクトタイプであり、引き続き相互に影響します。

浅いコピーの実装方法

Shangli の Array.concat() または array.slice() は、配列の浅いコピーを実装する特別な方法です。

自分で実装するにはどうすればよいですか?オブジェクト/配列の各属性を走査して、それを新しいオブジェクトに割り当てるだけで十分ではないでしょうか? 実装は次のとおりです

 //实现浅拷贝
 function shallowCopy( target ){
  if(typeof target !== &#39;object&#39;) return ;
  //判断目标类型，来创建返回值
  var newObj = target instanceof Array ? [] : {};
 
  for(var item in target){
   //只复制元素自身的属性，不复制原型链上的
   if(target.hasOwnProperty(item)){
    newObj[item] = target[item]
   }
  }
 
  return newObj
 }</strong>
 
 //测试
 
 var test = [1,&#39;a&#39;,{name:&#39;lei&#39;,age:18}];
 
 var copy = shallowCopy(test);
 console.log(copy[2].name);  //lei
 
 copy[2].name = &#39;zhang&#39;;
 console.log(test[2].name);  //zhang  原数据也被修改

深いコピーとその実装

浅いコピーから説明すると、基本的に、ディープコピーは「完全な」コピーであることがわかります。コピー後、古いデータと新しいデータは完全に分離され、オブジェクトタイプの属性値は共有されなくなり、相互に影響を与えなくなります。

実装方法:

トリッキーなメソッド JSON.parse(JSON.stringify(Obj))

var test = [1,&#39;a&#39;,{name:&#39;lei&#39;,age:18}]; 
var copy1 = JSON.parse(JSON.stringify(test)); //特殊方式 
console.log(copy1); 
copy1[2].name = &#39;zhang&#39;
console.log(test);  //[1,&#39;a&#39;,{name:&#39;lei&#39;,age:18}] 未受到影响

注: このメソッドは、属性値が関数であるオブジェクトをディープコピーすることはできません。自分で試すことができます

。

2 . 深いコピーを実装する

浅いコピーを実装しましたが、よく考えてみると、オブジェクトタイプの属性値を割り当てる場合、結果的には完全な分離にはならないはずです。値を取得し、その上で再度ディープコピーを呼び出すことで、次のようにディープコピーが実現されます。アドレスはコピーされますが、同じデータオブジェクトは引き続き使用されます。したがって、ディープコピーを実装する方法は、オブジェクトタイプの属性値を再帰的にディープコピーして、直接の割り当てを回避することです。

JS配列とオブジェクトの深いコピーと浅いコピーの詳細な説明

関連記事