jsでの浅いコピーと深いコピーの実装方法は何ですか？（要約）-jsチュートリアル-php.cn

jsでの浅いコピーと深いコピーの実装方法は何ですか？（要約）

不言

リリース： 2018-09-18 14:58:22

オリジナル

7794 人が閲覧しました

この記事でわかることは、jsにおける浅いコピーと深いコピーの実装方法とは何なのかということです。（要約）必要な友人が参考になれば幸いです。

js には、string、number、boolean、null、undefind の 5 つの基本データ型があります。これら 5 種類の割り当ては値の転送です。オブジェクトの割り当ては、オブジェクトアドレスへの参照を割り当てることです。このとき、オブジェクト内のプロパティまたは値を変更すると、オブジェクトへのすべての参照の値が変更されます。オブジェクトへの参照をコピーするのではなく、実際に新しいオブジェクトをコピーしたい場合は、オブジェクトのディープコピーを使用する必要があります。

浅いコピー実装

1.「=」割り当て。

あまり言う必要はありませんが、最も基本的な代入方法は、単にオブジェクトへの参照を割り当てることです。

2.Object.assign()

Object.assign は ES6 の新しい関数です。 Object.assign() メソッドは、ソースオブジェクト自体の列挙可能なプロパティを任意の数だけターゲットオブジェクトにコピーし、ターゲットオブジェクトを返すことができます。ただし、Object.assign() は浅いコピーを実行し、オブジェクト自体ではなく、オブジェクトのプロパティへの参照をコピーします。

Object.assign(target, ...sources)

ログイン後にコピー

パラメータ:
target: ターゲットオブジェクト。
sources: 任意の数のソースオブジェクト。
戻り値: 対象のオブジェクトが返されます。

var obj = { a: {a: "hello", b: 21} };
var initalObj = Object.assign({}, obj);

initalObj.a.a = "changed";
console.log(obj.a.a); // "changed"

ログイン後にコピー

次のことに注意してください:
Object.assign() は、次のように 1 つのレイヤーのディープコピーを処理できます:

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = Object.assign({}, obj1);
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

ログイン後にコピー

ディープコピー

1。手動コピー

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

ログイン後にコピー

2. JSON 文字列変換

JSON.stringify を使用してオブジェクトを文字列に変換し、JSON.parse を使用して文字列を新しいオブジェクトに変換します。

var obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.body.a = 20;
console.log(obj1);
// { body: { a: 10 } } <-- 沒被改到
console.log(obj2);
// { body: { a: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.body === obj2.body);
// false

ログイン後にコピー

これは真のディープコピーです。この方法はシンプルで使いやすいです。

しかし、このメソッドには、オブジェクトのコンストラクターが破棄されるなど、多くの欠点もあります。つまり、ディープコピー後は、オブジェクトの元のコンストラクターが何であっても、ディープコピー後はオブジェクトになります。

このメソッドが正しく処理できるオブジェクトは、Number、String、Boolean、Array、およびフラットオブジェクト、つまり、json で直接表現できるデータ構造のみです。 RegExp オブジェクトをこの方法でディープコピーすることはできません。

つまり、この方法で使用できるのは JSON 形式に変換できるオブジェクトのみです。関数は JSON に変換できません。

var obj1 = { fun: function(){ console.log(123) } };
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun);
// 'function'
console.log(typeof obj2.fun);
// 'undefined' <-- 没复制

ログイン後にコピー

3. 再帰コピー

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : {};            
      arguments.callee(prop, obj[i]);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}
var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);
console.log(str.a);

ログイン後にコピー

4. Object.create() メソッドを使用します

ディープコピー効果を実現するには、var newObj = Object.create(oldObj) を直接使用します。。

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}

ログイン後にコピー

5.jquery

jquery は、ディープコピーに使用できる $.extend を提供します。

var $ = require('jquery');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f);
// false

ログイン後にコピー