JavaScript【 array 】11 ～ 配列のpushとpop

JavaScript【 array 】２ ～ 要素の追加と削除で、配列に値を追加したり削除したりする方法を紹介しましたが、pushメソッドやpopメソッドを使って値の追加や削除を行う方法もあります。
今回は、pushメソッドとpopメソッドの使い方を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. pushメソッドとは

　
pushメソッドは、Arrayオブジェクトで用意されているメソッドで、配列に新しい要素を追加し、その要素を追加した後の配列の長さを返します。
（Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。）

pushメソッドを使用して配列に値を追加すると、元の配列データの末尾に値が追加されます。

pushメソッドは、次のように記述します。

    let 配列変数 = [値1, 値2, 値3];

    配列変数.push( 追加値1, 追加値2, 追加値3, ...);

この記述で追加された値は、配列に次のように格納されます。

    配列変数 : [ 値1, 値2, 値3, 追加値1, 追加値2, 追加値3, ...]

▲目次へ戻る

　

2. pushメソッドの使い方

　
pushメソッドを使用して配列に値を追加します。
各表示ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function dispAry() {
    let fruits =  ["りんご", "みかん", "ぶどう", "メロン"];
    document.getElementById("dat").value = fruits;
}
function dispAry2() {
    let fruits =  ["りんご", "みかん", "ぶどう", "メロン"];
    fruits.push("もも","レモン");
    document.getElementById("dat2").value = fruits;
}
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <form>
        元の配列の値を表示します
        <div style="display:inline-flex;">
          　<input type="button" value="表示" onClick="dispAry()">　
            <input type="text" id="dat" placeholder="元の値が表示されます">
        </div>
        「もも」と「レモン」を追加した配列の値を表示します
        <div style="display:inline-flex;">
          　<input type="button" value="表示" onClick="dispAry2()">　
            <input type="text" id="dat2" placeholder="追加後の値が表示されます">
        </div>
    </form>
</div>

pushメソッドで追加された値は、元の配列の末尾へ順番に追加されます。
　
　
pushメソッドを使用して、数値や文字列の値の他にオブジェクトを追加することもできます。

先ほどは、「もも」と「レモン」を2つの文字列データとして追加しましたが、今度は「もも」と「レモン」を要素に持つ配列を追加してみます。
各表示ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function dispAry() {
    let fruits =  ["りんご", "みかん", "ぶどう", "メロン"];
    document.getElementById("dat").value = JSON.stringify(fruits);
}
function dispAry2() {
    let fruits =  ["りんご", "みかん", "ぶどう", "メロン"];
    fruits.push(["もも", "レモン"]);
    document.getElementById("dat2").value = JSON.stringify(fruits);
}
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <form>
        元の配列の値を表示します
        <div style="display:inline-flex;">
          　<input type="button" value="表示" onClick="dispAry()">　
            <input type="text" id="dat" placeholder="元の値が表示されます">
        </div>
        配列［"もも", "レモン"］を追加した値を表示します
        <div style="display:inline-flex;">
          　<input type="button" value="表示" onClick="dispAry2()">　
            <input type="text" id="dat2" placeholder="追加後の値が表示されます">
        </div>
    </form>
</div>

配列（オブジェクト）データが1つの値として追加されていることが分かるように、「 JSON.stringify(fruits); 」でJSON文字列に変換して表示しています。
（JSON.stringifyメソッドやJSON文字列については、JSON文字列に変換して比較をご参照下さい。）

このサンプルでは、配列データを追加した後、それぞれの値が次の通り格納されています。

追加した［”もも”,”レモン”］の配列が、配列のまま1つの要素として格納されていることがわかります。

「もも」や「レモン」という値を取り出したい場合は、「fruits[4][0]」や「fruits[4][1]」と指定します。
（詳しくは、多次元配列をご参照下さい。）

▲目次へ戻る

　

3. popメソッドとは

　
popメソッドは、Arrayオブジェクトで用意されているメソッドで、配列の最後の要素を削除して、削除した要素を返します。
（Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。）

popメソッドを使用すると、元の配列データのインデックス番号最大値の値が削除されます。

popメソッドは、次のように記述します。

    let 配列変数 = [ 値1, 値2, 値3 ];

    配列変数.pop();

この記述で、値3が削除されます。

データを特定することなく、自動的に最後の値が削除されてしまうので、慎重に使用する必要があります。

▲目次へ戻る

　

4. popメソッドの使い方

　
popメソッドを使用して配列の値を削除します。
削除ボタンを何度かクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
let fruits =  ["りんご", "みかん", "ぶどう", "メロン", "もも", "レモン"];

function dispAry() {
    fruits.pop();
    document.getElementById("dat").value = fruits;
}
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <form>
        ["りんご","みかん","ぶどう","メロン", "もも", "レモン"]

        上の配列の末尾から値を順次削除します
        <div style="display:inline-flex;">
          　<input type="button" value="削除" onClick="dispAry()">　
            <input type="text" id="dat" placeholder="削除後の値が表示されます" >
        </div>
    </form>
</div>

▲目次へ戻る