JavaScript でのディープクローンオブジェクトの詳細な説明と例-jsチュートリアル-php.cn

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

高洛峰

リリース： 2017-01-04 09:49:13

オリジナル

1048 人が閲覧しました

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

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

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

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

var obj2 = obj1;

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

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

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

参照値と言えば

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

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

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

rreee

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

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

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

JavaScript 深层克隆对象详解及实例

素敵ですね

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

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

JavaScript 深层克隆对象详解及实例

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

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

。

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

反復

再帰

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

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

コードを見てみましょう

var house = {
  name: &#39;payen&#39;,
  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 は三項演算子の使用に非常に適していると思います。冗長すぎて、強迫性障害の私は読むのが非常に不快だと言いました。これが本当にディープクローンであることを証明するために、元の家は意図的に複雑に作られています（機能のディープクローンは面倒なので考慮していません）。あまり重要ではありません)。今回は実際には新しい家です

詳しくは説明しません

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

プロトタイプチェーンでのプログラミングにも同じことが当てはまります JavaScript 深层克隆对象详解及实例

var house = {
  name: &#39;payen&#39;,
  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] === &#39;object&#39;){// 引用值
        if(Object.prototype.toString.call(original[prop]) === &#39;[object Array]&#39;){
          target[prop] = [];// 处理数组引用值
        }else{
          target[prop] = {};// 处理对象引用值
        }// 可以用三目运算符
        deepClone(original[prop],target[prop]);// 递归克隆
      }else{// 基本值
        target[prop] = original[prop];
      }  
    }
  }
  return target;
}
var newHouse = deepClone(house);

ログイン後にコピー

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

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