当数组达到特定长度时删除javascript数组的最后一个元素

Question

我想在 javascript 中缓存一些数据，但是缓存应该限制为例如 10 个元素。

我可以将对象放在 javascript 数组中，但是将数组限制为 10 个元素的最佳方法是什么？

例子：

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

是否应该手动编写这种机制（例如使用 splice()？）还是有更好的方法在 javascript 中实现这种“缓存”结构？

顺便说一句：在这种特殊情况下，我使用的是 angular。

Answer 1

覆盖缓存数组的push 函数。

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

Plunker

---

为了使其更可重用，我创建了一个返回此类数组的新实例的方法（基于上述代码）。

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

要从数组中删除 first 元素，请使用 shift:

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

Answer 3

这个对象怎么样？

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 4

您可以在Array.prototype 中创建新方法来模拟您的需求。

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 5

简单的定长队列：

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

如果您使用array.length 检查数组是否已达到 10 个条目，则只需在推送新元素之前删除第一个元素。正如 Tushar 所说，这可以通过多种方式完成，array.shift() 将是最快的，但您也确实可以使用array.splice()。

看起来像这样：

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

顺便说一句，我建议您不要使用var array = new Array()，而是直接使用var array = [];。这是因为 Javascript 中的 new 关键字有时会产生不好的副作用。例如，如果您想创建一个包含 1 个元素为数字的数组，并且您使用 var arr = new Array(12);，则将创建一个包含 12 个未定义元素的数组。而var arr = [12]; 将创建一个包含 1 个元素的数组，即数字 12。

但我想这是一件需要考虑的小事..

Answer 8

你可以使用一个对象来代替......

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   
}

这是一个展示其工作原理的 jsFiddle 示例：https://jsfiddle.net/uhkvk4mw/

Answer 9

只要检查是否达到长度然后弹出它

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