フロントエンドインタビュー：浅いコピーと深いコピーの違いは？

こんばんは、皆さん、私は今晩の主任講師です。私はウサギの兄弟です。

 

インタビューでは浅いコピーと深いコピーの違いをよく聞かれますが、この質問はグループでも聞かれるので、今日はブログで説明します。

 

1.浅いコピー

浅いコピーとは、基本タイプの値コピー、およびオブジェクトタイプのアドレスコピーを指します。

言い方、基本的なタイプは何ですか？

jsでは、私たちが知っている基本的なタイプは、文字列、数値、およびブール値です。

このようなコードを書くと、浅いコピーになります。

var a = 1;
var b = a; //浅拷贝
b = 2;     //改变b的值，并不会影响到a，因为浅拷贝对基本类型而言就是值拷贝
console.log(a);

aはまだ1であり、bとは何の関係もありません。

同じ原則がオブジェクトにも当てはまります。JavaScriptにはオブジェクト型（参照データ型とも呼ばれます）もあり、オブジェクト型の浅いコピーはアドレスをコピーするだけです。

var p1 = {
    name: 'jack'
}

var p2 = p1;
p2.name = 'rose';

console.log(p1);

p2はp1とまったく同じメモリアドレスを保存します。これは、Zhang Sanにキーを割り当て、Zhang Sanがキーを保持している場合と同じように、彼はあなたの家に行って冷蔵庫でヨーグルトを飲むことができます。

2.ディープコピー

ディープコピーとは、基本型の値をコピーするだけでなく、オブジェクト型も完全にコピーされることを意味します。

オブジェクトはメモリに固定されています。オブジェクトのディープコピーを作成する場合、唯一の方法は新しいオブジェクトを作成することであり、その中の値は元のオブジェクトを完全に複製します。

まだ今の例ですが、少し変更しました

var p1 = {
    name: 'jack'
}

var p2 = {
    name: p1.name
};
p2.name = 'rose';

このように、p2を変換しても、p1には影響しません。これは深いコピーです。

この方法でディープコピーを実装できますが、属性が多すぎると非常に面倒になります。ディープコピーの一般的な方法を実装する方法について話しましょう。

3.ディープコピー Object.assign()

Object.assign()これは、ネストされていないオブジェクトに対してディープコピーを実行できるメソッドです。オブジェクトにネストがある場合、ネストされたオブジェクトでの動作は通常の浅いコピーになります。ネストがない場合は、この方法を使用できます。

var p1 = {
    name: 'jack'
}

var p2 = {}

Object.assign(p2,p1);

JSONで変換する同様の方法があります

var p1 = {
    name: 'jack',
    age:12
}

var p2 = JSON.parse(JSON.stringify(p1));

p2.name = 'rose';

実際の開発では、一部のデータをjsonに変換してローカルキャッシュに保存するなど、この方法がさらに使用される可能性があります。必要に応じて、逆シリアル化します。

4.ディープコピーの再帰

function deepCopy(dest,src){
  var dest = dest || {};
  for(var key in src){
    //如果对象的属性又是对象，则递归处理
    if(typeof src[key] === "object"){ 
        dest[key]= (src[key].constructor === Array)?[]:{}; 
        deepCopy(dest[key],src[key]); 
    }else{
        dest[key]=src[key];  
    }
  }
  return dest;
}

テスト：

var p1 = {
    name: 'jack',
    age:12,
    toy: {
        name:'car'
    }
}

var p2 = deepCopy({},p1);

p2の操作は、再帰的方法の深いコピーであるp1に影響を与えないことがわかります。 

今日の共有は以上です。コミュニケーションのために私たちの学習クンに来てください~~