Wie man tiefe und flache JS-Kopie in praktischen Projekten verwendet

Dieses Mal werde ich Ihnen zeigen, wie Sie tiefe und flache JS-Kopie in praktischen Projekten verwenden und welche Vorsichtsmaßnahmen für die Verwendung von tiefer und flacher JS-Kopie in praktischen Projekten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an .

Die Beispiele in diesem Artikel beschreiben die Konzepte und die Verwendung von JavaScript Deep Copy und Shallow Copy. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: Flaches Kopieren und tiefes Kopieren in

js dienen nur zum Kopieren komplexer Datentypen (Objcet, Array). ). Einfach ausgedrückt können sowohl flache Kopien als auch tiefe Kopien die Funktion erfüllen, eine Kopie basierend auf dem Originalobjekt neu zu generieren. Abhängig davon, ob das neu generierte Objekt das Originalobjekt beeinflussen kann, kann es jedoch in flache Kopie und tiefe Kopie unterteilt werden.

Konzept 1: Flache Kopie

Flache Kopie bezieht sich auf das Kopieren von Referenzen. Die neu generierte Referenz und die ursprüngliche Referenz verweisen beide auf Instanzen desselben Objekts und schließen sich gegenseitig aus . Vorgänge beeinflussen sich gegenseitig.

Konzept 2: Tiefes Kopieren

Öffnen Sie den Speicher im Heap erneut und kopieren Sie den gesamten Inhalt der Objektinstanz, die der ursprünglichen Referenz entspricht, um so eine tiefe Kopie sicherzustellen Das Objekt ist vollständig vom ursprünglichen Objekt isoliert und sie haben keinen Einfluss aufeinander.

Konzept 3: Implementierung von Array Deep Copy

1. Verwenden Sie die for-Schleife

<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. Verwenden Sie die slice()-Methode

<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. Verwenden Sie die concatMethode

<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>

Konzept 4: Tiefe Kopie des Objekts

1. Verwenden Sie die forSchleife

<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. Verwenden Sie JSON, um

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

zu implementieren. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Vue-Gerüst und Vue-Cli-Installation

Sofortiger Einsatz von Watch im Vue-Projekt

Das obige ist der detaillierte Inhalt vonWie man tiefe und flache JS-Kopie in praktischen Projekten verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!