JavaScriptで配列の任意の位置に要素を挿入する方法（push・unshift・splice）

JavaScriptで配列に要素を追加する場合、挿入する位置によって使い分けられる便利なメソッドが3つあります。

• push()：配列の末尾に要素を追加する
• unshift()：配列の先頭に要素を追加する
• splice()：配列の任意のインデックス（途中の位置）に要素を挿入する

それぞれのメソッドについて、具体的なコード例を見ていきましょう。

1. push() — 配列の末尾に追加する

push() メソッドは、引数に渡した要素を配列の最後尾に追加します。複数の要素を一度に渡すことも可能です。

コード例

let arr = ["test", 1, 2, "hello", 23.5];
arr.push(123);
console.log(arr);

実行結果

[ 'test', 1, 2, 'hello', 23.5, 123 ]

2. unshift() — 配列の先頭に追加する

unshift() メソッドは、push() の逆で、引数に渡した要素を配列の先頭に挿入します。こちらも複数の要素を同時に追加できます。

コード例

let arr = ["test", 1, 2, "hello", 23.5];
arr.unshift(123);
console.log(arr);

実行結果

[ 123, 'test', 1, 2, 'hello', 23.5 ]

3. splice() — 配列の任意のインデックスに挿入する

splice() メソッドは、既存の要素の削除や置き換え、そして新しい要素の追加をその場で行える強力なメソッドです。第2引数に「0」を指定すると、何も削除せずに指定した位置へ要素を挿入できます。

構文：

array.splice(挿入開始インデックス, 削除する要素数, 挿入する要素...)

コード例

let arr = ["test", 1, 2, "hello", 23.5];
// インデックス2の位置に、0個削除して 123 を挿入する
arr.splice(2, 0, 123);
console.log(arr);

実行結果

[ 'test', 1, 123, 2, 'hello', 23.5 ]

このように、第1引数に挿入したい位置のインデックス、第2引数に 0、第3引数以降に追加したい要素を渡すことで、配列のどの位置にも自由に要素を挿入できます。

まとめ

用途に応じてこれらのメソッドを使い分けることで、配列操作を効率的に行えます。特に splice() は削除・置換も兼ねられるため、覚えておくと非常に役立ちます。