Convertir les clés d'un objet en minuscules

Introduction

Dans ce laboratoire (lab), nous allons apprendre à convertir toutes les clés d'un objet en minuscules à l'aide de JavaScript. Cette technique est particulièrement utile lorsque vous travaillez avec des données provenant de différentes sources où la casse des clés d'objet peut être incohérente.

Nous allons utiliser plusieurs méthodes JavaScript pour accomplir cette tâche :

Object.keys() pour obtenir toutes les clés d'un objet
Array.prototype.reduce() pour transformer les données en un nouvel objet
String.prototype.toLowerCase() pour convertir les chaînes de caractères en minuscules

À la fin de ce laboratoire, vous serez en mesure de créer une fonction réutilisable qui peut transformer les clés de n'importe quel objet en minuscules tout en conservant ses valeurs.

Comprendre les objets en JavaScript

Avant de commencer à convertir les clés d'un objet en minuscules, comprenons ce que sont les objets JavaScript et comment nous pouvons les manipuler.

En JavaScript, un objet est une collection de paires clé-valeur. Les clés sont des chaînes de caractères (ou des Symboles), et les valeurs peuvent être de n'importe quel type de données, y compris d'autres objets.

Commençons par ouvrir le shell interactif Node.js :

Ouvrez le terminal dans votre WebIDE
Tapez node puis appuyez sur Entrée

Vous devriez maintenant voir l'invite Node.js (>), qui vous permet de taper directement du code JavaScript.

Créons un objet simple avec des clés en casse mixte :

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

Tapez ce code dans l'invite Node.js puis appuyez sur Entrée. Pour voir l'objet, tapez simplement user puis appuyez sur Entrée :

user;

Vous devriez voir la sortie suivante :

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

Comme vous pouvez le voir, cet objet a des clés avec différents styles de casse. Dans l'étape suivante, nous allons apprendre à accéder à ces clés et à les convertir en minuscules.

Accéder aux clés d'un objet

Avant de pouvoir transformer les clés d'un objet, nous devons comprendre comment y accéder. JavaScript propose la méthode Object.keys(), qui renvoie un tableau contenant toutes les clés d'un objet.

Dans votre shell interactif Node.js, essayez ce qui suit :

Object.keys(user);

Vous devriez voir une sortie comme celle-ci :

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

Maintenant, essayons de convertir chaque clé en minuscules en utilisant la méthode toLowerCase(). Nous pouvons utiliser la méthode map() pour transformer chaque clé :

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

La sortie devrait être :

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

Parfait ! Nous avons maintenant un tableau avec toutes les clés converties en minuscules. Cependant, nous devons encore créer un nouvel objet avec ces clés en minuscules et les valeurs originales. Pour cela, nous utiliserons la méthode reduce() dans l'étape suivante.

Comprenons la méthode reduce() avant de continuer. Cette méthode exécute une fonction de réduction sur chaque élément du tableau, ce qui donne une seule valeur de sortie.

Voici un exemple simple de reduce() :

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

sum;

La sortie sera 10, qui est la somme de tous les nombres du tableau. Le 0 dans la méthode reduce() est la valeur initiale de l'accumulateur.

Création de la fonction de conversion en minuscules

Maintenant que nous savons comment accéder aux clés d'un objet et utiliser la méthode reduce(), créons une fonction qui convertit toutes les clés d'un objet en minuscules.

Dans votre shell interactif Node.js, définissez la fonction suivante :

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

Analysons ce que fait cette fonction :

Object.keys(obj) récupère toutes les clés de l'objet d'entrée
.reduce() transforme ces clés en un nouvel objet
Pour chaque clé, nous créons une nouvelle entrée dans l'objet accumulateur (acc) avec :
- La clé convertie en minuscules en utilisant key.toLowerCase()
- La valeur originale de l'objet d'entrée (obj[key])
Nous commençons avec un objet vide {} comme valeur initiale pour l'accumulateur
Enfin, nous renvoyons l'accumulateur, qui est notre nouvel objet avec des clés en minuscules

Maintenant, testons notre fonction avec l'objet user que nous avons créé précédemment :

const lowercaseUser = lowerizeKeys(user);
lowercaseUser;

Vous devriez voir la sortie suivante :

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

Parfait ! Toutes les clés sont maintenant en minuscules.

Essayons un autre exemple pour nous assurer que notre fonction fonctionne correctement :

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

lowerizeKeys(product);

La sortie devrait être :

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

Notre fonction fonctionne correctement pour différents objets avec divers styles de casse de clés.

Gestion des cas limites

Notre fonction fonctionne bien pour les objets simples, mais qu'en est-il des cas plus complexes ? Explorons certains cas limites et voyons comment notre fonction les gère.

Objets vides

Tout d'abord, testons avec un objet vide :

lowerizeKeys({});

La sortie devrait être un objet vide :

{}

Objets avec des objets imbriqués

Et si l'objet contient des objets imbriqués ? Essayons cela :

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

lowerizeKeys(nestedObject);

La sortie sera :

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

Notez que seule la clé de premier niveau User est convertie en minuscules. Les clés à l'intérieur des objets imbriqués restent inchangées.

Pour gérer les objets imbriqués, nous devrons modifier notre fonction pour traiter récursivement tous les objets. Créons une version améliorée :

const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Vérifie si la valeur est un objet et non null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

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

Cette fonction améliorée :

Vérifie si chaque valeur est également un objet (et non un tableau ou null)
Si c'est le cas, elle s'appelle elle-même de manière récursive sur cet objet imbriqué
Sinon, elle utilise la valeur originale

Testons-la avec notre objet imbriqué :

const deepLowerizedObject = deepLowerizeKeys(nestedObject);
deepLowerizedObject;

Maintenant, vous devriez voir toutes les clés converties en minuscules, même dans les objets imbriqués :

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

Bravo ! Vous avez créé une fonction avancée capable de gérer les objets imbriqués.

Création d'un module réutilisable

Maintenant que nous avons des fonctions opérationnelles, créons un fichier de module JavaScript réutilisable que nous pouvons importer dans d'autres projets.

Tout d'abord, quittons le shell interactif Node.js en appuyant deux fois sur Ctrl+C ou en tapant .exit puis en appuyant sur Entrée.

Maintenant, créons un nouveau fichier nommé object-utils.js dans le répertoire du projet :

Dans l'éditeur WebIDE, accédez au panneau de l'explorateur de fichiers à gauche
Cliquez avec le bouton droit dans le répertoire du projet et sélectionnez "Nouveau fichier"
Nommez le fichier object-utils.js
Ajoutez le code suivant au fichier :

/**
 * Convertit toutes les clés d'un objet en minuscules
 * @param {Object} obj - L'objet d'entrée
 * @returns {Object} Un nouvel objet avec toutes les clés en minuscules
 */
const lowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    acc[key.toLowerCase()] = obj[key];
    return acc;
  }, {});
};

/**
 * Convertit récursivement toutes les clés d'un objet et de ses objets imbriqués en minuscules
 * @param {Object} obj - L'objet d'entrée
 * @returns {Object} Un nouvel objet avec toutes les clés en minuscules (y compris les objets imbriqués)
 */
const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Vérifie si la valeur est un objet et non null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

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

// Exporte les fonctions
module.exports = {
  lowerizeKeys,
  deepLowerizeKeys
};

Maintenant, créons un fichier de test pour vérifier que notre module fonctionne correctement. Créez un nouveau fichier nommé test.js :

Dans l'éditeur WebIDE, accédez au panneau de l'explorateur de fichiers à gauche
Cliquez avec le bouton droit dans le répertoire du projet et sélectionnez "Nouveau fichier"
Nommez le fichier test.js
Ajoutez le code suivant au fichier :

// Importe les fonctions de notre module
const { lowerizeKeys, deepLowerizeKeys } = require("./object-utils");

// Test avec un objet simple
const user = {
  Name: "John",
  AGE: 30,
  Email: "john@example.com"
};

console.log("Objet original :");
console.log(user);

console.log("\nObjet avec des clés en minuscules :");
console.log(lowerizeKeys(user));

// Test avec un objet imbriqué
const nestedObject = {
  User: {
    Name: "John",
    Contact: {
      EMAIL: "john@example.com",
      PHONE: "123-456-7890"
    }
  }
};

console.log("\nObjet imbriqué :");
console.log(nestedObject);

console.log("\nObjet imbriqué avec des clés en minuscules (superficiel) :");
console.log(lowerizeKeys(nestedObject));

console.log("\nObjet imbriqué avec des clés en minuscules (profonde) :");
console.log(deepLowerizeKeys(nestedObject));

Maintenant, exécutons le fichier de test :

node test.js

Vous devriez voir une sortie similaire à :

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

Objet avec des clés en minuscules :
{ name: 'John', age: 30, email: 'john@example.com' }

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

Objet imbriqué avec des clés en minuscules (superficiel) :
{
  user: {
    Name: 'John',
    Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
  }
}

Objet imbriqué avec des clés en minuscules (profonde) :
{
  user: {
    name: 'John',
    contact: { email: 'john@example.com', phone: '123-456-7890' }
  }
}

Félicitations ! Vous avez créé avec succès un module JavaScript réutilisable avec des fonctions pour convertir les clés d'objets en minuscules. Ce module peut maintenant être importé dans n'importe lequel de vos projets JavaScript.

Résumé

Dans ce laboratoire (lab), vous avez appris à convertir les clés d'objets en minuscules en JavaScript. Vous avez :

Exploré les objets JavaScript et la manière d'accéder à leurs clés
Utilisé la méthode Object.keys() pour obtenir toutes les clés d'un objet
Employé la méthode reduce() pour transformer un objet
Créé une fonction pour convertir toutes les clés d'un objet en minuscules
Amélioré la fonction pour gérer récursivement les objets imbriqués
Créé un module JavaScript réutilisable avec les deux fonctions

Ces techniques sont utiles lorsque vous travaillez avec des données provenant de différentes sources où la casse des clés d'objets peut être incohérente. Les fonctions que vous avez créées peuvent aider à normaliser les données et les rendre plus faciles à manipuler.

Vous pouvez étendre ces utilitaires en ajoutant plus de fonctions, telles que :

Convertir les clés d'objets en majuscules
Convertir les clés en camelCase ou snake_case
Filtrer les objets en fonction de critères de clé ou de valeur
Comparer en profondeur les objets pour vérifier leur égalité

Continuez à vous entraîner avec les objets et leur manipulation pour devenir plus compétent dans la programmation JavaScript.

Clés d'objet en minuscules