配列へ要素を追加する

JavaScript の配列は要素数を変更することできますので、あとから配列に要素を追加することができます。ここでは JavaScript の配列に要素を追加する方法について解説します。

※ Array オブジェクトの splice メソッドを使うことで、配列の指定した位置に要素を追加することもできます。「配列の指定の位置に要素を追加する」を参照されてください。

(Last modified: 2024-09-04)

インデックスを指定して要素を追加する

作成済の配列に対して新しい要素を追加するには、現在存在しないインデックスを指定して要素に対して値を代入することです。次のサンプルをみてください。

let fruit = ['apple', 'melon', 'peach'];

この配列には現在 3 つの要素が存在します。この配列の最後に要素を追加するには次のように記述します。

let fruit = ['apple', 'melon', 'peach'];
fruit[3] = 'banana';

console.log(fruit);
>> ["apple", "melon", "peach", "banana"]

このように現在使用されていないインデックスを指定して要素に値を代入することで、新しい要素を追加することができます。

現在の配列の最後のインデックスは length プロパティから -1 した値になりますので、配列の最後に要素を追加する場合は次のように記述することができます。( length プロパティについては「配列の要素の数を取得する」を参照されてください)。

let fruit = ['apple', 'melon', 'peach'];
fruit[fruit.length] = 'grapes';

console.log(fruit);
>> ["apple", "melon", "peach", "grapes"]

JavaScript では配列の要素は連続していなくても構いません。その為、追加する要素のインデックス現在の最後のインデックスに +1 したものでなくても構いません。次のサンプルをみてください。

let fruit = ['apple', 'melon', 'peach'];
fruit[7] = 'orange';

console.log(fruit);
>> ["apple", "melon", "peach", empty, empty, empty, empty, "orange"]

元々の配列の最後のインデックスは 2 でしたが、今回はインデックスとして 7 を指定して要素を追加しています。

pushメソッドを使って配列の最後に要素を追加する

Array オブジェクトの push メソッドを使うと配列の最後に 1 つまたは複数の要素を追加することができます。書式は次の通りです。

配列名.push(値1[, 値2, ...])

配列の最後に引数に指定した値を持つ要素を追加します。戻り値として追加したあとの配列の length プロパティの値を返します。引数に配列に追加する要素の値を指定します。複数の要素をまとめて追加する場合はカンマ(,)で区切って記述してください。

次のサンプルをみてください。

let fruit = ['apple', 'melon', 'peach'];
fruit.push('orange', 'grapes');

console.log(fruit);
>> ["apple", "melon", "peach", "orange", "grapes"]

配列の最後に 2 つの要素が追加されました。

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

Array オブジェクトの unshift メソッドを使うと配列の先頭に 1 つまたは複数の要素を追加することができます。書式は次の通りです。

配列名.unshift(値1[, 値2, ...])

配列の先頭に引数に指定した値を持つ要素を追加します。戻り値として追加したあとの配列の length プロパティの値を返します。引数に配列に追加する要素の値を指定します。複数の要素をまとめて追加する場合はカンマ(,)で区切って記述してください。

次のサンプルをみてください。

let fruit = ['apple', 'melon', 'peach'];
fruit.unshift('orange', 'grapes');

console.log(fruit);
>> ["orange", "grapes", "apple", "melon", "peach"]

配列の先頭に 2 つの要素が追加されました。

-- --

JavaScript の配列に要素を追加する方法について解説しました。

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。