Erfahren Sie in einem Artikel, wie Sie Objekte in JavaScript zusammenführen und klonen

In diesem Artikel erfahren Sie, wie Sie Objekte in JavaScript zusammenführen und klonen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Primitive und Referenzwerte (Objekte) verhalten sich sehr unterschiedlich, wenn wir sie kopieren wollen.

Primitive Werte

Wir gehen davon aus, dass einer Variablen name ein primitiver Wert zugeordnet ist (Zahl, Zeichenfolge, boolescher Wert, undefiniert und null). Wenn wir diese Variable name in eine andere Variable name2 kopieren, wirken sich etwaige Änderungen an der ursprünglichen Variablen nicht auf die zweite Variable aus, da es sich um Originalwerte handelt. name 具有一个与之关联的原始值（number，string，boolean，undefined 和null）。 如果我们将此变量 name 复制到另一个变量name2 ，则原始变量的任何修改都不会影响到第二个变量，因为它们是原始值。

let name="前端小智";
let name2= name;
console.log (name, name2); // 前端小智, 前端小智
name="王大冶";
console.log (name,name2); // 王大冶 前端小智

引用值

但是，如果我们对引用类型的值进行相同的操作，则我们对一个变量所做的任何更改也将反映在另一个变量中，因为两个变量都指向同一对象。

数组

要拷贝数组，slice()方法用于创建数组的新副本。 可以独立修改此副本，而不会影响原始数组。

如果未传递任何参数，则它会精确复制数组，但数字也可以作为参数传递。 如果仅传递一个数字，它将确定我们要从其进行复制的索引的值，而如果传递两个数字，则将标记开始和结束。

// 示例1
const names = ['前端小智', '王大冶', '小力'];
const names2 = names;
console.log(names, names2);
// ["前端小智", "王大冶", "小力"] 
// ["前端小智", "王大冶", "小力"] 

// 示例2
names2[2] = '前端小力';
console.log(names, names2);
//  ["前端小智", "王大冶", "前端小力"] 
//  ["前端小智", "王大冶", "前端小力"] 

// 示例3
const name2 = names.slice();
names[2] = '我是隔壁老智';
console.log(name2, names2)
// ["前端小智", "王大冶", "前端小力"]
//  ["前端小智", "王大冶", "我是隔壁老智"]

对象

当引用值是一个对象时，也会发生同样的情况，对其属性之一的任何修改都会影响这两个变量。 若要克隆对象，请使用 Object.assign() 方法，该方法会将一个或多个源对象的所有可枚举属性的值复制到目标对象，但是此方法仅对对象的一个浅拷贝。

// 示例1
const names = {
  name: '前端小智',
  surname: '隔壁老智'
}

const names2 = names;
console.log(names, names2) // 打印结果是一模一样的

// 示例2
names2.surname ='隔壁老王';
console.log(names, names2)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老王"}

// 示例3
const names3 = Object.assign({}, names);
names3.surname = '隔壁老色P';
console.log(names, names3)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老色P"}

要对对象进行深拷贝，需要使用其他方法。

正如我们所说，Object.assign()方法只是一个浅拷贝（即，当我们的对象没有其他对象作为属性时）才有效。 在这些情况下，必须对对象进行深拷贝。

与浅拷贝不同，深拷贝以递归方式复制每个子对象，直到所有涉及的对象都被复制为止。

我们可以使用什么方法复制对象的深层副本？

JSON.parse(JSON.stringify(obj))

此方法使用JSON.stringify()将对象转换为字符串，然后再用JSON.parse()将其转换回对象。 此方法对简单对象有效，但如果对象属性是函数时无效。

const names = {
  name: '前端小智',
  surname: '隔壁老智',
  social: {
    wx: '大迁世界',
    url: 'www.lsp.com'
  }
}
const names2 = JSON.parse(JSON.stringify(names));
names2.social.url = 'www.baidu.com';
console.log(names, names2);

/** 
{
  name: "前端小智"
  social: {wx: "大迁世界", url: "www.lsp.com"}
  surname: "隔壁老智"
}
*/

/** 
{
  name: "前端小智"
  social: {wx: "大迁世界", url: "www.baidu.com"}
  surname: "隔壁老智"
}
*/

深度拷贝

另一种非常有趣和优雅的对象深度复制方法是使用递归函数。

我们创建了一个deepClone(object)函数，将想要克隆的对象作为参数传递给它。在函数内部，将创建一个局部变量克隆，这是一个空对象，其中将从起始对象克隆的每个属性都将添加到该对象中。

具体思路：

• 如果该属性不是对象，则将其简单地克隆并添加到新的克隆对象中。
• 如果属性是对象，则再次执行deepClone（value）

  function deepClone(object) {
    var clone = {};
    for (var key in object) {
      var value = object[key];
      if (typeof(value) !== 'object') {
        clone[key] = value;
      } else {
        clone[key]=deepClone(value);
      }
    }
    return clone;
  } 
  
  deepClone({value1:1,value2:{value3:2}});
  //{value1:1,value2:{value3:2}}
  deepClone({value1:1,value2:{value3:{value3b:3}}});
  //{value1:1,value2:{value3:{value3b:3}}}

Referenzwerte

Aber wenn wir dasselbe mit einem Referenztypwert machen, werden alle Änderungen, die wir an einer Variablen vornehmen, auch in der anderen widergespiegelt, da beide Variablen auf dasselbe Objekt verweisen.

Arrays

Um ein Array zu kopieren, wird die Methode slice() verwendet, um eine neue Kopie des Arrays zu erstellen. Diese Kopie kann unabhängig geändert werden, ohne dass sich dies auf das ursprüngliche Array auswirkt. Wenn keine Argumente übergeben werden, wird eine exakte Kopie des Arrays erstellt, es können aber auch Zahlen als Argumente übergeben werden. Wenn nur eine Zahl übergeben wird, bestimmt es den Wert des Indexes, von dem wir kopieren möchten, während es bei der Übergabe von zwei Zahlen den Anfang und das Ende markiert.

rrreee🎜🎜Objekte🎜🎜🎜Das Gleiche passiert, wenn der Referenzwert ein Objekt ist. Jede Änderung an einer seiner Eigenschaften wirkt sich auf beide Variablen aus. Um ein Objekt zu klonen, verwenden Sie die Methode Object.assign() , die die Werte aller aufzählbaren Eigenschaften eines oder mehrerer Quellobjekte in das Zielobjekt kopiert. Diese Methode gilt jedoch nur für Objekte A flache Kopie von . 🎜rrreee🎜Um eine tiefe Kopie eines Objekts zu erstellen, müssen Sie andere Methoden verwenden. 🎜🎜Wie gesagt, die Methode Object.assign() funktioniert nur als flache Kopie (d. h. wenn unser Objekt keine anderen Objekte als Eigenschaften hat). In diesen Fällen muss eine tiefe Kopie des Objekts erstellt werden. 🎜🎜Im Gegensatz zum flachen Kopieren kopiert das tiefe Kopieren jedes untergeordnete Objekt rekursiv, bis alle beteiligten Objekte kopiert wurden. 🎜🎜Mit welcher Methode können wir eine tiefe Kopie eines Objekts erstellen? 🎜🎜🎜JSON.parse(JSON.stringify(obj))🎜🎜🎜Diese Methode verwendet JSON.stringify(), um das Objekt in einen String zu konvertieren, und verwendet dann JSON.parse( ) Konvertieren Sie es zurück in ein Objekt. Diese Methode funktioniert für einfache Objekte, jedoch nicht, wenn die Objekteigenschaft eine Funktion ist. 🎜rrreee🎜🎜Deep Copy🎜🎜🎜Eine weitere sehr interessante und elegante Möglichkeit, Objekte tief zu kopieren, ist die Verwendung rekursiver Funktionen. 🎜🎜Wir erstellen eine deepClone(object)-Funktion und übergeben ihr das Objekt, das wir klonen möchten, als Parameter. Innerhalb der Funktion wird ein lokaler Variablenklon erstellt, bei dem es sich um ein leeres Objekt handelt, dem alle Eigenschaften hinzugefügt werden, die vom Startobjekt geklont werden. 🎜🎜Spezifische Idee: 🎜

• Wenn die Eigenschaft kein Objekt ist, klonen Sie sie einfach und fügen Sie sie dem neuen geklonten Objekt hinzu. 🎜
• Wenn es sich bei der Eigenschaft um ein Objekt handelt, führen Sie die Funktion deepClone(value) erneut aus, übergeben Sie den Wert der Eigenschaft (in diesem Fall das Objekt) als Parameter und wiederholen Sie den gleichen Vorgang. 🎜🎜rrreee🎜🎜Englische Originaladresse: https://www.ma-o.org/en/programming/javascript/the-javascript-asign-method-to-merge-and-clone-objects🎜🎜Autor: Luigi Nori 🎜🎜Übersetzer: Front-End Xiaozhi🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonErfahren Sie in einem Artikel, wie Sie Objekte in JavaScript zusammenführen und klonen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!