JavaScriptの配列の件数に制限(上限)を持たせる方法

javaScriptの配列で、件数に上限を設けて、古いものを順に削除していく処理を行いたい場合のサンプルです。

スポンサーリンク

配列の件数を制限し、追加時に古いものから削除するサンプル

先頭に追加し、最後から削除するパターン

配列の先頭に値を追加(shift)していって、3件より多くなったら末尾の配列から削除していく(pop)処理です。

サンプルコード
<input type="text" id="sample-text1" value="">
<input type="button" id="sample-push1" value="追加" />

<p id="sample-result1"></p>

<script>
(function(){
    let aryList = [];
    
    document.getElementById("sample-push1").onclick = function(){
        let text = document.getElementById("sample-text1").value;
        
        if(text === ''){
            alert('入力してください。');
            return false;
        }
        
        aryList.unshift(text); //先頭に追加
        if(aryList.length > 3){
            aryList.pop(); //3件を超えたら配列の最後の値を削除
        }
    
        //結果を表示
        document.getElementById("sample-result1").textContent = aryList.join(',');
    };
}());
</script>

末尾に追加し、先頭から削除するパターン

先ほどとは逆に、配列の末尾に要素を追加(push)し、3件より多くなったら先頭の配列から削除していく(unshift)処理です。

サンプルコード
<input type="text" id="sample-text2" value="">
<input type="button" id="sample-push2" value="追加" />

<p id="sample-result2"></p>

<script>
(function(){
    let aryList = [];
    
    document.getElementById("sample-push2").onclick = function(){
        let text = document.getElementById("sample-text2").value;
        
        if(text === ''){
            alert('入力してください。');
            return false;
        }
        
        aryList.push(text); //末尾に追加
        if(aryList.length > 3){
            aryList.shift(); //3件を超えたら配列の先頭の値を削除
        }
    
        //結果を表示
        document.getElementById("sample-result2").textContent = aryList.join(',');
    };
}());
</script>

配列の件数を制限し、追加時に古いものから削除し、同一の値の重複を取り除くサンプル

配列に上限を持たせつつ、pushまたはshiftで配列に要素を追加した時、同じ要素が既に存在する場合はその要素を削除し、配列内に同じ値が存在しない(UNIQUE)ようにする場合の処理です。
例えば、ブラウザの履歴などはこれに近い処理を行っていると思います。

先頭に追加し、最後から削除するパターン

サンプルコード
<input type="text" id="sample-text3" value="">
<input type="button" id="sample-push3" value="追加" />

<p id="sample-result3"></p>

<script>
(function(){
    let aryList = [];
    
    document.getElementById("sample-push3").onclick = function(){
        let text = document.getElementById("sample-text3").value;
        
        if(text === ''){
            alert('入力してください。');
            return false;
        }
        
        let id = aryList.indexOf(text);
        if(id === -1){ //値が配列内に存在しなかった場合
            aryList.unshift(text); //先頭に追加
            if(aryList.length > 3){
                aryList.pop(); //3件を超えたら配列の最後の値を削除
            }
        }else{ //値が配列内に存在した場合
            aryList.splice(id, 1); //元々あった値を削除
            aryList.unshift(text); //先頭に追加
        }
    
        //結果を表示
        document.getElementById("sample-result3").textContent = aryList.join(',');
    };
}());
</script>

末尾に追加し、先頭から削除するパターン

サンプルコード
<input type="text" id="sample-text4" value="">
<input type="button" id="sample-push4" value="追加" />

<p id="sample-result4"></p>

<script>
(function(){
    let aryList = [];
    
    document.getElementById("sample-push4").onclick = function(){
        let text = document.getElementById("sample-text4").value;
        
        if(text === ''){
            alert('入力してください。');
            return false;
        }
        
        let id = aryList.indexOf(text);
        if(id === -1){ //値が配列内に存在しなかった場合
            aryList.push(text); //末尾に追加
            if(aryList.length > 3){
                aryList.shift(); //3件を超えたら配列の最初の値を削除
            }
        }else{ //値が配列内に存在した場合
            aryList.splice(id, 1); //元々あった値を削除
            aryList.push(text); //末尾に追加
        }
    
        //結果を表示
        document.getElementById("sample-result4").textContent = aryList.join(',');
    };
}());
</script>

以上、JavaScriptの配列の件数に制限(上限)を持たせる方法、でした。

コメント

タイトルとURLをコピーしました