LabEx
ВходРегистрация

Преобразование ключей объекта в нижний регистр

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии (лабораторной работе) мы научимся преобразовывать все ключи объекта в нижний регистр с использованием JavaScript. Этот метод особенно полезен при работе с данными из разных источников, где регистр ключей объекта может быть несовместимым.

Мы будем использовать несколько методов JavaScript для выполнения этой задачи:

  • Object.keys() для получения всех ключей объекта
  • Array.prototype.reduce() для преобразования данных в новый объект
  • String.prototype.toLowerCase() для преобразования строк в нижний регистр

По завершении этого практического занятия вы сможете создать переиспользуемую функцию, которая может преобразовать ключи любого объекта в нижний регистр, сохраняя при этом его значения.

Понимание объектов в JavaScript

Прежде чем мы начнем преобразовывать ключи объектов в нижний регистр, давайте разберемся, что такое объекты JavaScript и как с ними работать.

В JavaScript объект представляет собой коллекцию пар ключ-значение. Ключи являются строками (или Symbol), а значения могут быть любого типа данных, включая другие объекты.

Начнем с открытия интерактивной оболочки Node.js:

  1. Откройте терминал в вашем WebIDE.
  2. Введите node и нажмите Enter.

Теперь вы должны увидеть приглашение Node.js (>), которое позволяет вам напрямую вводить код JavaScript.

Создадим простой объект с ключами в смешанном регистре:

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

Введите этот код в приглашение Node.js и нажмите Enter. Чтобы увидеть объект, просто введите user и нажмите Enter:

user;

Вы должны увидеть следующий вывод:

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

Как вы можете видеть, в этом объекте ключи имеют разные стили написания. На следующем шаге мы научимся обращаться к этим ключам и преобразовывать их в нижний регистр.

Обращение к ключам объекта

Прежде чем мы сможем преобразовать ключи объекта, нам нужно понять, как к ним обращаться. JavaScript предоставляет метод Object.keys(), который возвращает массив, содержащий все ключи объекта.

В интерактивной оболочке Node.js попробуйте следующее:

Object.keys(user);

Вы должны увидеть такой вывод:

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

Теперь попробуем преобразовать каждый ключ в нижний регистр с использованием метода toLowerCase(). Мы можем использовать метод map() для преобразования каждого ключа:

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

Вывод должен быть таким:

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

Отлично! Теперь у нас есть массив со всеми ключами, преобразованными в нижний регистр. Однако нам еще нужно создать новый объект с этими ключами в нижнем регистре и исходными значениями. Для этого мы будем использовать метод reduce() на следующем шаге.

Прежде чем двигаться дальше, разберемся с методом reduce(). Этот метод выполняет функцию-редуктор для каждого элемента массива, в результате чего получается одно выходное значение.

Вот простой пример использования reduce():

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

sum;

Вывод будет 10, что является суммой всех чисел в массиве. Число 0 в методе reduce() является начальным значением аккумулятора.

Создание функции для преобразования ключей в нижний регистр

Теперь, когда мы понимаем, как обращаться к ключам объекта и использовать метод reduce(), давайте создадим функцию, которая преобразует все ключи объекта в нижний регистр.

В интерактивной оболочке Node.js определите следующую функцию:

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

Разберем, что делает эта функция:

  1. Object.keys(obj) получает все ключи входного объекта.
  2. .reduce() преобразует эти ключи в новый объект.
  3. Для каждого ключа мы создаем новую запись в объекте-аккумуляторе (acc) с:
    • Ключом, преобразованным в нижний регистр с использованием key.toLowerCase().
    • Исходным значением из входного объекта (obj[key]).
  4. Мы начинаем с пустого объекта {}, как начального значения для аккумулятора.
  5. В конце мы возвращаем аккумулятор, который представляет собой наш новый объект с ключами в нижнем регистре.

Теперь протестируем нашу функцию с объектом user, который мы создали ранее:

const lowercaseUser = lowerizeKeys(user);
lowercaseUser;

Вы должны увидеть следующий вывод:

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

Отлично! Теперь все ключи в нижнем регистре.

Попробуем еще один пример, чтобы убедиться, что наша функция работает правильно:

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

lowerizeKeys(product);

Вывод должен быть таким:

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

Наша функция работает правильно для разных объектов с различными стилями написания ключей.

Обработка крайних случаев

Наша функция работает хорошо для простых объектов, но что насчет более сложных случаев? Давайте рассмотрим некоторые крайние случаи и посмотрим, как наша функция их обрабатывает.

Пустые объекты

Сначала протестируем с пустым объектом:

lowerizeKeys({});

Вывод должен быть пустым объектом:

{}

Объекты с вложенными объектами

Что, если объект содержит вложенные объекты? Давайте попробуем:

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

lowerizeKeys(nestedObject);

Вывод будет таким:

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

Обратите внимание, что только ключ верхнего уровня User преобразован в нижний регистр. Ключи внутри вложенных объектов остались без изменений.

Для обработки вложенных объектов нам нужно модифицировать нашу функцию, чтобы она рекурсивно обрабатывала все объекты. Давайте создадим улучшенную версию:

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;
  }, {});
};

Эта улучшенная функция:

  1. Проверяет, является ли каждое значение также объектом (и не массивом или null).
  2. Если это так, она рекурсивно вызывает саму себя для этого вложенного объекта.
  3. В противном случае она использует исходное значение.

Давайте протестируем ее с нашим вложенным объектом:

const deepLowerizedObject = deepLowerizeKeys(nestedObject);
deepLowerizedObject;

Теперь вы должны увидеть, что все ключи преобразованы в нижний регистр, даже в вложенных объектах:

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

Отличная работа! Вы создали продвинутую функцию, которая может обрабатывать вложенные объекты.

Создание переиспользуемого модуля

Теперь, когда у нас есть работающие функции, давайте создадим переиспользуемый JavaScript-модуль в виде файла, который мы сможем импортировать в другие проекты.

Сначала выйдите из интерактивной оболочки Node.js, нажав Ctrl+C дважды или введя .exit и нажав Enter.

Теперь создайте новый файл с именем object-utils.js в директории проекта:

  1. В WebIDE перейдите в панель проводника файлов слева.
  2. Щелкните правой кнопкой мыши в директории проекта и выберите "Новый файл".
  3. Назовите файл object-utils.js.
  4. Добавьте следующий код в файл:
/**
 * 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
};

Теперь создайте тестовый файл, чтобы убедиться, что наш модуль работает правильно. Создайте новый файл с именем test.js:

  1. В WebIDE перейдите в панель проводника файлов слева.
  2. Щелкните правой кнопкой мыши в директории проекта и выберите "Новый файл".
  3. Назовите файл test.js.
  4. Добавьте следующий код в файл:
// 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));

Теперь запустите тестовый файл:

node test.js

Вы должны увидеть вывод, похожий на следующий:

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' }
  }
}

Поздравляем! Вы успешно создали переиспользуемый JavaScript-модуль с функциями для преобразования ключей объекта в нижний регистр. Теперь этот модуль можно импортировать в любой из ваших JavaScript-проектов.

Резюме

В этом практическом занятии (лабораторной работе) вы узнали, как преобразовать ключи объекта в нижний регистр на JavaScript. Вы:

  1. Исследовали JavaScript-объекты и способы доступа к их ключам.
  2. Использовали метод Object.keys() для получения всех ключей из объекта.
  3. Применили метод reduce() для преобразования объекта.
  4. Создали функцию для преобразования всех ключей объекта в нижний регистр.
  5. Улучшили функцию для рекурсивной обработки вложенных объектов.
  6. Создали переиспользуемый JavaScript-модуль с обеими функциями.

Эти техники полезны при работе с данными из различных источников, где регистр ключей объектов может быть несовместим. Функции, которые вы создали, могут помочь нормализовать данные и упростить работу с ними.

Вы можете дальнейшим образом расширить эти утилиты, добавив больше функций, например:

  • Преобразование ключей объекта в верхний регистр.
  • Преобразование ключей в camelCase или snake_case.
  • Фильтрация объектов на основе критериев ключей или значений.
  • Глубокое сравнение объектов на равенство.

Продолжайте практиковаться в работе с объектами и их манипуляцией, чтобы стать более компетентным в программировании на JavaScript.