JavaScript のディープコピーとシャローコピーの違いの概要-jsチュートリアル-php.cn

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

不言

リリース： 2018-10-16 12:01:47

転載

1959 人が閲覧しました

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

この記事では、JavaScript のディープコピーとシャローコピーの違いについて説明します。

浅いコピー/浅いコピー

浅いコピーとは、基準値をコピーすることを指します。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};
console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}

var shallowCopy = original;
console.log(JSON.stringify(shallowCopy));
// {"prop1" : "Prop1", "prop2" : "prop2"}

shallowCopy.prop1 = "ChangedProp1";

console.log(JSON.stringify(original));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}
console.log(JSON.stringify(shallowCopy));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

ログイン後にコピー

https://smoothprogramming.com... JavaScript のディープコピーとシャローコピーの違いの概要

注:

浅いコピーでは、元の値とコピーは同じ属性を共有します。
浅いコピーはオブジェクト参照のみをコピーします。
浅いコピーでは、コピーされたオブジェクトが変更されると、元のオブジェクトに影響が及びます。逆も同様です。
js では、配列とオブジェクトの割り当てはデフォルトで浅いコピーになります。

ディープコピー

ディープコピーとは、オブジェクトのプロパティを新しいオブジェクトに再帰的にコピーすることを指します。 jquery では $.extend を使用してディープコピーを実行します。

$.extend(deepCopy, target, object1, [objectN] )

ログイン後にコピー

最初のパラメータは true で渡され、これがディープコピーであることを示します。target はターゲットオブジェクト、object1、つまり元のオブジェクトです。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};
console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}

var deepCopy = $.extend(true, {}, original);
console.log(JSON.stringify(deepCopy));
// {"prop1" : "Prop1", "prop2" : "prop2"}

deepCopy.prop1 = "ChangedProp1";

console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}
console.log(JSON.stringify(deepCopy));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

ログイン後にコピー

https://smoothprogramming.com...

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