Detaillierte Erläuterung der JS-Übertragung und des Kopierens

Wir wissen, dass es in js mehrere grundlegende Datentypen und andere komplexe Datentypen gibt, darunter (Objekte, Arrays, Funktionen). Wir nennen es eine Wertübertragung und danach eine Variable Zuweisung Es gibt keine andere Beziehung zur ursprünglichen Variablen, außer dass der Wert gleich ist.

let x = 666
let y = x
let m = 'abc'
let n = m
y = 888
n = 'def'
console.log(x, y)//666,888
console.log(m, n)//'abc','def'

Die Übertragung komplexer Datentypen ist nicht so, denn wenn eine Variable an einen komplexen Datentyp gebunden ist, wird nicht der Wert der komplexen Daten aufgezeichnet, sondern die Speicherung der Daten Eine Adressinformation: Wenn diese Variable einer anderen Variablen zugewiesen wird, werden nur die beiden Variablen auf eine Dateninformation übertragen. Diese Übertragungsmethode wird als „Pass By“ bezeichnet Referenz

let obj1 = {
    a : '1',
    b : 2
} 
let obj2 = obj1
obj2.b = 3
console.log(obj1,obj2)//{a: "1", b: 3},{a: "1", b: 3}

kopieren

Wir wissen, dass die Zuweisung komplexer Datentypen durch Referenz erfolgt und die Variablen vor und nach der Zuweisung sich in tatsächlichen Projekten häufig gegenseitig beeinflussen Wir wollen das zum Beispiel nicht:

Wir verwenden Daten (ein Array) an zwei Stellen in einer Ansicht. Zum einen muss eine Liste die Daten nur der Reihe nach anzeigen, und zum anderen muss a Diagramm erfordert Nach dem Umkehren der Daten und der anschließenden Datenverarbeitung tritt ein Problem auf. Wenn die erste Liste nach data.reverse() ebenfalls in umgekehrter Reihenfolge vorliegt, ist dies nicht das, was wir wollen. Wir benötigen eine Methode, um nur den Wert zu kopieren des Arrays. Und die Datenadresse dieses neuen Arrays unterscheidet sich von der des ursprünglichen Arrays. Diese Kopiermethode wird als Array-Kopie bezeichnet.

let obj1 = {a:1, b:{c:2}}
let shallowCopy = (src)=> {
    let dst = {}
    for (let prop in src) {
        if (src.hasOwnProperty(prop)) {
          dst[prop] = src[prop]
        }
    }
    return dst
}
let obj2 = shallowCopy(obj1)
console.log(obj1,obj2) //@1
obj1.a = 6
console.log(obj2.a) //@2
obj2.b.c = 666
console.log(obj1.b.c) //@3
obj2.b = {
    c: 888
}
console.log(obj1.b.c) //@4

Aus dem obigen Beispiel ist ersichtlich, dass das Attribut der ersten Ebene von obj1 den Attributwert kopiert und die Kopie der Adresse nicht erbt, die zweite Ebene jedoch darin besteht, dass das Attribut b a gemeinsam nutzt Speicheradresse, die eine flache Kopie ist, aber bei @4 obj1 nicht von obj2 betroffen ist, da das Attribut b ein Objekt ist. Für diese Art der Neuzuweisung durch Referenz weist der Computer einen neuen Speicher zum Speichern von Daten und Aufzeichnungen zu Adressinformationen, daher sind obj1.b.c und obj2.b.c zu diesem Zeitpunkt keine Attributwerte des Datensatzes mehr.

kann auch so verstanden werden: Das Kopieren dient der Übertragung. Die direkte Zuweisung komplexer Datentypen erfolgt durch Referenz und kann nicht als Kopieren bezeichnet werden. Die Speicheradresseninformationen der Daten sind nicht genau gleich. Dies liegt daran, dass die Kopie auch in flache Kopie und tiefe Kopie unterteilt ist.

Eine nicht verschachtelte Kopie eines komplexen Datentyps bedeutet, dass nur die erste Datenschicht kopiert wird, bei der es sich um eine flache Kopie handelt. Wenn die erste Datenschicht einen komplexen Datentyp hat, wird sie trotzdem übergeben per Referenz werden immer noch die Adressinformationen kopiert, und die durch andere Methoden implementierte mehrschichtige verschachtelte Kopie von Array-Objekten ist eine tiefe Kopie.

Sehen wir uns an, wie Arrays und Objekte tiefe und flache Kopien implementieren:

Kopieren von Arrays

• Slice-Methode

  let arr1 = [1,2,[3,4]]
  let arr2 = arr1.slice(0)
  arr2[2].push(5)
  arr2.push(6)
  console.log(arr1,arr2)

• Concat-Methode

  let arr1 = [1,2,[3,4]]
  let arr2 = arr1.concat()
  arr2[2].push(5)
  arr2.push(6)
  console.log(arr1,arr2)

• for-Schleife

  let arr1 = [1,2,[3,4]]
  let arr2 = []
  for(let i = 0; i<arr1.length; i++){
      arr2.push(arr1[i])
  }
  arr2[2].push(5)
  arr2.push(6)
  console.log(arr1,arr2)

• …Operator

  let arr1 = [1,2,[3,4]]
  let [...arr2] = arr1
  arr2[2].push(5)
  arr2.push(6)
  console.log(arr1,arr2)

Die Kopien der oben genannten vier Arten von Arrays sind alle flache Kopien. Um die tiefe Kopie des Arrays zu realisieren, muss sie rekursiv implementiert werden

let deepClone = (src)=> {
    let result
    (src instanceof Array) ? (result = []) :(result = {})
    for (let key in src) {
        result[key] = (typeof src[key] === 'object') ? deepClone(src[key]) : src[key]//数组和对象的type都是object
    }
    return result
}   
let arr1 = [1,2,[3,4]]
let arr2 = deepClone(arr1)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

Sie können finden die Methode arr1[2] Im Gegensatz zu arr2[2] ist dieselbe Deep-Copy-Methode oben auch auf die Kopie des Objekts

Objekt

• universelle for-Schleife <🎜 anwendbar >

  let obj1 = {a:1,b:{c:2}}
  let obj2 = {}
  for(let key in obj1){
      obj2[key] = obj1[key]
  }
  obj1.b.c = 6
  console.log(obj1,obj2)

• …Operator

  let obj1 = {a:1,b:{c:2}}
  let {...obj2} = obj1
  obj1.b.c = 6
  console.log(obj1,obj2)

• Object.assign()

  let obj1 = {a:1,b:{c:2}}
  let obj2 = Object.assign({},obj1)
  obj1.b.c = 6
  console.log(obj1,obj2)

Die oben genannten 3 Arten Die Methode ist eine flache Kopie des Objekts. Hier sind zwei Methoden zur tiefen Kopie des Objekts:

• in einen String konvertieren und dann zurück in ein Objekt

  let obj1 = {a:1,b:{c:2}}
  let obj2 = JSON.parse(JSON.stringify(obj1))
  obj1.b.c = 6
  console.log(obj1,obj2)

• Die deepClone-Methode ist die deepClone-Methode des obigen Arrays

Verwandte Konzepte

Reine Funktion

Gegeben Als Eingabe für eine Funktion gibt sie ein eindeutiges Ergebnis zurück. Eine Funktion, die eine Ausgabe hat und keine Auswirkungen auf die externe Umgebung hat, wird als reine Funktion bezeichnet. Die darin definierten Variablen werden nach der Rückkehr der Funktion vom Garbage Collection-Mechanismus recycelt.

Wenn der Parameter der Funktion jedoch ein Array, ein Objekt oder eine Funktion ist, wird eine Referenz übergeben, und die Operation wirkt sich auf die Originaldaten aus. Die auf diese Weise geschriebene Funktion hat zufällige Auswirkungen und macht sie lesbar Die Sexualität wird gering.

Die Möglichkeit, die Auswirkungen zu reduzieren, besteht darin, eine tiefe Kopie der eingehenden Parameter zu erstellen und sie einer neuen Variablen zuzuweisen, um zu verhindern, dass die ursprünglichen Parameter manipuliert werden.

Sehen wir uns ein Beispiel einer reinen Funktion an:

let pureFunc = (animal)=> {
    let newAnimal = JSON.parse(JSON.stringify(animal))
    newAnimal.type = 'cat'
    newAnimal.name = 'Miao'
    return newAnimal
}

let wang = {
    type: 'dog',
    name: 'Wang'
}

let miao = pureFunc(wang)
console.log(wang,miao)

Anhand des obigen Beispiels können Sie sehen, dass Wang nicht durch eine reine Funktion geändert wurde.

Lassen Sie uns noch einmal über das folgende Beispiel nachdenken. Wenn Sie es richtig beantworten, bedeutet dies, dass Sie ein tiefes Verständnis dafür haben, worum es in diesem Artikel geht (erinnern Sie alle daran – > Neuzuweisung von Referenzen)

let afterChange = (obj)=>{
    obj.a = 6
    obj = {
        a: 8,
        b: 9
    }
    return obj
}
let objIns = {
    a: 1,
    b: 2
}

let objIns2 = afterChange(objIns)
console.log(objIns, objIns2)

Das Obige ist mein Verständnis der Referenz und Übertragung von js. Bitte verzeihen Sie mir, wenn es Unangemessenheiten gibt.

Sie können auch einige andere Artikel lesen, um Ihr Verständnis zu vertiefen. Ich empfehle diese Erklärung von Value vs. Reference in Javascript.

Verwandte Empfehlungen:

JS-Funktion, die Parameter nach Wert übergibt

JavaScript-Parameterübergabe-Illustrations-Tutorial

Eine kurze Analyse der JSON-Übertragung in PHP und JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JS-Übertragung und des Kopierens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!