JavaScript でのディープ クローン オブジェクトの詳細な説明と例

JavaScript ディープ クローン オブジェクト

今日、私はプロジェクトに取り組んでいて、ディープ クローン オブジェクトを使用する必要があり、プロトタイプ チェーンでのプログラミングが必要だったので、思いつきでこのナレッジ ポイントを確認することにし、対応するものを見つけました。インターネット上の知識、

オブジェクトのクローン、この用語は派手に見えるかもしれませんが、実際にはまったく同じように見えるオブジェクトをコピーするだけです。とても簡単ではないかと思っている人もいるかもしれません

var obj1。 = {name: 'payen' };

var obj2 = obj1;

これはクローンされたオブジェクトではありません。obj1 と obj2 は基本的に同じオブジェクトです

両方とも同じメモリ アドレス空間を指し、同じものを取得します。小さな家

これはオブジェクトが参照値だからであるはずです

参照値と言えば

JavaScriptにおける唯一の参照値はオブジェクトです

ここで配列は特別なオブジェクトと関数であることに注意してください特別な実行可能オブジェクトでもあります。つまり、いわゆるディープ クローン オブジェクトは、同じ家を必要としないことを意味します。その家の正確なコピーを作成する必要があるかどうかはわかりません。つまり、ディープ クローン オブジェクトの参照値をコピーする必要があり、対応するシャロー クローン オブジェクトについては、参照値をそのまま取得するだけで問題ありません。わかりません。コードを読めばわかります

まず、浅いクローンオブジェクトを見てみましょう

rreee

「軽い」英語の話し方を覚えられないことに文句を言わないでください。現時点では（どうやって CET-6 に合格したのか本当にわかりません）。 for-in についてはパフォーマンスに小さな問題がありますので、興味があれば、私の他の記事を読んでください

このコードは非常に簡単なので、これ以上説明しません

Chrome コンソールを見てみましょう。

素敵ですね

それでは、今から一つやらせてください

新しい家に人を追加してください

この「新しい家」は新しいものではないようです、混同しないでください変数名 したがって、参照値が表示されると、シャロークローンは使いにくくなります。この場合、新しいオブジェクトを取得したいので、新しいオブジェクトを作成し、古いオブジェクトの内容をコピーします。オブジェクトへの新しいオブジェクトはありませんか?

オブジェクト内にまだオブジェクトがある場合はどうなるでしょうか? それから、作成と追加のプロセスが繰り返されます

。

ただし、ループには 2 種類あります

反復

再帰

再帰の方が優れているのは間違いありません

再帰ループでは、終了条件を満たす条件が見つかると、層ごとに戻って終了します. 次に、再帰を使用して、参照値がなくなるまで階層ごとに参照値を見つけることができます

コードを見てみましょう

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true
  }
}
function easyClone(obj){
  var newObj = {};
  for(var prop in obj){
    if(obj.hasOwnProperty(prop)){
      newObj[prop] = obj[prop];
    }
  }
  return newObj;
}
var newHouse = easyClone(house);

上に書いた if-else は三項演算子の使用に非常に適していると思います。冗長すぎて、強迫性障害の私は読むのが非常に不快だと言いました。これが本当にディープクローンであることを証明するために、元の家は意図的に複雑に作られています（機能のディープクローンは面倒なので考慮していません）。あまり重要ではありません)。今回は実際には新しい家です

詳しくは説明しません

新しいオブジェクトの参照値は変更されますが、古いオブジェクトは変更されません。

プロトタイプチェーンでのプログラミングにも同じことが当てはまります

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
function deepClone(original, target){
  var target = target || {};// 如果target为undefined或没传参，设置空对象
  for(var prop in original){// 遍历原对象
    if(original.hasOwnProperty(prop)){// 只拷贝对象内部，不考虑原型链
      if(typeof original[prop] === 'object'){// 引用值
        if(Object.prototype.toString.call(original[prop]) === '[object Array]'){
          target[prop] = [];// 处理数组引用值
        }else{
          target[prop] = {};// 处理对象引用值
        }// 可以用三目运算符
        deepClone(original[prop],target[prop]);// 递归克隆
      }else{// 基本值
        target[prop] = original[prop];
      }  
    }
  }
  return target;
}
var newHouse = deepClone(house);

読んでいただきありがとうございます、皆さんのお役に立てれば幸いです、このサイトのサポートに感謝します!

JavaScript ディープ クローン オブジェクトの詳細な説明と例については、PHP 中国語 Web サイトに注目してください。