実際のプロジェクトで JS の深いコピーと浅いコピーを使用する方法

今回は、JS のディープコピーとシャローコピーを実際のプロジェクトで使用する方法と、JS のディープコピーとシャローコピーを実際のプロジェクトで使用する際の注意点についてお届けします。

この記事の例では、JavaScript のディープ コピーとシャロー コピーの概念と使用法について説明します。参考までに皆さんと共有します。詳細は次のとおりです:

js の浅いコピーと深いコピーは、複雑なデータ型 (Objcet、Array) をコピーするためだけです。簡単に言うと、シャローコピーもディープコピーも、元のオブジェクトに基づいてコピーを再生成する機能を実現できます。ただし、新しく生成されたオブジェクトが元のオブジェクトに影響を与えることができるかどうかに応じて、浅いコピーと深いコピーに分けることができます。

概念 1: 浅いコピー

浅いコピーは参照をコピーすることを指し、新しく生成された参照と元の参照は両方とも同じオブジェクトのインスタンスを指し、相互間の操作は相互に影響します。

コンセプト 2: ディープコピー

ヒープ内のメモリを再度開き、元の参照に対応するオブジェクト インスタンスの内容をすべてコピーします。これにより、ディープ コピー オブジェクトが元のオブジェクトから完全に分離されます。お互いに影響はありません。

コンセプト 3: 配列のディープコピーの実装

1. for ループを使用しますfor循环

<script type="text/javascript">
  var arr1=['a','b','c'];
  var arr2=[];
  function deepCopy(arr1,arr2){
    for(var i=0;i<arr1.length;i++){
      arr2[i]=arr1[i];
    }
  }
  deepCopy(arr1,arr2);
  arr2[1]=&#39;d&#39;;
  console.log(arr1);//[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;]
  console.log(arr2);//[&#39;a&#39;,&#39;d&#39;,&#39;c&#39;]
</script>

2. 使用slice()方法

<script type="text/javascript">
  var arr1=['a','b','c'];
  var arr2=arr1.slice(0);
  arr2[1]='d';
  console.log(arr1);//['a','b','c']
  console.log(arr2);//['a','d','c']
</script>

3. 使用concat方法

<script type="text/javascript">
    var arr1=['a','b','c'];
    var arr2=arr1.concat();
    arr2[1]='d';
    console.log(arr1);//['a','b','c']
    console.log(arr2);//['a','d','c']
</script>

概念4：对象的深拷贝

1. 使用for

<script type="text/javascript">
  var obj = {
    name: 'FungLeo',
    sex: 'man',
    old: '18'
  }
  function copyObj(obj) {
    let res = {}
    for (var key in obj) {
      res[key] = obj[key]
    }
    return res
  }
  var obj2 = copyObj(obj);
  obj2["name"]="kka";
</script>

2. slice() メソッドを使用します

<script type="text/javascript">
  var obj = {
    name: 'FungLeo',
    sex: 'man',
    old: '18'
  }
  var obj2=JSON.parse(JSON.stringif(obj));
  obj2["name"]="kka";
</script>

3. code>concat メソッドrrreee

コンセプト 4: オブジェクトのディープコピー

1. for ループを使用します

rrreee2. JSON
を使用して実装します

rrreee

この記事の事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

🎜vue Scaffolding と vue-cli のインストール🎜🎜🎜🎜🎜 vue プロジェクトでの watch の即時使用🎜🎜🎜

以上が実際のプロジェクトで JS の深いコピーと浅いコピーを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。