Что такое и зачем нужны алгоритмы

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

Что такое алгоритмы?

Алгоритм — это набор инструкций для решения какой-то задачи. Всё, что мы делаем: готовим утром кофе, идём на работу, пишем код — это исполнение определённых алгоритмов.

У каждого алгоритма есть исполнитель. Например, код, который мы пишем — это набор инструкций, а исполняет его компьютер. Быть исполнителем можете и вы сами, когда занимаетесь любыми повседневными задачами. Например, когда собираетесь на работу:

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

Востребованы ли алгоритмы на рынке фронтенд-разработки?

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

Кроме того, алгоритмы — частые гости на технических собеседованиях на мидловские и сеньорские позиции. Особенно любят добавлять в интервью алгоритмические секции крупные компании вроде Яндекса или Google.

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

• Лишь 2% вакансий с опытом до года требуют знания алгоритмов и структур данных.
• В вакансиях для разработчиков с опытом до шести лет этот навык упоминается в 10% случаев.
• Почти каждая третья вакансия для фронтендеров с опытом более 6 лет содержит этот навык в требованиях к соискателю.

Какие задачи решают с помощью алгоритмов?

Алгоритмы помогают решать большинство задач разработчика более оптимальным по времени и производительности способом. Они позволяют более эффективно взаимодействовать с данными: искать, фильтровать и хранить в верном формате. Их можно использовать для разных задач, например, для:

• парсинга данных,
• фильтрации дубликатов,
• отрисовки динамических списков,
• хранения и вывода оповещений для пользователя,
• и многих других задач.

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

Разберём подробнее некоторые типовые задачи, в которых используют алгоритмы.

Сортировка данных

Сортировка — базовая задача разработчика. Упорядочивать приходится совершенно любые данные, например, пользователей по именам, документы по годам или игроков по рейтингу.

Зная алгоритмы, можно выбрать наиболее оптимальный по времени и производительности метод сортировки. Например, если нам нужно вывести десять пользователей с наиболее высоким рейтингом, нет смысла упорядочивать всю многомиллионную базу: это загрузит сервер и займёт немало времени. Достаточно выбрать подходящий метод и, не прибегая к полной сортировке, получить нужные данные.

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

При использовании этого метода мы сначала получаем новый элемент, который нужно вставить в массив. Затем проходим по массиву слева направо, пока не встретим элемент, который больше вставляемого. Как только это произойдёт — добавляем новый элемент на нужную позицию.

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

А затем обновляем связи в списке:

Quicksort — одна из самых быстрых сортировок для использования на больших объёмах данных.

Как она работает: сначала мы выбираем в массиве любой «опорный» элемент. Затем сравниваем каждый из элементов с опорным. По результатам сравнений переставляем элементы в массиве так, чтобы слева от опорного были все элементы меньше него, а справа — больше или равны. После этого запускаем этот же алгоритм рекурсивно на левую и правую части массива, пока не придём к массиву из одного элемента.

Посмотрим на сортировку массива из девяти элементов. Сначала выбираем опорный элемент — 5. Затем перемещаем элементы меньше слева от него, а элементы больше — справа.

Теперь берём часть слева и выбираем новый опорный элемент — 3. Затем вновь перемещаем элементы меньше слева от него, а элементы больше — справа. Делаем так, пока полностью не отсортируем левую часть:

Когда закончим, повторим всё то же самое с правой частью:

Пример сортировки:

function quickSort(array, left, right) {
  left = left ?? 0;
  right = right ?? array.length - 1;

  const pivotIndex = partition(array, left, right);
  logIteration(array, array[pivotIndex], left, right);

  if (left < pivotIndex - 1) {
    quickSort(array, left, pivotIndex - 1);
  }

  if (pivotIndex < right) {
    quickSort(array, pivotIndex, right);
  }

  return array;
}

function random(min, max) {
    const interval = max - min;
    const shift = min;

    return Math.round(Math.random() * interval + shift);
}

function partition(array, left, right) {
  const pivot = array[random(left, right)];

  while (left < right) {
    while (array[left] < pivot) {
        left++;
    }

    while (array[right] > pivot) {
      right--;
    }

    if (left <= right) {
        [array[left], array[right]] = [array[right], array[left]];
        left++;
        right--;
    }
  }

  return left;
}

Есть множество других видов сортировок. Какой из них использовать — зависит от конкретной задачи.

Поиск в массиве

Найти что-то в массиве — довольно распространённая задача. Это может быть поиск целого объекта по его признаку. Например, когда нам нужно найти объект банковской карточки по id. Или это может быть проверка на вхождение. К примеру, мы можем узнать, разрешено ли показывать определённый контент пользователю. Для этого достаточно проверить его права в массиве прав, разрешающих просмотр.

Линейный поиск — самый распространённый, хотя и медленный, способ поиска в массивах и других коллекциях. Это довольно простой алгоритм, он перебирает все элементы до тех пор, пока не встретит нужный или не дойдёт до конца массива.

Как он работает: к примеру, мы хотим проверить, есть ли слово 'скрипт' в массиве ['веб', 'деплой', 'сервер']. Сначала мы посмотрим на 'веб' и сравним его с искомым словом. Они не равны, поэтому двигаемся дальше — к слову 'деплой'. С ним и 'сервер' ситуация такая же: сравнение их со 'скрипт'-ом вернёт false. А затем мы придём в конец массива. Это значит, искомого элемента в нём нет.

Проверка на вхождение слова с помощью include:

const words = ['веб', 'деплой', 'сервер'];
function checkIfInclude(word) {
  return words.includes(word);
}
checkIfInclude('скрипт'); // false

Если бы мы искали в массиве слово веб, то нашли бы его при сравнении с первым элементом массива и на этом закончили поиск:

Бинарный поиск — поиск, который можно вызывать только на отсортированных массивах данных. Он работает по методу indexOf: принимает элемент, который нужно найти в массиве, и возвращает либо его позицию, либо -1, либо null.

Бинарный поиск быстрее линейного за счёт того, что он не перебирает каждый элемент. Вместо этого он делит массив пополам и проверяет, в какой части, справа или слева, должен находиться искомый элемент. После этого он делит остаток ещё раз пополам — и так далее, пока не найдёт этот элемент:

Бинарный поиск удобен для работы с большими отсортированными массивами. Представьте, что вам нужно найти пользователя в базе данных из миллиона человек. Если перебирать каждый элемент последовательно, вы потратите немало времени. Гораздо быстрее и проще сузить поиск, отбросив сразу половину элементов.

Простой пример бинарного поиска:

function binarySearch(numbers, target) {
  let left = 0;
  let right = numbers.length - 1;

  while (left <= right) {
    const center = Math.floor((right + left) / 2);

    if (numbers[center] === target) {
      return center;
    }

    if (numbers[center] > target) {
      right = center - 1;
    } else {
      left = center + 1;
    }
  }

  return null;
}

Есть и другие виды поиска: алгоритм поиска пути и интерполяционный — оба работают с отсортированными массивами. Первый перескакивает вперёд на фиксированные шаги или пропускает при поиске некоторые элементы. Второй очень похож на бинарный поиск, но вместо деления области поиска на две части он оценивает новую область поиска по расстоянию между ключом и текущим значением элемента.

Оптимизация кода

В своей работе мы так или иначе работаем с DOM-деревом. Подбор правильных алгоритмов для работы с деревьями помогает ускорить работу страницы при обработке больших фрагментов дерева.

Переобходить DOM-дерево можно разными способами. Самый простой — поиск в ширину. Он хорошо подходит для поиска, если искомый элемент лежит «сверху» и дерево довольно широкое.

Особенность поиска в ширину в том, что мы сначала просматриваем все элементы на одном уровне вложенности, затем переходим на следующий — и так далее, пока не обойдём всё:

const root = document.body;
const resultElement = document.getElementById('result');

function traverse(node) {
  const result = [];
  const queue = [];

  queue.push(node);

  while(queue.length) {
    const currentNode = queue.shift();

    result.push(currentNode.localName);
    queue.push(...currentNode.children);
  }

  resultElement.innerHTML = result.join(' -> ');
}

traverse(root);

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

const root = document.body;
const resultElement = document.getElementById('result');

function traverse(node) {
  const result = [];

   function recursive(node) {
    result.push(node.localName);
    for (const child of node.children) {
      recursive(child);
    }
  }

  recursive(node);

  resultElement.innerHTML = result.join(' -> ');
}

traverse(root);

Отрисовка динамических списков и парсинг

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

Рекурсия также позволяет справиться с другой распространённой задачей — распарсить текст из HTML-документа без использования регулярных выражений. Например, если у нас есть такой текст:

<p>
Рекурсия заключается в том, что благодаря ей мы от <i>сложных задач</i> переходим к всё более и более <i>простым</i>, пока не найдём решение <b>каждой</b> конкретной маленькой частицы задачи.
</p>

С помощью рекурсии можно быстро перевести его в такой:

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

Всё, что для этого нужно сделать — переобойти DOM, рекурсивно вызывая парсинг.

Добавление данных в очередь

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

Такие задачи очень просто реализуется очередью — структурой данных, «мимикрирующей» под очередь из реальной жизни, когда элементы попадают в конец массива-очереди и достаются из её начала.

Мы перечислили лишь небольшую часть задач, которые можно решать с помощью алгоритмов. Но на самом деле их возможности гораздо шире.

Вывод

Алгоритмы — важный инструмент для повышения грейда фронтенд-разработчика. Умение применять их в работе не только помогает быстрее решать типовые задачи, но и открывает возможность трудоустройства на высокооплачиваемые позиции.

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

Один из самых простых способов начать изучение алгоритмов — книги. Начать можно с «Грокаем алгоритмы», в ней Адитья Бхаргава простыми словами пишет о популярных концептах алгоритмостроения, хотя и не всегда применимых к фронтенду. А тем, кто не боится сложного академического языка, советуем прочитать книгу Дональда Кнута «Искусство программирования» о важнейших и базовых алгоритмах, которые мы используем. Можно сказать, что это своего рода «Библия» алгоритмов.

Больше материалов

• Почему разработчики выбирают Vue
• Паттерны проектирования
• Что такое CMS и как под них верстать

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.