Как поменять элементы массива местами в JS (JavaScript)

В этом руководстве мы рассмотрим, как поменять элементы массива местами в JS (JavaScript). А в качестве практической составляющей мы разберём несколько вариантов, как решить эту задачу.

Деструктуризация массива

В JavaScript это позволяет извлекать данные из массивов или итерируемого объекта в отдельные переменные. В контексте замены элементов в массиве можно использовать деструктурирование массива. Это позволит присвоить значения двух элементов, подлежащих замене, отдельным переменным. Затем следует присвоить им новые позиции в массиве.

В приведённом ниже примере мы поменяем местами позицию первого элемента (с индексом 0) и четвёртого элемента (с индексом 3).

const array = ['A', 'B', 'C', 'D', 'E'];
[array[0], array[3]] = [array[3], array[0]];
console.log(array); // Результат: [ 'D', 'B', 'C', 'A', 'E' ]

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

Использование метода splice()

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

Пример ниже демонстрирует, как можно использовать этот способ для удаления и замены элементов.

Мы указали позицию как 0 (первый элемент), а количество элементов, которые нужно удалить, начиная с этой позиции, как 1 (чтобы просто удалить первый элемент). Следующие несколько аргументов содержат значения, которые необходимо заменить удалёнными значениями.

Мы удаляем только 1 значение, мы заменяем его другим значением (5). Теперь, если вывести результат операции сращивания, то мы получим удалённый элемент в новом массиве.

Если мы выведим массив с другой стороны, то получим [5,15,20,25,30], как и требуется.

let arr = [10,15,20,25,30];
console.log(arr.splice(0, 1, 5)); // [10]

Для начала потребуется объединить массив и убедиться, что удаляется только значение arr[index1], начав с index1, а количество удаляемых элементов составляет 1. Теперь можно заменить это значение тем, что находится внутри arr[index2]. В результате, массив изменится таким образом, что и arr[index1], и arr[index2] будут содержать одно и то же значение, которое изначально было в arr[index2].

После этого мы добавим в код [0]. Операции сращивания не просто изменяют массив, а также возвращают значения, которые были удалены в новом массиве. Поскольку мы удалили только одно значение, мы можем просто получить доступ к первому элементу. Таким образом можно получить его значение, которое изначально было в arr[index1].

Теперь надо присвоить это значение arr[index2], и смена местами двух элементов будет успешной.

arr[index2] = arr.splice(index1, 1, arr[index2])[0];

Как поменять элементы массива в JS местами методом slice()

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

Оператор spread с методом slice()

Ниже представлен пример, как оператор spread применять совместно с slice.

let arr = [10,15,20,25,30];
 
arr = [arr[arr.length-1], ...arr.slice(1,arr.length-1), arr[0]];
console.log(arr); // [30, 15, 20, 25, 10]

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

В этом примере мы меняем местами значения первого и последнего элементов, которые содержат индексы 0 и arr.length-1 соответственно. Таким образом, во вновь сформированном массиве первый элемент теперь будет иметь arr[arr.length-1] в качестве своего значения (значение последнего элемента). А последний элемент будет иметь arr[0] в качестве значения (значение первого элемента). В промежутке нам понадобятся остальные элементы. Метод slice  —лучший способ получения этих значений. Он может быть использован для того, чтобы вырезать часть массива и извлечь её для использования в наших целях. В данном случае это для заполнение пробела между первым и последним значениями.

Первый аргумент этого метода отражает первую позицию фрагмента после его обработки методом slice. Последний аргумент относится к позиции после последней позиции фрагмента.

Итак, если мы вырезаем элементы от 1 до arr.length-1, мы выполняем «срез» от 2-го элемента в массиве до предпоследнего элемента (arr.length-1 относится к позиции последнего элемента, которая не включена в «срез»). Но мы не можем просто напрямую поместить «вырезанный» массив внутри нового массива. Это просто создаст ссылку на массив, когда на самом деле нам нужен доступ к его отдельным элементам. В этом случае пригодится оператор spread. После «среза» можно использовать его, чтобы получить отдельные элементы и поместить их в новый массив.

Как поменять элементы массива местами в JS методами concat() и slice()

Можно использовать метод concat совместно с slice. Для этого сначала вводится первый элемент arr[arr.length-1], а затем concat. После этого внутри круглых скобок можно добавить столько элементов, сколько требуется.

arr = [arr[arr.length-1]].concat(...arr.slice(1,arr.length-1), arr[0]);

Временные переменные

Этот способ работает следующим образом:

1. Сохраняется значение первого элемента во временной переменной.
2. Присваивается значение второго элемента первому элементу.
3. Присваивается значение временной переменной (которая содержит исходное значение первого элемента) второму элементу.

Таким образом, мы фактически реализовали задачу, чтобы в заданном массиве поменять местами элементы.

const swapElements = (arr,index1,index2) => {
    let temp = arr[index1];
    arr[index1] = arr[index2];
    arr[index2] = temp;
    return arr;
}
 
let arr = [10,15,20,25,30];
  
console.log(swapElements(arr,0,4)); // [30, 15, 20, 25, 10]

Как поменять элементы массива в JS местами методом сложения и вычитания

Если массив состоит только из чисел, то можно использовать сложение и вычитание. Это позволит получить изменённый результат.

const swapElements = (arr,index1,index2) => {
    arr[index1] = arr[index1] + arr[index2]; // arr[0] = 40
    arr[index2] = arr[index1] - arr[index2]; // arr[4] = 40-30 = 10
    arr[index1] = arr[index1] - arr[index2]; // arr[0] = 40 - 10 = 30
    return arr;
}

Этот код демонстрирует, что:

• мы добавили оба значения и присвоили их первому элементу. (10 + 30 = 40)
• затем второму элементу присваивается значение вычитания элементов, что даёт нам исходное значение первого элемента (40 – 30 = 10, которое было исходным значением 1-го элемента)
• далее первому элементу присваивается ещё одно вычитаемое значение между обоими элементами, что возвращает исходное значение второго элемента (40 – 10 = 30).

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

Читайте также: Как объединить объекты в JavaScript.

Изменение значений в порядке убывания

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

Метод reverse()

Это позволяет сортировать значения в массиве в порядке убывания, как показано ниже.

arr.reverse();
console.log(arr); //  [30, 25, 20, 15, 10]

Как поменять элементы массива в JS местами методом sort()

Может использоваться для сортировки значений массива несколькими способами. Однако в этом примере мы используем сортировку в порядке убывания. Чтобы сделать это, каждые два значения в массиве (текущее значение и следующее для каждой итерации) мы теперь вычтем и применим к текущему элементу, как показано ниже.

arr = arr.sort((a, b) => b - a); // ( a - b) will do ascending order reverse
 
console.log(arr); //  [30, 25, 20, 15, 10]

Эти несколько способов позволят выбрать наиболее подходящий для конкретной задачи. Достаточно просто разобраться, как поменять элементы массива местами в JS (JavaScript).

Кроссбраузерность

Методы splice(), slice(), concat(), sort() и reverse() имеют полную поддержку браузерами.  Только оператор spread() не воспринимается Internet Explorer.