スマートに配列の前後の要素を入れ替える JavaScirptコード

JavaScriptで配列の「前後の要素を入れ替える」方法を紹介する。

つまり、下のイメージのようなことがしたい。

イマイチなゴード

まず思いつくのは配列の中から入換え元の要素を削除し、入替え先要素の前後に挿入する方法である。

例えば、２番目と３番目の要素を入れ替える場合は、次のように書く。

const item1 = array[1];     //入替元（２番目）の要素を取得
array.splice(1, 1);         //２番目の要素を削除
array.splice(2, 0, item1);  //２番目の要素の後ろ（元々３番目だったところの後ろ）に挿入

console.log(array); // [1, 3, 2, 4, 5]

正直これでも数行のコードで済むので、全然問題ないが、次のsplice関数は、要素の削除と追加を同時にできるので、次のようにもっとスマートに書くことができる。

いい感じのコード

上の配列を入れ替えるコードを見て、要素の削除と追加に共に splice 関数が使われているのに気づいた方もいるだろう。

そう、JavaScriptの splice 関数は要素の削除と追加を同時にできる関数なのである。

splice の構文は次のようになっている。

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

注目すべきは、splice(start, deleteCount, item1, item2, itemN) の構文である。このシネグチャの関数は、start で指定した位置から deleteCount で指定した数の要素を削除し、３つ目以降の引数で指定された値を start に挿入する動きとなる。

１行で要素の入れ替えをする

splice は配列の内容を置換することができる関数であるため、これを応用することで配列の前後の要素を入れ替えるコードを１行でスリムに書くことができる。

// １番目から２個要素を削除し、その後、３番目→２番目の順に要素を再挿入する
array.splice(1, 2, array[2], array[1]);
console.log(array);   // [1, 3, 2, 4, 5]

スッキリしました。

離れた要素を入れ替える

2番目と10番目の要素を入れ替えるなど、配列の離れた要素を入れ替える場合はどうだろう。

splice を使ってもできなくはないが、関係のない要素にも配列操作が必要となり処理的に無駄であるため、このようなケースの場合は、普通に要素を入れ替えるコードを書いたほうがよいだろう。

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

//２番目と１０番目の要素を入れ替え
const tmp = array[1]
array[1] = array[9]
array[9] = tmp

console.log(array);  // [1, 0, 3, 4, 5, 6, 7, 8, 9, 2]