jsのディープコピーを理解しましょう

js ディープコピー

本題に入る前に、データがどのように保存されるかを理解する必要があります。

データ保存方法

それについて説明する前に、まず値型と参照型がどのように格納されるかを知っておく必要があります。

JavaScript には 2 種類のデータがあります。

値の型: String 、 Number 、 Boolean 、 Null 、 Undefined 、 Symbol 。

スタックメモリに格納される単純なデータセグメントで、データサイズが決定され、メモリ空間のサイズを割り当てることができます。

参照データ型: Object 、 (Array 、 Function 。

ヒープメモリに格納されているオブジェクトの場合、ポインターはスタックメモリに格納され、このポインターはヒープメモリ内の場所を指します。次に、ヒープメモリから必要なデータを取得します。

ストレージは次のとおりです。

ここに画像の説明を挿入

浅いコピー/深いコピーとは何か

保存方法についてお話しした後は、浅いコピーと深いコピーについてお話ししましょう

コピーはよくコピー、ctrl+c、ctrl+vなどと呼ばれますが、例を見てみましょう

値型と参照型にそれぞれ値を割り当てる場合。

     変数a = 5
     var b = a
     b += 5
     コンソールログ('a=' + a,'b=' + b)
     var arr = [1,2,3]
     var brr = arr
     brr.push(10)
     console.log("arr は",arr)
     console.log("brr is",brr)

ここに画像の説明を挿入

現象：値型は互いに影響を及ぼさないが、配列（参照型）brr配列は要素を追加するとarr配列を変更することがわかりました。

説明と分析: 浅いコピーは参照型でのみ発生します。参照型で単純な割り当てを実行すると、ヒープメモリへのポインターのみが割り当てられます。これを浅いコピーと呼びます。ディープコピーは、アドレスポインターではなく、参照型の完全なコピーです。

次の回路図の浅いコピーを取得します。

ここに画像の説明を挿入

一般的なディープコピーの実装

したがって、参照型を割り当てるときは、元のデータに影響を与える浅いコピーを作成してはなりません。次にディープコピーを行う必要があります

1. JSON.stringifyとJSON.parseを通じて

配列とオブジェクトは深くコピーできますが、関数はコピーできません。オブジェクトまたは配列のネストされたコピーを作成できます。

デメリット: オブジェクト内のメソッドのディープコピーは不可能

使用：

     var brr = JSON.parse(JSON.stringify(arr))

例：

  var arr = {
         名前:「ロマンティック コーダー」
         年齢: 20,
         住所: ['江西', '長沙'],
         友達：
             友人1: '張三'、
             友人2: '李思'
         },
         関数（）{
             console.log("私はロマン主義の対象です")
         }
     }
     var brr = JSON.parse(JSON.stringify(arr))
     brr.name='無法犯罪者、張三'
     brr.adress[0]='長沙'
     console.log("arr は", arr)
     console.log("brr is", brr)

ここに画像の説明を挿入

2. スプレッド演算子

オブジェクトの構造割り当て機能方式を活用します。

デメリット: オブジェクト内のネストされたオブジェクトのディープコピーはありません。これは、参照オブジェクトの1つのレイヤーのみをディープコピーするのと同じです。

使用：

     var brr = {...arr}

例：

  var arr = {
         名前:「ロマンティック コーダー」
         年齢: 20,
         住所: ['江西', '長沙'],
         友達：
             友人1: '張三'、
             友人2: '李思'
         },
         関数（）{
             console.log("私はロマン主義の対象です")
         }
     }
     var brr = {...arr}
     brr.name='無法犯罪者、張三'
     brr.adress[0]='長沙'
     console.log("arr は", arr)
     console.log("brr is", brr)

ここに画像の説明を挿入

3. 手書きの再帰的なディープコピー機能

完璧な解決策

関数：

  //再帰を使用してディープコピーを実装する function deepClone(obj) {
         //コピーされた obj がオブジェクトか配列かを判断します var objClone = Array.isArray(obj) ? [] : {};
         if (obj && typeof obj === "object") { //obj は空にできず、null もオブジェクトであるため、オブジェクトまたは配列である必要があります。
             for (キー in obj) {
                 obj.hasOwnProperty(キー) の場合 {
                     if (obj[key] && typeof obj[key] === "object") { //objの属性値は空ではなく、まだオブジェクトなので、ディープコピーを作成します。objClone[key] = deepClone(obj[key]); //再帰的にディープコピーを作成します。} else {
                         objClone[key] = obj[key]; //直接コピー}
                 }
             }
         }
         objClone を返します。
     }

例：

      var arr = {
         名前:「ロマンティック コーダー」
         年齢: 20,
         住所: ['江西', '長沙'],
         友達：
             友人1: '張三'、
             友人2: '李思'
         },
         楽しい: 関数(){
             console.log("私は " + this.name + " のオブジェクトです")
         }
     }
     var brr = deepClone(arr)
     brr.name = '無法者張三'
     brr.adress[0] = '長沙'
     console.log("arr は", arr)
     arr.fun()
     console.log("brr is", brr)
     brr.fun()
 
     //再帰を使用してディープコピーを実装する function deepClone(obj) {
         //コピーされた obj がオブジェクトか配列かを判断します var objClone = Array.isArray(obj) ? [] : {};
         if (obj && typeof obj === "object") { //obj は空にできず、null もオブジェクトであるため、オブジェクトまたは配列である必要があります。
             for (キー in obj) {
                 obj.hasOwnProperty(キー) の場合 {
                     if (obj[key] && typeof obj[key] === "object") { //objの属性値は空ではなく、まだオブジェクトなので、ディープコピーを作成します。objClone[key] = deepClone(obj[key]); //再帰的にディープコピーを作成します。} else {
                         objClone[key] = obj[key]; //直接コピー}
                 }
             }
         }
         objClone を返します。
     }

ここに画像の説明を挿入