Перемещение элемента массива в JavaScript: быстрая переиндексация

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

Чтобы переместить элемент в массиве, применяется метод splice(), выполняющий операции с элементами:

let arrayData = ['a', 'b', 'c', 'd'];
arrayData.splice(1, 0, arrayData.splice(2, 1)[0]); // Переставляем 'c' на позицию с индексом 1

Таким образом, массив arrayData теперь представлен в виде: ['a', 'c', 'b', 'd']. Эту цель мы достигли с помощью одной строки кода, обеспечив перемещение элемента непосредственно в самом массиве.

Замена позиций и заполнение пробелов

Если вам требуется работать с отрицательными индексами или переместить элемент за пределы текущего размера массива, вам пригодится следующая функция:

function array_move(arrayData, old_index, new_index) {
  if (new_index >= arrayData.length) {
    let k = new_index – arrayData.length + 1;
    while (k--) {
      arrayData.push(undefined);
    }
  }
  arrayData.splice(new_index, 0, arrayData.splice(old_index, 1)[0]);
  return arrayData; // Возвращаем упорядоченный массив
}

Размышления о производительности и оптимизации

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

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

Подключаем помощь npm

Если в проекте позволяет использование сторонней библиотеки, пакет array-move из npm может упростить вашу задачу:

npm install array-move

Использование этого пакета предельно просто:

const arrayMove = require('array-move');
let arrayData = ['a', 'b', 'c', 'd'];
arrayData = arrayMove(arrayData, 2, 1);

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

Представим перемещение элемента как перестроение в очереди в кафе:

Очередь массива: [☕, ☕, 🍩, ☕, ☕]
# 🍩 желает переместиться с 2-й позиции на 4-ю

array.splice(4, 0, array.splice(2, 1)[0]);

Вот как выглядит очередь после перемещения: [☕, ☕, ☕, 🍩, ☕]

Таким образом, "голодный пончик" 🍩 пробился вперед, тогда как остальные ☕ терпеливо ожидали своей очереди.

Будьте внимательны с проверкой границ

При использовании splice для операций с элементами всегда проверяйте границы массива. Из-за ошибок с границами могут возникать сбои в выполнении кода, а также они способны привести к запутыванию данных.

Осуществляйте проверки безопасности:

if (newIndex < 0 || newIndex >= array.length) {
   // Если newIndex выходит за пределы массива, вновь обдумайте его значение!
}

Сохранение оригинального массива

Когда требуется сохранить исходный массив без изменений, можно воспользоваться функцией move(), создающей новый массив:

function move(array, from, to) {
   let newArray = array.slice(); // Клонируем, чтобы оставить исходный массив нетронутым
   newArray.splice(to, 0, newArray.splice(from, 1)[0]); // Выполняем операцию с клонированным массивом
   return newArray; // Возвращаем изменившуюся копию
}
let initialArray = ['a', 'b', 'c', 'd'];
let newArray = move(initialArray, 2, 1);

При этом вы увидите: "Волшебство! initialArray остался прежним", именно так и должно быть.

Переиндексация после операции «Перемещение элементов»

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

for (let i = 0; i < array.length; i++) {
  array[i].index = i;
}

Старайтесь сохранять баланс индексов как главное правило.

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

1. Array.prototype.splice() – JavaScript | MDN — Ваш подробный гид по splice() для манипуляций с массивами в JavaScript.
2. javascript – Перемещение элемента массива с одной позиции на другую – Stack Overflow — Место, где лучшие умы приходят за знаниями о том, как упорядочить элементы массива в JavaScript.
3. Учебник | DigitalOcean — Превосходное руководство, ясно объясняющее разницу между splice() и slice().
4. Методы массивов — Всё о методах массивов от JavaScript.info, включая руководство по перемещению элементов.
5. [ – YouTube] (https://www.youtube.com/watch?v=T8e1_2x8Ph8) — Информативное видео, просмотр которого станет гораздо приятнее с попкорном!
6. GitHub Gist – Перемещение элемента массива с одной позиции на другую — Скопируйте и используйте примеры кода для перемещения элементов массива, если у вас недостаточно времени на их написание.