Покорение вложенных массивов в JavaScript: от хаоса до чистых списков

Что такое вложенные массивы?

Вложенные массивы представляют собой структуры данных, где элементы массива сами являются другими массивами. Например:

const original = [1, [2, 3], [4, [5, 6], 7], 8];

Представьте это как папку с файлами и подпапками.

Почему важно разравнивать массивы?

Разравнивание позволяет упростить обработку данных за счет следующих преимуществ:

• Итерации: Однократный проход цикла без проверок типа if (Array.isArray(item)).
• Обработка: Легче сортировать, фильтровать или отображать данные линейно.
• Отображение интерфейсов: Удобнее выводить списки товаров или файловое дерево.
• Производительность: Уменьшение глубины рекурсии при обработке алгоритмов. Например, если у вас есть массив [1, [2,3], 4], его можно легко преобразовать в плоский список перед применением операций вроде умножения каждого элемента на два.

Как происходит разравнивание шаг за шагом?

Процесс разравнивания заключается в извлечении всех элементов во внешний уровень массива. Основные моменты:

• Копирование: поверхностное или глубокое копирование элементов.
• Контроль глубины: ограничение максимальной глубины обработки.
• Сохранение порядка: обработка слева направо. Пример пошагового разравнивания:

// Исходный массив
let arr = [1, [2,3], [4, [5,6], 7], 8];

// Шаги разравнивания
arr = [1, 2, 3, 4, [5,6], 7, 8];
arr = [1, 2, 3, 4, 5, 6, 7, 8];

Способы разравнивания массивов

Метод .flat()

Начиная с ES2019, появился встроенный метод flat(). Он принимает аргумент depth, указывающий глубину разравнивания.

console.log([1, [2, [3]]].flat());       // [1, 2, [3]]
console.log([1, [2, [3]]].flat(Infinity)); // [1, 2, 3]

Преимущества метода:

• Простота использования.
• Поддержка любой глубины (Infinity). Недостатки:
• Не поддерживается старыми браузерами.