JavaScriptのクローン作成についての簡単な説明

JavaScriptのクローン作成についての簡単な説明

1. 浅いクローニング

浅いクローンでは配列やオブジェクトをコピーできない

var obj = {
    名前:「腹筋」、
    年齢: '18'、
    性別:「男性」
}
var obj1 = {}
関数クローン(Origin,target) {
    target = target || {}; //ユーザーがターゲットを入力できないようにする
    for(var k in Origin){
        ターゲット[k] = 原点[k];
    }
}
クローン(obj,obj1);

2. ディープクローニング

まずそれがプリミティブ値なのか、配列なのか、それともオブジェクトなのかを判断し、それらを別々に処理します。

  • オブジェクトの反復処理
  • 元の値が直接copy
  • プリミティブ値ではないので、配列かオブジェクトかを判断する
  • 空の配列を作成するための配列です
  • 空のオブジェクトを作成するオブジェクトです
  • 確立されたら、元のオブジェクトまたは配列の内容を繰り返し処理します。
  • 再帰
var obj = {
    名前: 'lin'、
    年齢: '18'、
    性別:「男性」、
    カード: [1,2,3,4],
    妻 : {
        名前: 'bcsds',
        息子:{
            名前: 'aaa'
        },
        年齢: '23'
    }
}
var obj1 = {}
//元の値とオブジェクト配列型の戻り値は異なります function deepClone(origin,target) {
    ターゲット = ターゲット || {};
    for(var k in origin) {
        もしorigin.hasOwnProperty(k)が存在すれば
            if(typeof(origin[k]) == 'オブジェクト') {
                if(Object.prototype.toString.call(origin[k]) == '[オブジェクト配列]') {
                    ターゲット[k] = [];
                }それ以外 {
                    ターゲット[k] = {};
                }
                deepClone(origin[k],target[k]);
            }それ以外 {
                ターゲット[k] = 原点[k];
            }
        }
    }
}
ディープクローン(obj,obj1);
以下もご興味があるかもしれません:
  • JavaScript 配列と非配列オブジェクトのディープ クローンとシャロー クローンの原則の詳細な説明
  • JavaScriptのシャロークローニングとディープクローニングの例の詳細
  • JavaScript のシャロークローニング、ディープクローニングの比較とサンプル分析
  • JSオブジェクトのディープクローン化方法の例
  • JSオブジェクトのディープクローニング例の分析
  • JS 拡張クラス、クローンオブジェクト、混合クラスインスタンスの分析
  • JS クローン、属性、配列、オブジェクト、関数インスタンスの分析
  • JavaScript ディープクローンオブジェクトの詳細な説明と例
  • JavaScript配列のクローンの簡単な実装方法
  • js でオブジェクトと配列を複製する一般的な方法の紹介

<<:  MySQL で sum 関数を使用する例のチュートリアル

>>:  Dockerのネットワークモードと設定方法

推薦する

Flex レイアウトで適応型ページを作成する (構文と例)

Flex レイアウトの紹介英語の Flex はフレキシブル ボックス、つまり伸縮性のあるボックスを...

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....

nginx のロードバランシングとリバースプロキシの説明

目次負荷分散負荷分散分類1. DNS 負荷分散2. IP負荷分散3. リンク層の負荷分散4. ハイブ...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...

YUMを使用してdockerをインストールする方法

次の図に示すように: Centos 7.0以上であれば問題ありません。現在のシステム カーネル バー...

数字当てゲームを実装するための純粋なJavaScript

100 以内の自然数をランダムに選択し、プレイヤーに 10 ラウンド以内にその数を推測させる数字推...

nginx プロキシ ポート 80 からポート 443 への実装

nginx.conf設定ファイルは次のとおりです。 ユーザー nginx; ワーカープロセス 1; ...

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...

js 配列エントリ() 反復メソッドを取得する

目次1.entires() メソッドの詳細な構文2.entires() メソッドの一般的な使用法と注...

WeChatミニプログラムでEchartとサブパッケージを使用するための完全な手順

序文休日は終わっていますが、それは別の形で(お腹に触れることで)私たちに現れます。ミニプログラムでデ...

Layui は複数条件クエリのサンプルコードを実装します

最近ファイルシステムを作ったのですが、フィールドが多すぎることに気づきましたページングを使用した複数...

nginx と openssl で https を実装する方法

サーバーデータがSSL証明書を使用して暗号化および認証されていない場合、ユーザーのデータはプレーンテ...

nginx を使用してブルーグリーン デプロイメントをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してブルーグリーン デプロイメント...

InnoDB がトランザクション分離レベルを巧みに実装する方法

序文前回の記事「MySQL ロック メカニズムの詳細説明」では、InnoDB のロック メカニズムに...

Java は Excel から MySQL にデータをインポートします

実際の業務では、Excel からデータベースにデータをインポートする必要がある場合があります。データ...