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>