JavaScript | 配列の先頭や末尾に値を追加する方法

JavaScript,JavaScript 配列

配列の先頭や末尾に値を追加する

JavaScriptのpush()、unshift()で配列の先頭と末尾にデータを追加する方法の紹介です。

push()関数で配列の末尾に値を追加する

push()関数は引数に追加する値を指定することで、配列の末尾に新しくデータを追加します。

配列.push(追加する値)

この関数は指定した配列を直接変更します。
また、返り値は追加後のデータ数となっており、追加した配列が返ってくるわけではないことに注意します。

動作サンプル

See the Pen JavaScript push() by yochans (@yochans) on CodePen.

サンプルコード

let output_area = document.getElementById('output_area');

let array = ['HTML','CSS','PHP'];

array.push('JavaScript');

output_area.innerHTML = JSON.stringify(array);

※サンプルでは配列をHTML上に見やすく表示する為に、jsonに変換して出力しています。

unshift()関数で配列の末尾に値を追加する

unshift()関数は引数に追加する値を指定することで、配列の先頭に新しくデータを追加します。

配列.unshift(追加する値)

この関数は指定した配列を直接変更します。
また、返り値は追加後のデータ数となっており、追加した配列が返ってくるわけではないことに注意します。

動作サンプル

See the Pen JavaScript unshift() by yochans (@yochans) on CodePen.

サンプルコード

let output_area = document.getElementById('output_area');

let array = ['HTML','CSS','PHP'];

array.unshift('JavaScript');

output_area.innerHTML = JSON.stringify(array);

※サンプルでは配列をHTML上に見やすく表示する為に、jsonに変換して出力しています。