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

2022年10月13日木曜日

javascript

t f B! P L

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

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

enter image description here

イマイチなゴード

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

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

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

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 で指定した数の要素を削除し、3つ目以降の引数で指定された値を start に挿入する動きとなる。

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

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

// 1番目から2個要素を削除し、その後、3番目→2番目の順に要素を再挿入する
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];

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

console.log(array);  // [1, 0, 3, 4, 5, 6, 7, 8, 9, 2]
スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ