JS: Массивы

Вложенные циклы

Во многих языках программирования есть очень полезная функция flatten. В определённых задачах она сильно упрощает жизнь и сокращает количество кода. Эта функция принимает на вход массив и выпрямляет его: если элементами массива являются массивы, то flatten сводит всё к одному массиву, раскрывая каждый вложенный. В js эта функция реализована как метод flat() у массивов:

[[3, 2], 5, 3, [3, 4, 2], 10].flat();
// [3, 2, 5, 3, 3, 4, 2, 10]

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

Логика работы функции выглядит так:

const flatten = (coll) => {
  const result = [];
  for (const item of coll) {
    // Array.isArray — функция-предикат стандартной библиотеки,
    // которая проверяет, является ли значение массивом.
    if (Array.isArray(item)) {
      // Если значение массив, то проходим по всем его элементам
      // Здесь появился вложенный цикл
      for (const subItem of item) {
        // и добавляем их в результирующий массив
        result.push(subItem);
      }
    } else {
      // Если значение не массив, то сразу добавляем его в результирующий массив
      result.push(item);
    }
  }

  return result;
};

console.log(flatten([3, 2, [], [3, 4, 2], 3, [123, 3]]));
// => [ 3, 2, 3, 4, 2, 3, 123, 3 ]

https://repl.it/@hexlet/js-arrays-nested-loops-flatten

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

Вложенные циклы коварны. Их наличие может резко увеличить сложность кода, так как появляется множество постоянно изменяющихся переменных. Становится тяжело уследить за происходящими внутри процессами. Кроме того, вложенные циклы могут указывать на использование неэффективного алгоритма решения задачи. Это не всегда так, но вероятность такая есть.

Как избавиться от вложенных циклов? Есть три варианта. Первый – ничего не делать, иногда вложенные циклы это нормально, особенно в низкоуровневых алгоритмах. Второй – переписать алгоритм так, чтобы вложенного цикла не осталось вообще, даже в вызываемых функциях. Когда это невозможно – использовать третий вариант. Вынести вложенный цикл в функцию, либо заменить на встроенную функцию (или метод). Например в JavaScript у массивов есть метод includes(), который внутри себя представляет не что иное, как обход массива в цикле.

// Эта функция заменяет собой цикл
// Но не забывайте что внутри все равно остается полный обход массива
[1, 10, 3].includes(10); // true

Пример выноса в отдельную функцию кода на flatten:

// Изменяет первый массив напрямую
// В данном случае такая реализация оправдана
const append = (arr1, arr2) => {
  for (const item of arr2) {
    arr1.push(item);
  }
};

const flatten = (coll) => {
  const result = [];
  for (const item of coll) {
    if (Array.isArray(item)) {
      // Нет присваивания так как меняется сам result
      append(result, item);
    } else {
      result.push(item);
    }
  }

  return result;
};

flatten([3, 2, [], [3, 4, 2], 3, [123, 3]]);
// [3, 2, 3, 4, 2, 3, 123, 3]

Дополнительные материалы

  1. Метод Array.isArray, проверяющий, является ли значение массивом
  2. Встроенный метод flat

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».