JavaScript: оптимальный способ обмена элементов массива

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

Примените мощь деструктуризации ES6 для моментальной перестановки элементов в массиве JavaScript:

let array = ['a', 'b', 'c'];
// 'b' и 'c' меняются местами просто и непринуждённо!
[array[1], array[2]] = [array[2], array[1]];

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

Временная переменная: метод старой школы

Перестановка элементов в массиве с помощью временной переменной — это классический и немного устаревший метод. Однако он тестируется временем и обладает отличной работоспособностью!

var temp = array[1]; // Сохраняем 'b'
array[1] = array[2]; // 'c' занимает место 'b'
array[2] = temp; // 'b' возвращается на место 'c'

Несмотря на то что этот метод кажется менее изящным по сравнению с ES6, его совместимость во всех окружениях JavaScript остаётся высокой!

Добавьте изящество в код с помощью метода .splice()

А вы знали, что инструмент splice также может заменять элементы? Это придаст вашему коду особый шик:

// Здесь был 'b', его больше нет! Но вот о чудо, он снова с нами и занял место 'c'!
array.splice(1, 1, array.splice(2, 1, 'd')[0]);

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

Представьте массив как танцпол (💃🕺), где каждый танцор стоит рядом со своим партнером:

Перед перестановкой: [💃, 🕺, 🎩, 👑]

Давайте поменяем местами господина в шляпе 🎩 и даму в короне 👑:

let dancePartners = ['💃', '🕺', '🎩', '👑'];
[dancePartners[2], dancePartners[3]] = [dancePartners[3], dancePartners[2]];

Танцоры успешно сменили партнёров:

После перестановки: [💃, 🕺, 👑, 🎩]

Так же легко, как танцоры меняются партнерами, мы переставляем элементы в массиве.

Повышенные методы перестановки для опытных разработчиков

Подход DRY с функцией swap

Согласно принципу DRY (Don’t Repeat Yourself — не дублируй код), следует избегать повторяемости в коде. Создайте функцию для безупречной и эффектной замены:

Array.prototype.swap = function (index1, index2) {
  // Элегантный обмен элементов.
  [this[index1], this[index2]] = [this[index2], this[index1]];
};

Теперь перестановка элементов в массиве осуществляется вызовом array.swap(index1, index2). Этот метод дает всем массивам возможность обмениваться элементами без лишних усилий!

Подробнее об этом расскажет наш спикер на видео

Значимость производительности

Если у вас есть дело с большими массивами, следует учесть, что великолепная на первый взгляд деструктуризация ES6 может оказаться медленнее временной переменной из-за необходимости создавать подмассивы. Помните: иногда размер и правда имеет значение!

Совместимость и советы по отладке

Откат совместимости

В средах, в которых ES6 ещё не поддерживается, деструктуризация не будет работать. В таких случаях на помощь придут временная переменная или метод splice.

Элегантная отладка

Неправильная перестановка элементов может приводить к ошибкам. Убедитесь в правильности индексов при обмене и помните, что индексация массивов в JavaScript начинается с нуля, что на единицу меньше, чем вы сами можете подсчитывать.

Всегда вперед

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

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

1. Array.prototype.splice() – JavaScript | MDN — официальная документация метода splice().
2. Swap array elements in JavaScript – Stack Overflow — тематические обсуждения и решения в сообществе Stack Overflow.
3. GitHub – airbnb/javascript: JavaScript Style Guide — руководство по стильному коду от Airbnb с лучшими практиками JavaScript.
4. JavaScript Array Sort — обучающий материал по сортировке массивов с примерами использования метода sort().
5. Learn JavaScript | Codecademy — интерактивные уроки JavaScript.
6. Data Structures: Objects and Arrays :: Eloquent JavaScript — глубокое исследование массивов и объектов в JavaScript.