用途
新着
履歴
分類

JavaScript 配列の追加と削除

JavaScript  配列の追加と削除
JavaScript 配列の追加と削除
配列の要素の追加と削除のサンプルです。

ボタンを押すと、値を配列の先頭や末尾に追加するサンプルです。

合わせて、追加した値を削除するサンプルと、すでに同じ値が存在する場合、は追加しない記述も載せました。

このサンプルはjQueryを利用しています。

以下のボタンを押すと、配列に値がセットされます。

配列の先頭に追加してくパターン、末尾に追加するパターン

「123」を配列の最後に追加
「あいう」を配列の先頭に追加

特定の値を先頭から探して削除するボタンはこちら

配列の中の「123」を先頭から削除
配列の中の「あいう」を先頭から削除

すでに値があったら追加しないパターンはこちら。

「123」がなければ、配列の最後に追加
結果を出力

配列の中身は↑こちらに出力されます。

ブラウザのディベロッパーツールのコンソールにも出力されますので、確認してみてください。

JSはこちら

    demo_arr = [];
    $(function(){

        $(".demo_push").on("click",function(e){
            n = $(this).attr("data-num");
            demo_arr.push(n); //最後に追加の場合
            console.log(demo_arr);
            $("#demo_result").html(demo_arr);
        });


        $(".demo_unshift").on("click",function(e){
            n = $(this).attr("data-num");
            demo_arr.unshift(n); //先頭に追加の場合
            console.log(demo_arr);
            $("#demo_result").html(demo_arr);
        });


        $(".demo_splice").on("click",function(e){
            n = $(this).attr("data-num");
            var idx = demo_arr.indexOf(n);
            if(idx >= 0){
                demo_arr.splice(idx, 1); 
            }
            console.log(demo_arr);
            $("#demo_result").html(demo_arr);
        });


        $(".demo_push2").on("click",function(e){
            n = $(this).attr("data-num");
            var idx = demo_arr.indexOf(n);
            //no_hit = -1
            if(idx < 0){
                demo_arr.push(n); //最後に追加の場合
            }
            console.log(demo_arr);
            $("#demo_result").html(demo_arr);
        });

    });


HTMLはこちら

<div class="demo_push demo_btn" data-num="123">
    「123」を配列の最後に追加
</div>

<div class="demo_unshift demo_btn" data-num="あいう">
    「あいう」を配列の先頭に追加
</div>

<div class="demo_splice demo_btn" data-num="123">
    配列の中の「123」を先頭から削除
</div>

<div class="demo_splice demo_btn" data-num="あいう">
    配列の中の「あいう」を先頭から削除
</div>

<div class="demo_push2 demo_btn" data-num="123">
    「123」がなければ、配列の最後に追加
</div>

<div id="demo_result">結果を出力</div>
公開 2020-10-31 12:30:46
更新 2020-10-31 12:45:09
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2020 kipure
Top