Heim > Web-Frontend > js-Tutorial > Ein tief verschachteltes Objekt reduzieren: Eine Schritt-für-Schritt-Anleitung

Ein tief verschachteltes Objekt reduzieren: Eine Schritt-für-Schritt-Anleitung

王林
Freigeben: 2024-08-13 16:38:39
Original
909 Leute haben es durchsucht

Flattening a Deeply Nested Object: A Step-by-Step Guide

Das Problem verstehen
In JavaScript-Anwendungen stoßen wir häufig auf komplexe Datenstrukturen. Bei diesen Strukturen kann es sich um tief verschachtelte Objekte handeln, was ihre direkte Manipulation oder Verarbeitung erschwert. Eine übliche Operation besteht darin, diese Objekte zu verflachen und sie in eine einfachere Struktur umzuwandeln, bei der sich alle Eigenschaften auf der obersten Ebene befinden.

In diesem Blog befassen wir uns mit einem JavaScript-Codeausschnitt, der ein tief verschachteltes Objekt effektiv reduziert. Wir werden den Code Zeile für Zeile aufschlüsseln und seine Logik und Funktionalität erläutern.

Die Code-Aufschlüsselung

let user = {
  name : 'Chiranjit',
  address : {
    personal : {
      city: 'Kolkata',
      state: 'West Bengal'
    },
    office : {
      city: 'Bengaluru',
      state: 'Karnataka',
      area: {
        landmark:'Waterside',
        post: 433101
      }
    }
  }
}
var finalObj = {} 

const flatObjFn = (obj, parent) => {
  for(let key in obj){
    if(typeof obj[key] === 'object'){
      flatObjFn(obj[key], parent+'_'+key)
    }else{
      finalObj[parent + '_' + key] = obj[key]
    }
  }
}

flatObjFn(user, 'user');
console.log(finalObj);
Nach dem Login kopieren

Zeilenweise Erklärung

  1. Erstellen des verschachtelten Objekts:
    • Wir beginnen mit der Erstellung eines tief verschachtelten Objekts mit dem Namen „user“. Es enthält Eigenschaften wie Name, Adresse und weitere darin verschachtelte Objekte Adresse.
  2. Initialisierung des Ausgabeobjekts:

    • Ein leeres Objekt finalObj wird erstellt, um das reduzierte Ergebnis zu speichern.
  3. Definieren der Abflachungsfunktion:

    • Es wird eine Funktion namens flatObjFn definiert, die zwei Parameter akzeptiert: a) obj: Das zu reduzierende Objekt. b) übergeordnetes Element: Eine Zeichenfolge, die der Klarheit halber Eigenschaftsnamen vorangestellt wird.
  4. Iterieren durch Objekteigenschaften:

    • Eine for...in-Schleife durchläuft jede Eigenschaft des Eingabeobjekts obj.
  5. Umgang mit verschachtelten Objekten:

    • Wenn der Wert einer Eigenschaft ein Objekt ist, ist die flatObjFn-Funktion dies rekursiv für dieses Objekt aufgerufen. Der übergeordnete Parameter ist mit dem aktuellen Eigenschaftsnamen verkettet, um ein neues Präfix zu erstellen für die verschachtelten Eigenschaften.
  6. Umgang mit primitiven Werten:

    • Wenn der Wert einer Eigenschaft kein Objekt ist (d. h. ein primitiver Wert). B. eine Zeichenfolge oder eine Zahl), wird es mit einem Schlüssel zum finalObj hinzugefügt Wird durch Verkettung des übergeordneten und des aktuellen Eigenschaftsnamens gebildet.
  7. Aufrufen der Flattening-Funktion:

    • Das flatObjFn wird mit dem Benutzerobjekt als Eingabe und „Benutzer“ als Eingabe aufgerufen das anfängliche übergeordnete Präfix.
  8. Protokollieren des abgeflachten Objekts:

    • Das endgültige abgeflachte Objekt wird mit auf die Konsole gedruckt console.log(finalObj).

Wie es funktioniert?
Die flatObjFn-Funktion durchläuft das Objekt rekursiv und zerlegt verschachtelte Strukturen in ein flaches Objekt. Der übergeordnete Parameter verfolgt die Objekthierarchie und ermöglicht der Funktion, aussagekräftige Eigenschaftsnamen im Ausgabeobjekt zu erstellen.

Vernetzen wir uns auf Twitter oder LinkedIn

Das obige ist der detaillierte Inhalt vonEin tief verschachteltes Objekt reduzieren: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage