Analyse der Verwendung der JavaScript-Objektdestrukturierung (detaillierte Beispiele)

Dieser Artikel vermittelt Ihnen relevantes Wissen über die Analyse der Objektdestrukturierung in JavaScript. Ich hoffe, dass er Ihnen hilfreich sein wird.

Die Veröffentlichung von ES6 (ES2015) bietet JavaScript eine bequemere und schnellere Möglichkeit, Objekteigenschaften zu verarbeiten. Dieser Mechanismus wird Destrukturierung (auch Destrukturierungszuweisung genannt) genannt. Aber werden Sie es wirklich nutzen? Verstehen Sie wirklich die Verwendung der Destrukturierungszuweisung in verschiedenen Szenarien?

Werte von Objekten mithilfe der Destrukturierung abrufen

Die grundlegendste Verwendung der Objektdestrukturierung besteht darin, den Wert eines Eigenschaftsschlüssels von einem Objekt abzurufen.

Zum Beispiel definieren wir ein Objekt mit zwei Eigenschaften: Name und Alter

const User = {
  name: '搞前端的半夏',
  age: 18
}

Traditionell würden wir die Punktnotation (.) oder die Indexnotation ([]) verwenden, um Werte von einem Objekt abzurufen. Der folgende Codeausschnitt zeigt ein Beispiel für das Abrufen eines Werts von einem Objekt mithilfe der Punktnotation, um die Wert-ID und den Namen des Objekts abzurufen. Mitarbeiter

Bevor wir den Wert eines bestimmten Attributs im Objekt ermitteln wollten, verwendeten wir normalerweise oder [].

const name = User['name'];
const age = User.age;

Natürlich sind diese beiden Methoden in der aktuellen Situation kein Problem, aber wenn zu viele Benutzerattribute vorhanden sind, müssen wir ständig kopieren und einfügen, was zu einer Menge wiederholtem Code führt.

Mit der Strukturzuweisung können wir schnell den Wert ermitteln. Beispielsweise erstellen wir eine Variable mit dem Schlüsselnamen des Objekts und weisen den Wert des Objekts demselben Schlüssel zu. Auf diese Weise müssen wir, egal wie viele Attribute vorhanden sind, nur den Attributnamen zuweisen, wodurch auch viel wiederholter Code reduziert wird.

const { name, age } = User;

Verwenden Sie die Destrukturierung, um Werte aus verschachtelten Objekten abzurufen

Im obigen Beispiel ist User nur ein einfaches einschichtiges Objekt. In der täglichen Entwicklung werden wir auch auf verschachtelte Objekte stoßen. Verwenden Sie daher die Strukturzuweisung. Wie können wir das abrufen? Wert im verschachtelten Objekt. Als Nächstes definieren wir das Benutzerobjekt neu und fügen diesem Objekt ein Kontaktattribut hinzu, das das Telefon des Benutzers enthält. .

const User = {
  name: '搞前端的半夏',
  age: '18',
  contact:{
    phone:'110',
  }
}

Wenn wir . verwenden, um zum Wert von phone hin und her zu gehen, dauert es zwei Mal

const phone = User.contact.phone;

Wenn wir die Destrukturierungszuweisung verwenden: Die Schreibweise lautet wie folgt:

const  {contact:{phone}}=User
consosle.log(phone)  // 输出10.

Egal wie viele Verschachtelungsebenen, Solange Sie diesem Schreiben folgen, wird es definitiv den spezifischen Wert erhalten.

Verwenden Sie die Objektdestrukturierung, um eine neue Variable und einen Standardwert zu definieren

Standardwert

Natürlich können wir im täglichen Entwicklungsprozess auf viele Extremsituationen stoßen,

Zum Beispiel kann das vom Backend übergebene Objekt fehlen etwas Einige Felder

const User = {
  name: '搞前端的半夏',
}

oder Attribute haben keine spezifischen Werte:

const User = {
  name: '搞前端的半夏',
  age: ''
}

Wenn wir eine destrukturierende Zuweisung verwenden: Die Altersvariable wird unabhängig davon erstellt, ob das Altersattribut vorhanden ist oder nicht.

const { name, age } = employee;

Wenn User.age keinen spezifischen Wert hat, können wir

const { name, age=18 } = employee;

verwenden, um dem Alter einen Standardwert zuzuweisen.

Neue Variable

Warten Sie, warten Sie. In der Dekonstruktionsabteilung gibt es noch mehr Magie zu sehen! Wie erstelle ich eine völlig neue Variable und weise einen Wert zu, der anhand des Eigenschaftswerts des Objekts berechnet wird? Klingt kompliziert? Dies ist ein Beispiel:

Was sollen wir tun, wenn wir den kombinierten Wert des Benutzerattributs ausgeben möchten?

const { name,age,detail = `${name} 今年 ${age} `} = User ;
console.log(detail); // 输出：搞前端的半夏 今年 18

Verwendung von JavaScript-Objektdestrukturierungsaliasen

Bei der JavaScript-Objektdestrukturierung können Sie den Alias ​​der Destrukturierungsvariablen benennen. Sehr praktisch, um das Risiko von Variablennamenkonflikten zu verringern.

const User = {
  name: '搞前端的半夏',
  age: ''
}

Angenommen, wir möchten eine destrukturierende Zuweisung verwenden, um den Wert des Altersattributs zu erhalten, aber die Variable „Alter“ ist bereits im Code. Zu diesem Zeitpunkt müssen wir einen Alias ​​in der Struktur definieren.

const { age: userAge } = User;
console.log(userAge); //搞前端的半夏

Und wenn Sie das Alter verwenden, wird ein Fehler gemeldet.

console.log(age);

Verarbeitung dynamischer Namenseigenschaften mithilfe der Objektdestrukturierung

Wir verarbeiten API-Antwortdaten häufig als JavaScript-Objekte. Diese Objekte können dynamische Daten enthalten, sodass wir als Kunde möglicherweise nicht einmal die Namen der Eigenschaftsschlüssel im Voraus kennen.

const User = {
  name: '搞前端的半夏',
  age: ''
}

Wenn wir den Schlüssel als Parameter übergeben, können wir eine Funktion schreiben, die den Wert der Eigenschaft des Benutzerobjekts zurückgibt. Hier verwenden wir [], um Parameter zu akzeptieren, und js ruft sie basierend auf diesem Schlüsselpaar vom Objekt ab!

function getPropertyValue(key) {
    const { [key]: returnValue } = User;   
    return returnValue;
}

const contact = getPropertyValue('contact');
const name = getPropertyValue('name');
console.log(contact, name); // 空  搞前端的半夏

Destrukturieren von Objekten in Funktionsparametern und Rückgabewerten

Destrukturieren von Zuweisungen und Übergeben von Parametern

Verwenden Sie die Objektdestrukturierung, um Attributwerte als Parameter an Funktionen zu übergeben.

const User = {
  name: '搞前端的半夏',
  age: 18
}

Name Jetzt erstellen wir eine einfache Funktion, die mithilfe der Attributwerte und eine Nachrichtenabteilung erstellt, um sich bei der Browserkonsole anzumelden.

function consoleLogUser({name, age}) {
  console.log(`${name} 今年 ${age}`); 
}

Werte direkt als Funktionsparameter übergeben und intern verwenden.

consoleLogUser(User); // 搞前端的半夏 今年 18

Rückgabewert des Destruktorobjekts

Es gibt eine andere Verwendung des Objektdestruktors. Wenn die Funktion ein Objekt zurückgibt, können Sie den Wert direkt in eine Variable zerlegen. Lassen Sie uns eine Funktion erstellen, die ein Objekt zurückgibt.

function getUser() {
  return {
    'name': '搞前端的半夏',
    'age': 18
  }
}

const { age } = getUser();
console.log(age); // 18

Objektdestrukturierung in Schleifen verwenden

Die letzte (aber nicht zuletzt) ​​Verwendung, die wir besprechen werden, ist die Schleifendestrukturierung. Betrachten wir eine Reihe von Mitarbeiterobjekten. Wir möchten das Array durchlaufen und die Eigenschaftswerte jedes Mitarbeiterobjekts verwenden.

const User= [
  { 
       'name': '爱分享的半夏',
    'age': 16
  },
  { 
      'name': '搞前端的半夏',
    'age': 18
  },
  { 
        'name': '敲代码的半夏',
    'age': 20
  }
];

Sie können eine for-of-Schleife verwenden, um das Benutzerobjekt zu durchlaufen, und dann die Zuweisungssyntax zur Objektdestrukturierung verwenden, um die Details abzurufen.

for(let {name, age} of employees) {
  console.log(`${name} 今年${age}岁!!!`);
}

Verwandte Empfehlungen: Javascript-Lerntutorial

Das obige ist der detaillierte Inhalt vonAnalyse der Verwendung der JavaScript-Objektdestrukturierung (detaillierte Beispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!