Рекурсивное вложение связанных объектов JavaScript

Введение

В этом лабе мы исследуем функцию JavaScript под названием nest, которая рекурсивно вкладывает объекты, связанные друг с другом, в плоский массив. Функция использует рекурсию, Array.prototype.filter() и Array.prototype.map() для фильтрации и вложения элементов на основе их свойств id и parent_id. В конце этого лабы вы будете лучше понимать, как использовать рекурсию для создания вложенных объектов в JavaScript.

Как вкладывать объекты с использованием рекурсии в JavaScript

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

1. Откройте Терминал/SSH и введите node, чтобы начать практиковаться в написании кода.
2. Используйте рекурсию для вложения объектов, связанных друг с другом.
3. Используйте Array.prototype.filter(), чтобы отфильтровать элементы, у которых id совпадает с link.
4. Используйте Array.prototype.map(), чтобы сопоставить каждый элемент с новым объектом, который имеет свойство children, которое рекурсивно вкладывает элементы в зависимости от того, какие из них являются дочерними для текущего элемента.
5. Игнорируйте второй аргумент, id, чтобы по умолчанию установить его в null, что означает, что объект не связан с другим (то есть это верхний уровень объекта).
6. Игнорируйте третий аргумент, link, чтобы использовать 'parent_id' в качестве свойства по умолчанию, которое связывает объект с другим по его id.

Вот код:

const nest = (items, id = null, link = "parent_id") =>
  items
    .filter((item) => item[link] === id)
    .map((item) => ({ ...item, children: nest(items, item.id, link) }));

Для использования функции nest() создайте массив объектов, которые имеют свойство id и свойство parent_id, которое связывает их с другим объектом. Затем вызовите функцию nest() и передайте массив в качестве аргумента. Функция вернет новый массив объектов, которые вложены в зависимости от их свойства parent_id.

Например:

const comments = [
  { id: 1, parent_id: null },
  { id: 2, parent_id: 1 },
  { id: 3, parent_id: 1 },
  { id: 4, parent_id: 2 },
  { id: 5, parent_id: 4 }
];
const nestedComments = nest(comments);
// [{ id: 1, parent_id: null, children: [...] }]

Резюме

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