［JS］配列の追加削除メソッド pop, push, shift, unshift
JavaScriptのArrayオブジェクトの追加削除メソッドには、pop、push、shift、unshiftがあります。それぞれの使い方と、スタックとキューを実装する方法について、解説します（サンプルあり）。
pop：配列末尾の要素を削除
popメソッドは、配列末尾の要素を一つ削除します。
メソッドを呼び出した配列そのものを、加工します。
戻り値は、削除した要素です。
const array = ['Cupcake', 'Donut', 'Eclair', 'Froyo', 'Gingerbread'];
console.log(array.pop());
//「Gingerbread」
console.log(array);
//「[ 'Cupcake', 'Donut', 'Eclair', 'Froyo' ]」push：配列末尾に要素を追加
pushメソッドは、配列末尾に要素を追加します。一度に複数の要素を追加することもできます。
メソッドを呼び出した配列そのものを、加工します。
戻り値は、要素追加後の配列の要素数です。
pushメソッドの引数として配列を渡しても展開されることはなく、配列のまま一つの要素として追加されます。
配列の要素を展開して追加する場合は、スプレッド演算子（...）を使用する必要があります。
また、配列同士を結合して新たな配列を生成する場合は、concatメソッドを使用します。
const array = ['Cupcake', 'Donut'];
console.log(array.push('Eclair'));
//「3」
console.log(array);
//「[ 'Cupcake', 'Donut', 'Eclair' ]」
console.log(array.push('Froyo', 'Gingerbread'));
//「5」
console.log(array);
//「[ 'Cupcake', 'Donut', 'Eclair', 'Froyo', 'Gingerbread' ]」shift：配列先頭の要素を削除
shiftメソッドは、配列先頭の要素を一つ削除します。
メソッドを呼び出した配列そのものを、加工します。
戻り値は、削除した要素です。
const array = ['Cupcake', 'Donut', 'Eclair', 'Froyo', 'Gingerbread'];
console.log(array.shift());
//「Cupcake」
console.log(array);
//「[ 'Donut', 'Eclair', 'Froyo', 'Gingerbread' ]」unshift：配列先頭に要素を追加
unshiftメソッドは、配列末尾に要素を追加します。一度に複数の要素を追加することもできます。
メソッドを呼び出した配列そのものを、加工します。
戻り値は、要素追加後の配列の要素数です。
const array = ['Froyo', 'Gingerbread'];
console.log(array.unshift('Eclair'));
//「3」
console.log(array);
//「[ 'Eclair', 'Froyo', 'Gingerbread' ]」
console.log(array.unshift('Cupcake', 'Donut'));
//「5」
console.log(array);
//「[ 'Cupcake', 'Donut', 'Eclair', 'Froyo', 'Gingerbread' ]」スタック：push / pop
スタック（stack）とは、後入れ先出し方式（LIFO：Last In, First Out）で、データを管理するものです。
データを後ろから追加していき、後ろからデータを取り出して処理を実行します。
例えば、アプリの操作を取り消すUndo機能は、スタックで実装することができます。
スタックは、pushメソッド（配列末尾に要素を追加）とpopメソッド（配列末尾の要素を取得して削除）で実装します。
const stack = ['action1', 'action2', 'action3', 'action4'];
stack.push('action5');
let last = stack.pop();
console.log(`Undo ${last}`);
//「Undo action5」
console.log(stack);
//「[ 'action1', 'action2', 'action3', 'action4' ]」キュー：push / shift
キュー（queue）とは、先入れ先出し方式（FIFO：First In, First Out）で、データを管理するものです。
データを後ろから追加していき、前からデータを取り出して処理を実行します。
待ち行列となる処理を実装することができます。
キューは、pushメソッド（配列末尾に要素を追加）とshiftメソッド（配列先頭の要素を取得して削除）で実装します。
const queue = ['process1', 'process2', 'process3', 'process4'];
queue.push('process5');
let current = queue.shift();
console.log(`Do ${current}`);
//「Do process1」
console.log(queue);
//「[ 'process2', 'process3', 'process4', 'process5' ]」まとめ
JavaScriptの配列の追加削除メソッドについて、解説しました。
配列要素の追加削除メソッドには、pop、push、shift、unshiftがあります。
- pop：末尾削除
- push：末尾追加
- shift：先頭削除
- unshift：先頭追加
また、スタックとキューのデータ構造を、配列で実装することができます。
スタックとキューは以下の組み合わせで実装します。
- スタック：push / pop
- キュー：push / shift