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

colmun_main7200

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

目次

 
1.pushメソッドとは
2.pushメソッドの使い方
3.popメソッドとは
4.popメソッドの使い方

 

1.pushメソッドとは

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

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

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

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

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

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

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

▲目次へ戻る

 

2.pushメソッドの使い方

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

元の配列の値を表示します

  

「もも」と「レモン」を追加した配列の値を表示します

  

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

<script type="text/javascript">
<!--
function dispAry() {
    var fruits =  ["りんご", "みかん", "ぶどう", "メロン"];
    document.getElementById("dat").value = fruits;
}
function dispAry2() {
    var 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() {
    var fruits =  ["りんご", "みかん", "ぶどう", "メロン"];
    document.getElementById("dat").value = JSON.stringify(fruits);
}
function dispAry2() {
    var 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メソッドは、次のように記述します。

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

配列変数 .pop( );

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

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

▲目次へ戻る

 

4.popメソッドの使い方

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

[“りんご”,”みかん”,”ぶどう”,”メロン”, “もも”, “レモン”]
 
上の配列の末尾から値を順次削除します

  

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

<script type="text/javascript">
<!--
var 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>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です