JavaScriptで配列に要素を追加する方法!push・unshift・spliceの使い方を解説

JavaScriptで配列に要素を追加するには、追加する位置(末尾・先頭・任意の場所)に応じて、使用すべきメソッドが異なります。この記事では、代表的な3つのパターンをコード例とともにわかりやすく解説します。

配列の末尾に要素を追加する:pushメソッド

配列の末尾に要素を追加するときは、pushメソッドを使います。

let veggies = ['Onion', 'Raddish'];
veggies.push('Cabbage');
console.log(veggies);

実行結果は以下のとおりです。

['Onion', 'Raddish', 'Cabbage']

pushは可変長引数に対応しているため、複数の要素を一度に追加することもできます。

let veggies = ['Onion', 'Raddish'];
veggies.push('Cabbage', 'Carrot', 'Broccoli');
console.log(veggies);

実行結果は以下のとおりです。

['Onion', 'Raddish', 'Cabbage', 'Carrot', 'Broccoli']

配列の先頭に要素を追加する:unshiftメソッド

配列の先頭に要素を追加するときは、unshiftメソッドを使います。

let veggies = ['Onion', 'Raddish'];
veggies.unshift('Cabbage');
console.log(veggies);

実行結果は以下のとおりです。

['Cabbage', 'Onion', 'Raddish']

pushと同様に、unshiftも可変長引数に対応しています。複数の要素を渡すと、指定した順番のまま先頭に追加されます。

let veggies = ['Onion', 'Raddish'];
veggies.unshift('Cabbage', 'Carrot', 'Broccoli');
console.log(veggies);

実行結果は以下のとおりです。

['Cabbage', 'Carrot', 'Broccoli', 'Onion', 'Raddish']

配列の任意の位置に要素を挿入する

Array.prototypeを拡張してinsertメソッドを定義する

JavaScriptには、指定したインデックスに直接要素を挿入するための標準メソッドは用意されていません。そこで、独自の関数を作成してArray.prototypeに追加すれば、あらゆる配列オブジェクトから直接呼び出せるようになります。

Array.prototype.insert = function(data, position) {
    if (position >= this.length) {
        this.push(data)
        // 位置が配列の長さ以上なら末尾に追加
    } else if (position <= 0) {
        this.unshift(data)
        // 位置が0以下なら先頭に追加
    } else {
        // 指定位置以降の要素を1つずつ後ろへずらす
        for (let i = this.length; i >= position; i--) {
            this[i] = this[i - 1];
        }
        this[position] = data;
    }
}

let arr = [1, 2, 3, 4];
arr.insert(-1, 2);
console.log(arr);

実行結果は以下のとおりです。

[1, 2, -1, 3, 4]

このように定義しておけば、今後作成するすべての配列でinsertメソッドが利用できるようになります。

spliceメソッドで挿入する(おすすめ)

より汎用的なのが標準のspliceメソッドです。これを使えば、プロトタイプを拡張しなくても任意の位置に要素を挿入できます。

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);

実行結果は以下のとおりです。

['Jan', 'Feb', 'March', 'April', 'June']

spliceメソッドの引数は、それぞれ次のような意味を持ちます。

• 第1引数:操作を開始するインデックス(削除・挿入の起点)
• 第2引数:削除する要素の個数(0を指定すると削除せず挿入のみ行う)
• 第3引数以降:配列に挿入したい値

上の例では、インデックス1の位置で何も削除せずに「Feb」を挿入しているため、月名が正しい順序に並びます。