JavaScript 配列と非配列オブジェクトのディープ クローンとシャロー クローンの原則の詳細な説明

JavaScript 配列と非配列オブジェクトのディープ クローンとシャロー クローンの原則の詳細な説明

シャロークローニングとディープクローニングとは何ですか?

浅いクローン: スタックに格納されている値を対応する変数に直接割り当てます。基本データ型の場合は、対応する値が直接割り当てられます。参照型の場合は、アドレスが割り当てられます。
ディープクローニング: 対応する変数にデータを割り当てて、ソースデータとは無関係な新しいデータを生成します (データアドレスが変更されています)。つまり、オブジェクトの各レベルのプロパティです。
JavaScript では、基本データ型は記号「=」を使用して複製できますが、参照データ型では、実際の複製操作を実行せずに、変数のポインターを変更するためにのみ記号「=」を使用します。

1. アレイのクローンを作成する

1.1 浅いクローニング

for ループを使用して浅いクローンを作成します。

var arr1 = ['デモ', 1, 2];
var arr2 = [];
// 配列の浅いクローン for (var i = 0; i < arr1.length; i++) {
    arr2[i] = arr1[i];
}
コンソールログ(arr2);
コンソールにログ出力します。

出力:

配列(3)0: "デモ"1: 12: 2長さ: 3[[プロトタイプ]]: 配列(0)
間違い

1.2 ディープクローニング

ディープクローニングには再帰を使用します。

関数 deepClone(o) {
	var 結果 = [];
	(var i = 0; i < o.length; i++) の場合 {
		結果.push(deepClone(o[i]));
	}
	結果を返します。
}

2. 配列以外のオブジェクトの複製

2.1 浅いクローニング

for ループを使用して浅いクローンを作成します。

var obj1 = { a: 1, b: 2, c: 3, d: [4, 5, { e: 'デモ' }] };
var obj2 = {};
// オブジェクトの浅いクローン for (var i in obj1) {
    obj2[i] = obj1[i];
}
コンソールログ(obj2);
コンソールにログ出力します。(obj1 == obj2);

出力:

{a: 1、b: 2、c: 3、d: 配列(3)}
間違い

2.2 ディープクローニング

ディープクローニングには再帰を使用します。

関数 deepClone(o) {
	var 結果 = {};
	(変数 i が o の場合) {
		結果[i] = deepClone(o[i]);
	}
	結果を返します。
}

3. ディープクローン機能を統合

var obj1 = { a: 1, b: 2, c: 3, d: [4, 5, { e: 'デモ' }] };
var arr1 = ['デモ', 1, 2];
// ディープクローン関数 deepClone(o) {
    Array.isArray(o) の場合 {
        // は配列です var result = [];
        (var i = 0; i < o.length; i++) の場合 {
            結果.push(deepClone(o[i]));
        }
    } そうでない場合 (typeof o == 'object') {
        // 配列ではなくオブジェクトです var result = {};
        (変数 i が o の場合) {
            結果[i] = deepClone(o[i]);
        }
    } それ以外 {
        // 基本型の値 var result = o;
    }
    結果を返します。
}
コンソールにログ出力します。
コンソールにログ出力します。

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

以下もご興味があるかもしれません:
  • JavaScript で知らない Object.entries の使い方
  • js 配列 fill() 充填メソッド
  • js配列forEachインスタンスの詳細な使用方法
  • JavaScript配列の重複排除のいくつかの方法についての詳細な説明
  • 任意の長さの配列を作成または埋めるための JS のヒントの要約
  • JavaScript配列重複排除の詳細な説明
  • js 配列エントリ() 反復メソッドを取得する

<<:  MySQLとSpringの自動コミットの詳細な説明

>>:  Centos8.2 クラウド サーバー環境に Tomcat8.5 をインストールするための詳細なチュートリアル

推薦する

カレンダー効果を実現するための Bootstrap+JQuery

この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...

@font-face を使用して Web ページに特殊文字を実装する (カスタム フォントを作成する)

数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...

ins タグと del タグの属性と使用法

insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...

LinuxにKafkaをインストールする

目次1.1 前提条件としてのJava環境1.2 Zookeeperのインストールと設定1.3 Kaf...

HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)

この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...

HTML でスクロールバーを非表示にしたり削除したりする方法

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

中国語フォントの英語名まとめ

CSS の font-family プロパティを使用して中国語フォントを参照する場合、フォントを定義...

mysql の find_in_set 関数の基本的な使い方

序文これは私が最近見つけた新しい機能です。プロジェクトでの私の使用シナリオは次のとおりです。アプリケ...

コメント付きのスネークゲームを実装する js

この記事の例では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体...

CSS3は遷移を高速化し、遅延させる

1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...

Ubuntu 18.04にmysql5.7をインストールする

Ubuntu 18.04では参考までにmysql 5.7をインストールします。具体的な内容は以下のと...

MySQLがトランザクション分離を実装する方法の簡単な分析

目次1. はじめに2. RC および RR 分離レベル2.1. RRトランザクション分離レベルでのク...

WeChatアプレットは左にスワイプしてリスト項目を削除する効果を実現

この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除す...

Linux サーバーでフォルダー、ファイル、解凍コマンドを削除する方法

1. フォルダを削除する例: rm -rf /usr/java /usr/javaディレクトリとその...

CentOS7 で yum を使用して PostgreSQL と PostGIS をインストールする方法

1. yumソースを更新するCentOS7 のデフォルトの yum リポジトリの PostgreSQ...