【JavaScript】Array.splice()メソッドで配列の要素を入れ替える

JavaScriptで配列の中身の要素を入れ替えたいときってありますよね。

ということで、そんな配列の中身を入れ替える操作をArray.splice()で実現したいと思います。

宣伝：私のYoutubeチャンネル⇨プログラミングチュートリアル

【JavaScript】Array.splice()メソッドで配列の要素を入れ替える

早速、簡単な実例を見ていきましょう。

const list = ["item0", "item1", "item2"];
console.log(list); //結果：["item0", "item1", "item2"]

まずは普通に配列の要素を３つ（”item0″, “item1”, “item2″）作成しました。

これから０番目の”item0″と１番目の”item1″の要素を入れ替えてみたいと思います。

①まずは０番目の要素を１つ削除する

const list = ["item0", "item1", "item2"];
console.log(list);　//結果：["item0", "item1", "item2"]
list.splice(0, 1);　//listの０番目の要素を１つ削除
console.log(list) //["item1", "item2"]

3行目に注目してください。spliceメソッドを利用しています。splice()に２つの引数をとるときは第一引数に取り除きたい配列のインデックス、第二引数に取り除く個数を指定します。

この場合だとlist.splice(0, 1);なので、配列の０番目の要素(“item0”)を１つ削除することになっています。

これでlistの中身が[“Item1”, “item2”]になりました。

②取り除いた０番目の要素を１番目に挿入する

以下の操作で入れ替えが完了です。

const list = ["item0", "item1", "item2"];
console.log(list);　//結果：["item0", "item1", "item2"]
const remove = list.splice(0, 1); //取り除いた０番目の要素を取得
console.log(remove); //["item0"]
console.log(list);　//["item1", "item2"]
list.splice(1, 0, remove[0]); //listの１番目に０個削除して取り除いた０番目を挿入
console.log(list); //["item1", "item0", "item2"]←入れ替え完了！

３行目で変数のremoveを宣言しています。これでremove変数の中に、取り除いた０番目の要素を格納しておきます。

６行目で再度spliceメソッドを利用して今度は要素の挿入をしています。splice()メソッドで３つの引数を取るときは、第一引数に挿入したいlistのインデックス、第二引数に要素を取り除く個数、第三引数に挿入する要素を指定することになります。

この場合だとlist.splice(1, 0, remove[0]);なので、配列インデックスの１番目に、０個要素を削除して、remove[0]を挿入することを意味しています。

Array.splice()メソッドで配列の要素を入れ替える：まとめ

配列の要素を入れ替えるときは多々あるので、その時はspliceメソッドを使ってあげましょう。

公式ドキュメントを載せておきます。

他にもreduce()メソッドで要素を交換することもできすが、今回はspliceメソッドで要素を入れ替えてみました。次回はreduce()で要素を入れ替えてみたいと思います。