Вложенные циклы — 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
3. .flat() и .flatMap(): новые методы для работы с массивами в ECMAScript

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

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