Detaillierte Erläuterung verschiedener Möglichkeiten zum Zusammenführen von Javascript-Objekten

Verschiedene Möglichkeiten zum Zusammenführen von Objekten (äußerst nützlich, wenn Daten über eine Schnittstelle abgerufen und einem lokalen Objekt zugewiesen werden sollen)

Die erste Methode: manuelle Zuweisung (sehr gut)

const obj1 = {
  Name: "zs",
  Alter: 13,
};
const obj2 = {
  Name: "ls",
  Geschlecht: "weiblich",
};
obj1.name = obj2.name;
obj1.sex = obj2.sex;

Diese Methode ist die einfachste, aber in alltäglichen Projekten hat ein Objekt viele Eigenschaften, sodass es etwas umständlich wäre, wenn diese Methode weiterhin verwendet würde.

Zweitens: Erweiterungsoperator

const obj1 = {
  Name: "zs",
  Alter: 13,
};
const obj2 = {
  Name: "ls",
  Geschlecht: "weiblich",
};
const neuesObj = { ...obj1, ...obj2 };
console.log(neuesObj === obj1); //falsch
console.log(neuesObj === obj2); //falsch

Mit dem Spread-Operator können Sie Objekte schnell zusammenführen. Der Nachteil ist, dass Sie eine neue Variable verwenden müssen, um die

Die dritte Methode: Object.assign() (am meisten empfohlen)

const obj1 = {
  Name: "zs",
  Alter: 13,
};
const obj2 = {
  Name: "ls",
  Geschlecht: "weiblich",
};
const newObj = Objekt.assign(obj1, obj2);
console.log(neuesObj === obj1); //wahr
console.log(neuesObj === obj2); //falsch
console.log(neuesObjekt);
// {
// Name: 'ls',
//Alter:13,
// Geschlecht: 'weiblich'
// }

Die Methode Object.assign() kann als Parameter ein Zielobjekt und ein oder mehrere Quellobjekte empfangen. Wenn die Objekte dieselben Eigenschaften haben, überschreiben die Eigenschaften des letzteren Objekts die Eigenschaften des ersteren Objekts.

Das Prinzip besteht darin, dem Zielobjekt durch das festgelegte Zugriffsattribut nachfolgende Objekte hinzuzufügen, sodass der endgültige zurückgegebene Wert tatsächlich das erste Zielobjekt ist. Sie können dem Zielobjekt Zugriffsattribute hinzufügen, um den Überschreibungsprozess anzuzeigen.

const obj1 = {
  setze a(Wert) {
    konsole.log(Wert);
  },
};
Objekt.assign(obj1, { a: "tom" }, { a: "jerry" }, { a: "hund" });
//'Tom'
//'Jerry'
//'Hund'

Diese Methode kann in vielen Szenarien verwendet werden und ist beispielsweise besonders nützlich:

1. Vue-Projekt klares Formular

Einige Schüler löschen das Formular möglicherweise, indem sie den Daten im Formular nacheinander leere Werte zuweisen. Tatsächlich ist die Effizienz sehr gering. Wenn jedoch Object.assign() und $options zusammen verwendet werden, ist die Effizienz sehr hoch.

// Täglich this.ruleForm.name='';
this.ruleForm.phone='';
this.ruleForm.imgUrl='';
this.ruleForm.des='';
...10.000 Wörter hier ausgelassen // Verwenden von Object.assign und $options
Objekt.zuweisen(diese.RegelForm,diese.$Optionen.Daten)

Tipps : $options speichert den Anfangswert der Vue-Instanz, sodass Sie das Formular über die Funktion „Wert überschreiben“ von Object.assign() schnell zurücksetzen können. Wenn Sie die Formulardaten ändern, können Sie auch schnell das Regelformular der Seite zuweisen.

const { data } = warte auf xxxApi.getList();
Objekt.zuweisen(this.ruleForm, Daten);

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!