これまでいろんな配列操作のメソッドをまとめてきましたが、今回は値の増減に関する操作ができるメソッドになります。あまり使うシーンは見かけないかもしれませんが、もちろん覚えておいたほうがなにかと役立てられるので、この機会に見ていきたいと思います。  

Array.push()

配列の最後に値を1つずつ追加したい場合には「Array.push()」を使います。下記のように使い方も簡単で、追加先の配列に対してメソッドを指定し、そのメソッドの引数に追加する値を取ります。これだけで配列の後ろから値を追加していくことができます。 【javascript】

let arrayData = ['春', '夏', '秋'];
const add = '冬';
const result = arrayData.push(add);
console.log(arrayData);
console.log(result);

  このように値が追加されたのが確認できます。追加後の配列を扱いたい時には、対象の配列をそのまま使います。Array.push()の戻り値には、追加後の配列の長さが数値として返ってきます。 【console】

[ "春", "夏", "秋", "冬" ] // arrayData
4　                       // result

  ちなみに、あまり利用されることはないかもしれませんが、配列の先頭に値を1つずつ足していく場合には「Array.unshift()」を使います。  

Array.pop()

配列の値を後ろから1つずつ削除していく場合には「Array.pop()」を使います。先ほどのArray.push()と逆の働きになるのですが、返り値などが少し異なります。まず、引数には何も取らずに、対象の配列に対して実行します。 【javascript】

let arrayData = ['優勝', '準優勝', 'ベスト4', 'ベスト8'];
const result = arrayData.pop();
console.log(arrayData);
console.log(result);

  そうすると削除された値が返ってきます。実行した後の配列では、最後にあった値が削除され、配列の長さが減っているのが確認できます。 【console】

[ "優勝", "準優勝", "ベスト4" ]   // arrayData
"ベスト8"                       // result

  また、こちらも配列の先頭から値を1つずつ削除していく場合には「Array.shift()」を使います。先ほどのArray.push()と合わせることで、後入れ先出しのデータ操作ができるようになります。  

まとめ

【配列の値を1つずつ後ろに追加していく】 Array.push( value );   【配列の値を1つずつ後ろから削除していく】 Array.pop( value );  

---

  APIなどからデータを一括で取得するなどで、配列を操作する場合にはあまり使う場面がないかもしれませんが、フロントエンド側で動的に配列の値を増やしたり減らしたりする際には使えますので是非合わせて覚えておきたいですね。   （こちらの記事もどうぞ） JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】 JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】 JavaScriptで配列を扱う時によく使うメソッド＃3【配列に値が含まれるか・値のインデックスを検索する】 JavaScriptで配列を扱う時によく使うメソッド＃4【配列から条件に合う値を取得・フィルタリングする】 JavaScriptで配列を扱う時によく使うメソッド＃5【配列の値から別の配列を作成・単一の値を算出する】