Objektschlüssel in Kleinbuchstaben

Einführung

In diesem Lab werden wir lernen, wie man alle Schlüssel (keys) eines Objekts mit JavaScript in Kleinbuchstaben umwandelt. Diese Technik ist besonders nützlich, wenn man mit Daten aus verschiedenen Quellen arbeitet, bei denen die Groß- und Kleinschreibung der Objektschlüssel inkonsistent sein kann.

Wir werden mehrere JavaScript-Methoden nutzen, um diese Aufgabe zu erfüllen:

• Object.keys() um alle Schlüssel (keys) aus einem Objekt zu erhalten
• Array.prototype.reduce() um Daten in ein neues Objekt zu transformieren
• String.prototype.toLowerCase() um Strings in Kleinbuchstaben umzuwandeln

Am Ende dieses Labs können Sie eine wiederverwendbare Funktion erstellen, die die Schlüssel (keys) eines beliebigen Objekts in Kleinbuchstaben umwandeln kann, während die Werte beibehalten werden.

Skills Graph

Grundlagen zu Objekten in JavaScript

Bevor wir beginnen, die Schlüssel (keys) von Objekten in Kleinbuchstaben umzuwandeln, lernen wir zunächst, was JavaScript-Objekte sind und wie wir mit ihnen arbeiten können.

In JavaScript ist ein Objekt eine Sammlung von Schlüssel-Wert-Paaren (key-value pairs). Die Schlüssel (keys) sind Strings (oder Symbole), und die Werte können von jedem Datentyp sein, einschließlich anderer Objekte.

Beginnen wir damit, die Node.js interaktive Shell zu öffnen:

1. Öffnen Sie das Terminal in Ihrer WebIDE.
2. Geben Sie node ein und drücken Sie die Eingabetaste.

Sie sollten jetzt die Node.js-Eingabeaufforderung (>) sehen, die es Ihnen ermöglicht, direkt JavaScript-Code einzugeben.

Erstellen wir ein einfaches Objekt mit Schlüsseln in gemischter Groß- und Kleinschreibung:

const user = {
  Name: "John",
  AGE: 30,
  Email: "john@example.com"
};

Geben Sie diesen Code in die Node.js-Eingabeaufforderung ein und drücken Sie die Eingabetaste. Um das Objekt anzuzeigen, geben Sie einfach user ein und drücken Sie die Eingabetaste:

user;

Sie sollten die folgende Ausgabe sehen:

{ Name: 'John', AGE: 30, Email: 'john@example.com' }

Wie Sie sehen können, hat dieses Objekt Schlüssel (keys) mit unterschiedlichen Groß- und Kleinschreibungen. Im nächsten Schritt lernen wir, wie wir auf diese Schlüssel zugreifen und sie in Kleinbuchstaben umwandeln können.

Zugriff auf Objektschlüssel (Object Keys)

Bevor wir die Schlüssel (keys) von Objekten transformieren können, müssen wir verstehen, wie wir auf sie zugreifen können. JavaScript bietet die Methode Object.keys(), die ein Array zurückgibt, das alle Schlüssel (keys) eines Objekts enthält.

Versuchen Sie in Ihrer Node.js interaktiven Shell Folgendes:

Object.keys(user);

Sie sollten eine Ausgabe wie diese sehen:

[ 'Name', 'AGE', 'Email' ]

Jetzt versuchen wir, jeden Schlüssel (key) mit der Methode toLowerCase() in Kleinbuchstaben umzuwandeln. Wir können die Methode map() verwenden, um jeden Schlüssel zu transformieren:

Object.keys(user).map((key) => key.toLowerCase());

Die Ausgabe sollte wie folgt aussehen:

[ 'name', 'age', 'email' ]

Toll! Wir haben jetzt ein Array mit allen Schlüsseln (keys), die in Kleinbuchstaben umgewandelt wurden. Allerdings müssen wir noch ein neues Objekt mit diesen Kleinbuchstaben-Schlüsseln und den ursprünglichen Werten erstellen. Dazu verwenden wir in dem nächsten Schritt die Methode reduce().

Lassen Sie uns die Methode reduce() verstehen, bevor wir fortfahren. Diese Methode führt eine Reduzierfunktion (reducer function) für jedes Element des Arrays aus und liefert einen einzelnen Ausgabewert.

Hier ist ein einfaches Beispiel für reduce():

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

sum;

Die Ausgabe wird 10 sein, was die Summe aller Zahlen im Array ist. Die 0 in der reduce()-Methode ist der Anfangswert des Akkumulators (accumulator).

Erstellen der Funktion zur Umwandlung in Kleinbuchstaben

Nachdem wir nun verstehen, wie man auf Objektschlüssel (Object Keys) zugreift und die reduce()-Methode verwendet, erstellen wir eine Funktion, die alle Schlüssel (keys) eines Objekts in Kleinbuchstaben umwandelt.

Definieren Sie in Ihrer Node.js interaktiven Shell die folgende Funktion:

const lowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    acc[key.toLowerCase()] = obj[key];
    return acc;
  }, {});
};

Lassen Sie uns analysieren, was diese Funktion tut:

1. Object.keys(obj) ruft alle Schlüssel (keys) des Eingabeobjekts ab.
2. .reduce() transformiert diese Schlüssel in ein neues Objekt.
3. Für jeden Schlüssel (key) erstellen wir einen neuen Eintrag im Akkumulatorobjekt (acc) mit:
   • Dem Schlüssel, der mit key.toLowerCase() in Kleinbuchstaben umgewandelt wurde.
   • Dem ursprünglichen Wert aus dem Eingabeobjekt (obj[key]).
4. Wir beginnen mit einem leeren Objekt {} als Anfangswert für den Akkumulator.
5. Schließlich geben wir den Akkumulator zurück, der unser neues Objekt mit Kleinbuchstaben-Schlüsseln ist.

Jetzt testen wir unsere Funktion mit dem user-Objekt, das wir zuvor erstellt haben:

const lowercaseUser = lowerizeKeys(user);
lowercaseUser;

Sie sollten die folgende Ausgabe sehen:

{ name: 'John', age: 30, email: 'john@example.com' }

Perfekt! Alle Schlüssel (keys) sind jetzt in Kleinbuchstaben.

Lassen Sie uns ein weiteres Beispiel versuchen, um sicherzustellen, dass unsere Funktion korrekt funktioniert:

const product = {
  ProductID: 101,
  ProductName: "Laptop",
  PRICE: 999.99
};

lowerizeKeys(product);

Die Ausgabe sollte wie folgt aussehen:

{ productid: 101, productname: 'Laptop', price: 999.99 }

Unsere Funktion funktioniert korrekt für verschiedene Objekte mit unterschiedlichen Groß- und Kleinschreibungen der Schlüssel (keys).

Umgang mit Randfällen (Edge Cases)

Unsere Funktion funktioniert gut für einfache Objekte, aber wie sieht es mit komplexeren Fällen aus? Lassen Sie uns einige Randfälle (Edge Cases) untersuchen und sehen, wie unsere Funktion damit umgeht.

Leere Objekte

Zunächst testen wir mit einem leeren Objekt:

lowerizeKeys({});

Die Ausgabe sollte ein leeres Objekt sein:

{}

Objekte mit verschachtelten Objekten

Was passiert, wenn das Objekt verschachtelte Objekte enthält? Lassen Sie uns das ausprobieren:

const nestedObject = {
  User: {
    Name: "John",
    Contact: {
      EMAIL: "john@example.com",
      PHONE: "123-456-7890"
    }
  }
};

lowerizeKeys(nestedObject);

Die Ausgabe wird wie folgt aussehen:

{ user: { Name: 'John', Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' } } }

Beachten Sie, dass nur der oberste Schlüssel (key) User in Kleinbuchstaben umgewandelt wird. Die Schlüssel (keys) innerhalb der verschachtelten Objekte bleiben unverändert.

Um verschachtelte Objekte zu verarbeiten, müssten wir unsere Funktion ändern, um alle Objekte rekursiv zu verarbeiten. Lassen Sie uns eine verbesserte Version erstellen:

const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Check if the value is an object and not null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

    acc[key.toLowerCase()] = newValue;
    return acc;
  }, {});
};

Diese verbesserte Funktion:

1. Prüft, ob jeder Wert ebenfalls ein Objekt ist (und kein Array oder null).
2. Wenn ja, ruft sie sich selbst rekursiv für das verschachtelte Objekt auf.
3. Andernfalls verwendet sie den ursprünglichen Wert.

Lassen Sie uns sie mit unserem verschachtelten Objekt testen:

const deepLowerizedObject = deepLowerizeKeys(nestedObject);
deepLowerizedObject;

Jetzt sollten Sie sehen, dass alle Schlüssel (keys) in Kleinbuchstaben umgewandelt sind, auch in verschachtelten Objekten:

{ user: { name: 'John', contact: { email: 'john@example.com', phone: '123-456-7890' } } }

Gut gemacht! Sie haben eine fortschrittliche Funktion erstellt, die verschachtelte Objekte verarbeiten kann.

Erstellen eines wiederverwendbaren Moduls

Nachdem wir nun funktionierende Funktionen haben, erstellen wir eine wiederverwendbare JavaScript-Moduldatei, die wir in andere Projekte importieren können.

Zunächst beenden wir die Node.js interaktive Shell, indem wir zweimal Ctrl+C drücken oder .exit eingeben und Enter drücken.

Jetzt erstellen wir eine neue Datei namens object-utils.js im Projektverzeichnis:

1. Navigieren Sie im WebIDE zum Dateiexplorer auf der linken Seite.
2. Klicken Sie mit der rechten Maustaste im Projektverzeichnis und wählen Sie "Neue Datei".
3. Benennen Sie die Datei object-utils.js.
4. Fügen Sie den folgenden Code in die Datei ein:

/**
 * Converts all keys of an object to lowercase
 * @param {Object} obj - The input object
 * @returns {Object} A new object with all keys in lowercase
 */
const lowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    acc[key.toLowerCase()] = obj[key];
    return acc;
  }, {});
};

/**
 * Recursively converts all keys of an object and its nested objects to lowercase
 * @param {Object} obj - The input object
 * @returns {Object} A new object with all keys in lowercase (including nested objects)
 */
const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Check if the value is an object and not null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

    acc[key.toLowerCase()] = newValue;
    return acc;
  }, {});
};

// Export the functions
module.exports = {
  lowerizeKeys,
  deepLowerizeKeys
};

Jetzt erstellen wir eine Testdatei, um zu überprüfen, ob unser Modul korrekt funktioniert. Erstellen Sie eine neue Datei namens test.js:

1. Navigieren Sie im WebIDE zum Dateiexplorer auf der linken Seite.
2. Klicken Sie mit der rechten Maustaste im Projektverzeichnis und wählen Sie "Neue Datei".
3. Benennen Sie die Datei test.js.
4. Fügen Sie den folgenden Code in die Datei ein:

// Import the functions from our module
const { lowerizeKeys, deepLowerizeKeys } = require("./object-utils");

// Test with a simple object
const user = {
  Name: "John",
  AGE: 30,
  Email: "john@example.com"
};

console.log("Original object:");
console.log(user);

console.log("\nObject with lowercase keys:");
console.log(lowerizeKeys(user));

// Test with a nested object
const nestedObject = {
  User: {
    Name: "John",
    Contact: {
      EMAIL: "john@example.com",
      PHONE: "123-456-7890"
    }
  }
};

console.log("\nNested object:");
console.log(nestedObject);

console.log("\nNested object with lowercase keys (shallow):");
console.log(lowerizeKeys(nestedObject));

console.log("\nNested object with lowercase keys (deep):");
console.log(deepLowerizeKeys(nestedObject));

Jetzt führen wir die Testdatei aus:

node test.js

Sie sollten eine Ausgabe ähnlich der folgenden sehen:

Original object:
{ Name: 'John', AGE: 30, Email: 'john@example.com' }

Object with lowercase keys:
{ name: 'John', age: 30, email: 'john@example.com' }

Nested object:
{
  User: {
    Name: 'John',
    Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (shallow):
{
  user: {
    Name: 'John',
    Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (deep):
{
  user: {
    name: 'John',
    contact: { email: 'john@example.com', phone: '123-456-7890' }
  }
}

Herzlichen Glückwunsch! Sie haben erfolgreich ein wiederverwendbares JavaScript-Modul mit Funktionen zum Umwandeln von Objektschlüsseln in Kleinbuchstaben erstellt. Dieses Modul kann nun in alle Ihre JavaScript-Projekte importiert werden.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie Objektschlüssel (keys) in JavaScript in Kleinbuchstaben umwandeln können. Sie haben:

1. JavaScript-Objekte untersucht und gelernt, wie man auf ihre Schlüssel (keys) zugreift.
2. Die Methode Object.keys() verwendet, um alle Schlüssel (keys) eines Objekts zu erhalten.
3. Die Methode reduce() genutzt, um ein Objekt zu transformieren.
4. Eine Funktion erstellt, um alle Schlüssel (keys) eines Objekts in Kleinbuchstaben umzuwandeln.
5. Die Funktion verbessert, um verschachtelte Objekte rekursiv zu verarbeiten.
6. Ein wiederverwendbares JavaScript-Modul mit beiden Funktionen erstellt.

Diese Techniken sind nützlich, wenn Sie mit Daten aus verschiedenen Quellen arbeiten, bei denen die Groß- und Kleinschreibung der Objektschlüssel (keys) inkonsistent sein kann. Die von Ihnen erstellten Funktionen können helfen, die Daten zu normalisieren und einfacher zu verarbeiten.

Sie können diese Hilfsmittel weiter erweitern, indem Sie weitere Funktionen hinzufügen, wie z. B.:

• Umwandeln von Objektschlüsseln (keys) in Großbuchstaben.
• Umwandeln von Schlüsseln (keys) in camelCase oder snake_case.
• Filtern von Objekten basierend auf Schlüssel- oder Wertkriterien.
• Tiefgehende Vergleich von Objekten auf Gleichheit.

Setzen Sie das Üben mit Objekten und ihrer Manipulation fort, um sich in der JavaScript-Programmierung zu verbessern.