Оптимальное добавление элемента в начало массива: подходы

Быстрый ответ

Для быстрого добавления элемента используйте метод unshift:

let array = [2, 3, 4];
array.unshift(1); // Теперь array = [1, 2, 3, 4], обратите внимание!

Если ценно сохранять исходный массив без изменений, примените оператор расширения ...:

let array = [2, 3, 4];
array = [1, ...array]; // Получаем новый массив: [1, 2, 3, 4]. Исходный массив остаётся без изменений.

Расширенное добавление в начало

Методы unshift и оператор ... эффективны, но сталкиваются с проблемами при работе с большими данными или внутри циклов.

• Метод Array#unshift хорош при малых объёмах данных, но работает медленнее на больших массивах.

• Оператор ... подходит до тех пор, пока не встречает данные большего объема или не использовается в цикле.

У вас есть альтернативы:

• Связные списки: Они эффективно справляются с добавлением элементов в начало.

• Пакетное добавление: Если нужно вставить сразу несколько элементов, воспользуйтесь unshift.apply:

  JS

  Скопировать код

  let extraHead = [0, 1];
  Array.prototype.unshift.apply(array, extraHead);
  // Массив обновлён: extraHead добавлены в начало array.

  Запустить код

• Иммутабельность: Чтобы не изменять исходный массив, можно сделать так:

  JS

  Скопировать код

  const prepend = (value, array) => [value].concat(array);
  const newArray = prepend(1, originalArray); // newArray: [1, ...originalArray]. Элегантно и безопасно.

  Запустить код

  Добавление в начало и оптимизация памяти

  Когда элементы добавляются в начало массива, для остальных элементов требуется перераспределение памяти, требующее как минимум O(N) операций по памяти.

Бенчмаркинг до предела

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

Визуализация

Представьте, что вы назначаете нового лидера команды эстафеты:

До:      |🏃‍♂️2|🏃‍♂️3|🏃‍♂️4|  // Команда сформирована, нужно определить лидера
Новый лидер: 🏃‍♂️1

Метод unshift() к вашим услугам:

team.unshift('🏃‍♂️1'); // И вот новый лидер во главе команды.

После:   |🏃‍♂️1|🏃‍♂️2|🏃‍♂️3|🏃‍♂️4| // Теперь у нашей команды есть лидер!

Этот пример аналогичен добавлению элемента в начало массива с максимальной эффективностью.

За рамками массивов: поиск новых подходов

Когда со стандартными массивами не справиться, пора применить творческую мысль:

• Конкатенация: Метод "создай и уничтожь" хорошо работает с неизменяемыми структурами данных, но может быть медленным для обработки больших массивов.

• Очереди: Если вам часто приходится добавлять элементы в начало, рассмотрите использование очередей, которые эффективно работают с обоих концов.

• Фрагментация данных: Разделите ваши данные на меньшие массивы для улучшения управления и ясности кода.

• Структурирование памяти: Понимание особенностей работы JavaScript движка может дать вам преимущество. Некоторые движки оптимизированы для работы с определенными типами массивов.

Полезные материалы

1. Array.prototype.unshift() – JavaScript | MDN — подробное описание метода .unshift() на MDN.
2. Performance of Array.push vs Array.unshift – Stack Overflow — обсуждение производительности методов .push() и .unshift() на Stack Overflow.
3. Elements kinds in V8 · V8 — статья о том, как движок V8 обрабатывает разные типы массивов для улучшения производительности.
4. ECMAScript® 2019 Language Specification — полный стандарт ECMAScript, в котором описаны все детали работы с массивами.
5. Faster apps with JSON.parse (Chrome Dev Summit 2019) – YouTube — видеолекция о производительности JavaScript, включая операции с массивами.