配列の先頭や末尾に要素を追加，削除 - push, pop, shift, unshift

《初回公開：2023/10/19 , 最終更新：未》

【　目次　】

配列の先頭や末尾に要素を追加，削除 - push, pop, shift, unshift

push, pop, shift, unshiftの4つのメソッドは配列の先頭や末尾に要素を追加したり，配列の先頭や最後の要素を削除する。
これらのメソッドはスタックやキューの機能を実装するために使われる事もある。
元の配列を変更するので破壊的メソッドとなる。

push - 配列の末尾に要素を追加

pushメソッドは、配列の末尾に1つまたは複数の要素を追加する。

構文

array.push(element1, element2, ..., elementN)

引数

element1, element2, ..., elementN: 追加する1つまたは複数の要素を指定する。 element1から順番にelementNが最後に追加される。

戻り値

追加後の配列の新しい長さを返す。

pushメソッドの動作を非墓的メソッドとして実現したい場合は、pushメソッドでは無くarray.concat([element0, element1, ..., elementN]) が使える。

{
    // pushメソッドの動作
    const array = ["a", "b", "c"];
    const length = array.push("d", "e");
    console.log(length, array); // 5 ["a", "b", "c", "d", "e"]
}
{
    // pushメソッドの動作をconcatメソッドで非破壊的に
    const array = ["a", "b", "c"];
    const result = array.concat("d", "e");
    console.log(array, result); // ["a", "b", "c"] ["a", "b", "c", "d", "e"]
}

pop - 配列の末尾の要素を削除し削除した末尾の要素を返す。

pushメソッドは、配列の末尾の要素を削除し削除した末尾の要素を返す。

構文: array.pop()
引数: 無し
戻り値: 削除した末尾の要素。空の配列に対して実行した場合はundefined。

popメソッドの動作を非墓的メソッドとして実現したい場合は、popメソッドでは無くarray.slice(0, -1)が使える。

例

{
    // popメソッドの動作
    const array = ["a", "b", "c"];
    const result = array.pop();
    console.log(result, array); // c ["a", "b"]
}
{
    // popメソッドの動作をsliceメソッドで非破壊的に
    const array = ["a", "b", "c"];
    const result = array.slice(0, -1);
    console.log(array, result); // ["a", "b", "c"] ["a", "b"]
}
{
    // 空の配列をpopするとundefinedが
    const array = [];
    const result = array.pop();
    console.log(result);    // undefined
}

shift - 配列の先頭から要素を削除してその要素を返す。

配列の先頭から要素を削除してその要素を返す。

構文: array.shift()
引数: 無し
戻り値: 削除した先頭の要素。空の配列に対して実行した場合はundefined。

shiftメソッドの動作を非墓的メソッドとして実現したい場合は、shiftメソッドでは無くarray.slice(1)が使える。

例

{
    // shiftメソッドの動作
    const array = ["a", "b", "c"];
    const result = array.shift();
    console.log(result, array); // a ["b", "c"]
}
{
    // shiftメソッドの動作をsliceメソッドで非破壊的に
    const array = ["a", "b", "c"];
    const result = array.slice(1);
    console.log(array, result); // ["a", "b", "c"] ["b", "c"]
}
{
    // 空の配列をshiftするとundefined
    const array = [];
    const result = array.shift();
    console.log(result);    // undefined
}

unshift - 配列の先頭に要素を追加

配列の先頭に1つまたは複数の要素を追加する。

構文

array.unshift(element1, element2, ..., elementN)

引数

element1, element2, ..., elementN: 追加する1つまたは複数の要素を指定する。
element1から順番にelementNが最後に追加される。

戻り値

追加後の配列の新しい長さを返す。

pushメソッドの動作を非墓的メソッドとして実現したい場合は、pushメソッドでは無くarray.concat([element0, element1, ..., elementN]) が使える。

例

const array = ["c", "d", "e"];
const length = array.unshift("a", "b");
console.log(length, array); // 5 ["a", "b", "c", "d", "e"]

push, pop, shift, unshiftは、要素の挿入と削除の際に配列の要素のインデックスが変動するため、大量の要素を追加・削除する場合にはパフォーマンスに注意する必要がある。

スタックやキューとpush, pop, shift, unshiftの関係

スタック

スタックとは、データが「積み重なる」ように一方向にデータ(要素)を追加、取り出す時は最後に追加したデータを取り出すデータ構造の事。
LIFO（Last-In-First-Out）とも呼ばれる。
配列の pushメソッドはスタックにデータを追加する操作に相当し、popメソッドはスタックからデータを取り出す操作に相当する。

const stack = [];
stack.push("a");            // スタックに値を格納
let stack = array.pop();    // スタックから値を取り出す

スタックはshift, unshiftを使う事でも実現できる。

const stack = [];
stack.unshift("a");         // スタックに値を格納
let value = stack.shift();  // スタックから値を取り出す

キュー

キューはデータが「待ち行列」のように最初に追加（enqueue）されたデータが最初に取り出される（dequeue）データ構造の事。
FIFO（First-In-First-Out）とも呼ばれる。
配列の pushメソッドはキューのデータを追加する操作に相当し、shiftメソッドはキューのデータを取り出す操作に相当する。

キューはunshiftとpopを使う事でも実現できる。

const queue = [];
queue.push("a");            // キューに値を格納
let value = queue.shift();  // キューから値を取り出す

両端キュー（Double-ended Queue、Deque）

JavaScriptの配列は両端キューとしても利用できまる。

両端キューは、要素を両端から挿入や削除ができるデータ構造。
キュー（FIFO）とスタック（LIFO）の両方の特性を持っているため、「両端スタック」（Double-ended Stack）という事もできるが、「両端スタック」（Double-ended Stack）という用語は一般的ではない。

JavaScriptでは、
unshiftメソッドを使って先頭に要素を追加し、popメソッドを使って末尾から要素を取り出し、
pushメソッドを使って末尾に要素を追加し、shiftメソッドを使って先頭から要素を取り出す
事で両端キューを実現できる。