JS のディープコピーとシャローコピーの詳細

1. 浅いコピーとはどういう意味ですか?

浅いコピーとは、ヒープ内のコンテンツを指す参照をコピーせずに、スタックに格納されているデータへの参照のみをコピーすることです。複数のデータの浅いコピーでは、ヒープ内の同じコンテンツを指す複数の参照がコピーされます。データの浅いコピーが変更されると、つまり、ヒープ内の参照によって指されるコンテンツが変更されると、ここで参照によって指される他のデータも変更されます。

obj = {
    a:1、
    b:2、
    c:{
        c1:10,
        2:20 ...
    }
}

objA = obj とします。
objA.a = 'a';

console.log(obj.a); // 'a'
console.log(objA.a); // 'a'

2. ディープコピーとはどういう意味ですか?

ディープコピーは、ヒープの内容をコピーして新しいオブジェクトを作成します。複数のディープコピーは複数の異なるオブジェクトになります。つまり、それらは異なる参照を持ち、異なるヒープコンテンツを指します。

3. ディープコピーを使用する理由

通常の開発では、データの送受信が行われることがあります。送信されたデータを受信した後、データの処理と変換は避けられません。元のデータ構造を破壊しないように、ディープコピーを使用してデータをコピーし、生成された新しいデータを処理することができます。ディープコピーは、複数の参照を変更した後の参照の混乱の問題を防ぐこともでき、 BUGの可能性を減らします。

4. ディープコピーのためのいくつかの方法

実装方法1: JSONシリアル化とデシリアル化

obj = {
    a:1、
    b:2、
    c:{
        c1:10,
        2:20 ...
    }
}

let objA = JSON.parse(JSON.stringify(obj)); //JSON のシリアル化と逆シリアル化 objA.a = 'a';

コンソールログ(obj.a); // 1
console.log(objA.a); // 'a'

JSONシリアル化とデシリアル化ではディープコピーを実現できますが、注意すべき欠点がいくつかあります。

dateオブジェクトは日付文字列に変換されます
プロトタイプにアクセスできない
undefinedプロパティをコピーできません
NANと無限大はNULLに変換されます

d1 = new Date() とします。
obj = {
    d1、
    d2: 未定義、
    d3:NaN
}
objD = JSON.parse(JSON.stringify(obj)); とします。
コンソールログ(obj) 
コンソール.log(objD)

実装方法2: Object.assign()

obj = {
    a:1、
    b:2、
    c:{
        c1:10,
        2:20 ...
    }
}

objA = Object.assign(obj); とします。
objA.a = 'a';

コンソールログ(obj.a); // 1
console.log(objA.a); // 'a'

Object.assign()ディープコピーを実現できますが、より深いオブジェクト参照の浅いコピーのみを作成します。

obj = {
    a:1、
    b:2、
    c:{
        c1:10,
        2:20 ...
    }
}

objA = Object.assign(obj); とします。
objA.c.c1 = 'c1'; //Object.assign() は単なるディープコピーです。

console.log(obj.c.c1); // 'c1'
console.log(objA.c.c1); // 'c1'

実装方法3: 拡張演算子

obj = {
    a:1、
    b:2、
    c:{
        c1:10,
        2:20 ...
    }
}

objA = {...obj} とします。
objA.a = 'a';

コンソールログ(obj.a); // 1
console.log(objA.a); // 'a'

スプレッド演算子「 … 」はディープコピーを実現できますが、より深いオブジェクト参照の浅いコピーのみを作成します。

obj = {
    a:1、
    b:2、
    c:{
        c1:10,
        2:20 ...
    }
}

objA = {...obj} とします。
objA.c.c1 = 'c1'; //拡張演算子 "..." は Object.assign() と同じですが、ディープ コピーのレイヤーは 1 つしかなく、複数レイヤーのディープ コピーを持つことはできません。

console.log(obj.c.c1); // 'c1'
console.log(objA.c.c1); // 'c1'

実装方法4: 再帰を使用する

ディープコピーやマルチレイヤーディープコピーを実現したい場合は、再帰ループコピーを使用できます。

obj = {
    a:1、
    b:2、
    c:{
        c1:10,
        2:20 ...
    }
}

const ReCopy = 関数 (パラメータ) {
        ターゲットを null にします。
        isObject = paramter.constructor === Object とします。
        isArray = paramter.constructor === Array とします。
        if (isObject || isArray) {
            ターゲット = Array.isArray(パラメータ) ? [] : {};
            for (let i in パラメータ) {
                ターゲット[i] = ReCopy(パラメータ[i]);
            }
        } それ以外 {
            ターゲット = パラメータ;
        }
        ターゲットを返します。
    }

objA = ReCopy(obj); とします。
objA.c.c1 = 'c1';

コンソールログ(obj.c.c1); // 10
console.log(objA.c.c1); // 'c1'

5. ラダッシュディープコピー

lodashディープコピーは、より専門的なディープコピーメソッドです。

lodashをインストールする

まず初期化し、 package.jsonファイルを生成してから、次のコマンドを使用してインストールします。

npm i -S lodash

lodash をインポートする

var _ = require('lodash');

lodashの使用

obj = {
    a:1、
    b:2、
    c:{
        c1:10,
        2:20 ...
    }
}

objA = _.cloneDeep(obj); とします。
objA.c.c1 = 'c1'; 

コンソールログ(obj.c.c1); // 10
console.log(objA.c.c1); // 'c1'

これで、JS のディープコピーとシャローコピーに関する詳細な記事は終了です。JS のディープコピーとシャローコピーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: