Delete last element of javascript array when array reaches specific length

Question

I would like to cache some data in javascript, but the cache should be limited to 10 elements, for example.

I can place objects in a javascript array, but what is the best way to limit the array to 10 elements?

Example:

function getData(dataId) { return new NextDataObject(dataId); } var array = new Array(); array.push(getData(0)); array.push(getData(1)); (...) array.push(getData(10)); // this should result in dropping "oldest" data, so getData(0) should be removed from the array, so that in array there are only 10 objects at maximum 

Should such a mechanism be written manually (for example, using splice ()?) Or are there better ways to achieve such a cache structure in javascript?

By the way: in this particular situation I use angular.

Answer 1

Override the push function of your cache array.

 var array = new Array() array.push = function (){ if (this.length >= 10) { this.shift(); } return Array.prototype.push.apply(this,arguments); } 

Plunker

---

To make this more reusable, I created a method that returns a new instance of such an array (based on the code above).

 function getArrayWithLimitedLength(length) { var array = new Array(); array.push = function () { if (this.length >= length) { this.shift(); } return Array.prototype.push.apply(this,arguments); } return array; } var array = getArrayWithLimitedLength(10); 

Answer 2

To remove the first element from the array, use shift :

 if (arr.length > 10) { arr.shift(); // removes the first element from an array } 

Answer 3

You can create a new method in Array.prototype to mimic your needs.

 Array.prototype.push_with_limit = function(element, limit){ var limit = limit || 10; var length = this.length; if( length == limit ){ this.shift(); } this.push(element); } var arr = [] arr.push_with_limit(4); // [4] arr.push_with_limit(9); // [4, 9] .... // 11th element arr.push_with_limit(3); // [9, ..., 3] 10 elements 

Answer 4

How about this object?

 function Cache(maxLength) { this.values = []; this.store = function(data) { if(this.values.length >= maxLength) { this.getLast(); } return this.values.push(data); } this.getLast = function() { return this.values.splice(0,1)[0]; } } cache = new Cache(3); // => Cache {values: Array[0]} cache.store(1) // => 1 cache.store(2) // =>2 cache.store(3) // => 3 cache.store(4) // =>3 cache.values // => [2, 3, 4] cache.getLast() // => 2 cache.values [3, 4] 

Answer 5

Simple fixed length:

 Array.prototype.qpush = function( vals, fixed ) { if (arguments.length) { if (Array.isArray(vals)) { for (var v of vals) { this.push(v); } } else { this.push(vals); } var _f = (typeof this.fixed != undefined) ? this.fixed : 0; if (typeof fixed != undefined) { _f = (Number(fixed)===fixed && fixed%1===0 ) ? fixed : _f; } this.fixed = _f; if (this.fixed>0) this.splice(0, this.length - _f); } } var q = new Array(); q.push(0); q.qpush( [1, 2, 3], 10 ); q.qpush( [4] ); q.qpush( 5 ); q.qpush( [6, 7, 8, 9, 10, {k:"object"} ] ); console.log(q); 

Answer 6

 if(array.length == 10) { array.splice(0, 1); // this will delete first element in array } 

Answer 7

If you checked to see if the array reached 10 records with array.length , just delete the first element before clicking on the new element. This can be done in several ways, as the Tushar states, array.shift() will be the fastest, but you can really use array.splice() .

It will look like this:

 if(array.length > 10) { array.shift(); array.push(getData(10)); } 

On a side note, instead of using var array = new Array() I suggest you just use var array = []; . This is because a new Javascript keyword sometimes has bad side effects. If, for example, you want to create an array with 1 element that is a digit, and you use var arr = new Array(12); , an array with 12 undefined elements will be created. While var arr = [12]; will create an array with 1 element, number 12.

But I guess this is a small thing to consider.

Answer 8

You can use an object instead ...

 var obj = {}; //your cache object obj[window.performance.now()] = getData(val); //add value, index by microsecond timestamp if(Object.keys(obj).length > 10){ // then if the length ever gets bigger than 10.. var array = Object.keys(obj).sort(); //sort the properties by microsecond asc delete obj[array[0]]; //delete the oldest one } 

Here is a jsFiddle example showing how it works: https://jsfiddle.net/uhkvk4mw/

Answer 9

just check if the length is reached, then click

 if(arr.length > someNumber){ arr.pop(); // pop() will remove the last element }