Detaillierte Erklärung zum Übergeben und Kopieren in js

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 die Werte zu kopieren ​​des Arrays. 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

  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 Typen Die Methode ist eine flache Kopie des Objekts. Lassen Sie uns zwei Methoden der tiefen Kopie des Objekts vorstellen:

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

  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

Wenn eine Funktion eine Eingabe erhält, gibt sie eine eindeutige Funktion 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.

Wir stoßen oft auf die Situation, eine Variable einer anderen Variablen im Projekt zuzuweisen. Dies ist eigentlich die Übertragung von js, aber verschiedene Datentypen verhalten sich nach der Zuweisung unterschiedlich

传递

我们知道js有几种基本的数据类型和其他的复杂数据类型包括（对象，数组，函数），基本数据类型的赋值其实就是值的拷贝，我们称之为值传递，赋值后的变量和原来的变量除了值相等之外并无其他关联

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'

复杂数据类型的传递并不是这样子的，因为将一个变量绑定到一个复杂数据类型的时候记录的并不是这个复杂数据的值，而是存放了这个数据的一个地址信息，当将这个变量赋值给另一个变量的时候只是将地址传递了过去，这两个变量指向的其实是一个数据信息，当改变任意一个变量的时候，另外的变量都会受到影响,这种传递方式我们称之为引用传递

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

拷贝

我们知道复杂数据类型的赋值是引用传递，赋值前后的变量会相互影响，在实际项目中我们经常不希望这样子，譬如：

我们在一个view里面有两处用到了data（是一个Array），其一是一个list只要把data按顺序展示即可，其二是一个chart需要把data逆序之后再做数据处理，这时候我们就犯难了，如果直接data.reverse()之后第一处的列表也是逆序的了，这不是我们想见的，我们需要一个方法只复制数组的值，并且这个新数组和原数组的数据地址并不一样，这种复制方式我们称为数组的拷贝。

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

上面的例子可以看出来obj1的第一层属性是复制属性值，没有继承地址的拷贝，但是第二层就是b属性确实共享一块内存地址的，这就是浅拷贝，但是在@4处obj1却没有收到obj2的影响，是因为属性b是一个对象，这种引用传递的重新赋值，计算机会重新分配一块新的内存来存放数据和记录地址信息，所以这时obj1.b.c和obj2.b.c已经不是记录的一个属性值了

也可以理解为：拷贝是之于传递的，直接对复杂数据类型进行赋值是引用传递，不能称之为拷贝，拷贝是对原数据的单纯的数据备份，数据的内存地址信息并不完全一样，这是因为拷贝还分为浅拷贝和深拷贝。

对复杂数据类型的非嵌套的拷贝，就是只拷贝第一层的数据信息的拷贝是浅拷贝，如果第一层的数据有复杂数据类型，则依然采用引用传递的方式，复制的仍然是地址信息，通过其他方式实现的数组对象等的多层嵌套拷贝就是深拷贝。

下面我们再来看下数组和对象如何来实现深浅拷贝：

数组的拷贝

• slice方法

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

• concat方法

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

• for循环

  let arr1 = [1,2,[3,4]]
  let arr2 = []
  for(let i = 0; i32bfcfa2ad8973d97a5666fc1acc4e11 {
      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)

  可以发现用方面的方法arr1[2]和arr2[2]不一样，同样上面的深拷贝的方法也适用于对象

  对象的拷贝

  • 万能的for循环

    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)

  • …运算符

    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)

  上面3种方法是对象的浅拷贝,再介绍2种对象的深拷贝的方法：

  • 转为字符串再转回对象

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

  • deepClone方法，就是上面的数组的deepClone方法

  相关的概念

  纯函数

  给定函数一个输入返回一个唯一的输出，并且不对外部环境附带任何影响的函数我们称为纯函数，其内定义的变量在函数返回后都会被垃圾回收机制回收掉。

  但是如果函数的参数是数组、对象或函数时，传入的是一个引用，对其操作会影响到原来的数据，这样子写的函数会产生附带的影响，使得可读性变低。

  降低影响的方式就是对传入参数进行深度拷贝，并赋给一个新的变量，方式原来的参数被篡改。

  我们来看一个纯函数的例子：

  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)

  通过上面的例子可以看到wang并没有被纯函数所改变值。

  大家再来思考一下下面的例子，如果答对了说明你已经对本文所讲的东西有了很深刻的理解了(提醒大家一下—>引用的重新赋值)

  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)

  以上就是我对js的引用和传递的理解，如有不当之处敬请谅解，Thanks！

  相关推荐：

  js函数的按值传递参数

  JavaScript参数传递图解教程

  js函数参数的按值传递解释

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung zum Übergeben und Kopieren in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!