Преобразование плоских объектов JavaScript в вложенные

JavaScriptJavaScriptBeginner
Практиковаться сейчас

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

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы изучим, как преобразовать плоский объект в вложенный объект с использованием путей для ключей в JavaScript. Мы будем использовать вложенные методы Array.prototype.reduce() и String.prototype.split(), чтобы разбить каждый ключ по разделителю точки и добавить объекты по ключам. В конце этого практического занятия вы глубоко освоите методы эффективного преобразования плоского объекта в вложенный.

Как преобразовать плоский объект в вложенный в JavaScript

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

  1. Откройте Терминал/SSH и введите node, чтобы начать практиковаться в написании кода.

  2. Используйте вложенный метод Array.prototype.reduce(), чтобы преобразовать плоский путь в лист (листовой узел).

  3. Используйте String.prototype.split(), чтобы разбить каждый ключ по разделителю точки, и Array.prototype.reduce(), чтобы добавить объекты по ключам.

  4. Если текущий аккумулятор уже содержит значение по определенному ключу, верните его значение в качестве следующего аккумулятора.

  5. В противном случае добавьте соответствующую пару ключ-значение в объект аккумулятора и верните значение в качестве аккумулятора.

Вот код для функции unflattenObject:

const unflattenObject = (obj) =>
  Object.keys(obj).reduce((res, k) => {
    k.split(".").reduce(
      (acc, e, i, keys) =>
        acc[e] ||
        (acc[e] = isNaN(Number(keys[i + 1]))
          ? keys.length - 1 === i
            ? obj[k]
            : {}
          : []),
      res
    );
    return res;
  }, {});

Вы можете использовать функцию unflattenObject, чтобы преобразовать плоский объект в вложенный в JavaScript:

unflattenObject({ "a.b.c": 1, d: 1 }); // { a: { b: { c: 1 } }, d: 1 }
unflattenObject({ "a.b": 1, "a.c": 2, d: 3 }); // { a: { b: 1, c: 2 }, d: 3 }
unflattenObject({ "a.b.0": 8, d: 3 }); // { a: { b: [ 8 ] }, d: 3 }

Резюме

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