ホームページ > ウェブフロントエンド > jsチュートリアル > JS のディープ コピーとシャロー コピーの簡単な分析

JS のディープ コピーとシャロー コピーの簡単な分析

不言
リリース: 2018-10-20 14:33:06
転載
2795 人が閲覧しました

この記事では、js のディープ コピーとシャロー コピーについて簡単に分析します。必要な方は参考にしていただければ幸いです。

ディープ コピーとシャロー コピーについては、実際には比較的基本的な 2 つの概念ですが、まだ非常に興味深い細かい詳細がたくさんあるため、整理したいと思います。

ディープ コピーとシャロー コピーの違い

ディープ コピーとシャロー コピーは、誰もがよく聞く 2 つの用語であり、その違いは何でしょうか。

まずシャローコピーとは何かを見てみましょう。

var obj1 = { a: 1, b: 2 };
var obj2 = obj1;
obj2.a = 3;

console.log(obj1); // { a: 3, b: 2 }
console.log(obj2); // { a: 3, b: 2 }
ログイン後にコピー

これは、obj1 を obj2 に割り当て、それに応じて obj1 の対応する属性値も変更された、最も単純な例です。

浅いコピーは実際には参照の単なるコピーであるため、両方ともメモリ内の同じアドレスを指し続けます。つまり、obj1 と obj2 は実際には同じオブジェクトを指します。たとえば、家番号 1 が家番号 2 に置き換えられた部屋のようなものですが、この部屋はまだ同じ部屋です。

その後、ディープ コピーとは、2 つが異なるメモリ アドレスを指していることを意味し、これが真のコピー です。上の部屋を例に挙げると、単に番地を変更しただけではなく、実際に新しい部屋をオープンしたことになります。

Object.assign() について話します

Object.assign() は私たちがよく使うメソッドです。実際、このメソッドは浅いコピーです。しかし、これには特別な点があり、最初の層の深いコピーを処理できるということです。

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = Object.assign({}, obj1);
obj2.a = 3;
obj2.b.c = 3;
console.log(obj1); // { a: 1, b: { c: 3 } }
console.log(obj2); // { a: 3, b: { c: 3 } }
ログイン後にコピー

上の例を見ると、属性 a の値は変更されていませんが、属性 b の c の値は変更されています。

ディープ コピーを実装するために一般的に使用される方法

JSON

これはディープ コピーを実装するために最も一般的に使用される方法です。例を見てください:

var obj1 = { a: { b: 1 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
ログイン後にコピー

This kind このメソッドはシンプルで使いやすいですが、オブジェクトのコンストラクターを破棄するという点で少し欠点があります。つまり、ディープ コピー後は、オブジェクトの元のコンストラクターが何であっても、ディープ コピー後はオブジェクトになります。

そして、このメソッドが正しく処理できる唯一のオブジェクトは、Number、String、Boolean、Array、つまり JSON で直接表現できるデータ構造です。 RegExp オブジェクトまたは関数をこの方法でディープ コピーすることはできません。

lodash

これは私が現在使用している方法です。var obj2 = _.cloneDeep(obj1) という 1 行だけで実現できます。さらに、lodash は非常に強力なライブラリであり、提供されるメソッドは信頼性が高く、シンプルです。これは、怠け者にとっては本当に必需品です。

以上がJS のディープ コピーとシャロー コピーの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート