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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript のコピーオブジェクトと Object.assign メソッドではディープコピーを実現できません
  • JavaScript のディープコピーの詳細な説明と例の分析
  • Javascript のディープコピーに関する簡単な説明
  • Json オブジェクトを介してディープコピーを実現する方法の改良版
  • JavaScript オブジェクトのディープコピーとシャローコピーの詳細な説明

<<:  DockerはRedisを起動し、パスワードを設定します

>>:  MySQLアカウントのパスワード変更方法(概要)

推薦する

CSS で text-align と margin: 0 auto を使用して中央に配置する例コード

CSSでtext-align、margin: 0 autoを使用して中央揃えにするtext-alig...

ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明

機能: 前のページまたは次のページにジャンプします。要素: ページングの基本要素は、前のページ + ...

HTML ヘッドタグの詳細な紹介

HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...

CSS テキスト配置実装コード

フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...

Docker を使用して Redis マスター スレーブ レプリケーション クラスターを構築する

マスタースレーブレプリケーションモードのクラスターでは、通常、1 つのマスターノードと 2 つ以上の...

Linux のスクリーンコマンドとその使い方

画面紹介Screen は、コマンドライン端末切り替え用に GNU プロジェクトによって開発されたフリ...

ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析

<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...

node.js が大規模プロジェクトに適さない理由

目次序文1. アプリケーションコンポーネント2. アプリケーションの種類3. アプリケーションサービ...

MySQLでテーブルインデックスを構築する方法

目次複数の種類のフィルタリングをサポート複数の範囲のクエリを避ける並べ替えを最適化するインデックスの...

Linux/CentOS サーバー セキュリティ構成の一般ガイド

Linux はオープン システムです。インターネット上には、既成のプログラムやツールが多数存在します...

Ubuntu システムに Theano と Keras をインストールする方法

注: システムは Ubuntu 14.04LTS、32 ビット オペレーティング システムです。Py...

CentOS 7 パスワードを忘れた場合の解決プロセス図

必要Windows システムでも Linux システムでも、さまざまな理由でパスワードを忘れてしまう...

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...

mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...

VueでEchartsチャートの幅と高さの適応を実現する実践

目次1. インストールとインポート2. 手ぶれ補正機能を定義する3. チャートコードを描くinit ...