Если вы новичок в разработке JavaScript, возможно, вы не знакомы с методами Array.prototype.flat() и Array.prototype.flatMap().

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

Познакомившись с Array.prototype.flat() и Array.prototype.flatMap(), вы получите в свое распоряжение ценные инструменты для эффективного решения сложных задач.

Приготовьтесь разгадать скрытые глубины методов flat() и flatMap()!

плоский():

Из документов MDN:

Метод flat() создает новый массив со всеми элементами подмассива, объединенными в него рекурсивно до указанной глубины.

Проще говоря, метод flat() — это мощный инструмент, который берет вложенный массив и волшебным образом объединяет все его элементы в один простой массив.

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

У вас есть возможность указать, насколько глубоко метод должен углубляться во вложенность, что делает его невероятно универсальным.

Синтаксис:

Array.flat(depth)

depth (optional): Уровень глубины указывает, насколько глубоко должна быть сведена структура вложенного массива. По умолчанию 1.

returns: Новый массив с объединенными в него элементами подмассива.

См. пример кода ниже:

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// Expected output: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));

// Expected output: Array [0, 1, 2, Array [3, 4]]

Подробнее о flat() читайте здесь…

плоская карта():

Из официальных документов MDN:

Метод flatMap() возвращает новый массив, сформированный путем применения заданной функции обратного вызова к каждому элементу массива, а затем выравнивания результата на один уровень. Он идентичен map(), за которым следует flat() глубины 1 (arr.map(...args).flat()), но немного более эффективен, чем вызов этих двух методов по отдельности.

Давайте разберем flatMap() метод на более простые термины.

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

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

Синтаксис:

Array.flatMap(callbackFn, thisArg)

callbackFn : Функция, выполняемая для каждого элемента в массиве. Он должен возвращать массив, содержащий новые элементы нового массива, или одно значение, не являющееся массивом, которое будет добавлено к новому массиву.

Функция callbackFn вызывается со следующими аргументами:
element : текущий обрабатываемый элемент массива.

index : индекс текущего обрабатываемого элемента в массиве.

array : массив flatMap() был вызван.

thisArg (optional) : значение, используемое как this при выполнении callbackFn. См. итерационные методы.

Return value : новый массив, каждый элемент которого является результатом функции обратного вызова и сглажен до глубины 1.

Вот пример, иллюстрирующий использование flatMap() с вложенным массивом:

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

const flattenedAndTransformed = nestedArray.flatMap((num) => [num * 2]);

console.log(flattenedAndTransformed);
 
// Output: [2, 4, 6, 8, 10, 12, 14]

Подробнее о flatMap() здесь

Прочтите эту 44-страничную книгу, чтобы полностью понять основы разработки API. Вы никогда не пожалеете, прочитав эту Книгу

Изучив замечательные возможности методов flat() и flatMap(), вы открыли новый уровень мастерства в манипулировании массивами JavaScript.

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

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

Теперь, вооружившись этими новыми знаниями, идите вперед и раскройте свое мастерство программирования! Удачного кодирования!🎉