Fixed Array and when it reaches the limit remove elements from the end - Javascript

user_10575401 0
Viewed 1993

Good afternoon! I am looking to create a fixed array of length 5, where I want to store recent viewed ids. And when it reaches the limit to delete elements from the end.

For example:

array = ['5', '4', '3', '2', '1'] // Array of 5 with ID's

When I add an id the array want to be like this:

array = ['6', '5', '4', '3', '2'];

And keep going.

Thank you so much for taking your time and I respect your help.

javascript
6 Answers

Heres a function that takes an id, removes the last element if there is more than 5 and then add the id to the start of the array.

function addId(id, array) {
  if (array.length === 5) {
    array.pop();
  }
  array = array.splice(0, 0, id);
  return array;
}
user_46872000

You could unshift the array and adjust the length by the minimum of the wanted length and the old length.

function unshift(array, value) {
    array.unshift(value);
    array.length = Math.min(array.length, 5);
    return array;
}

var array = [],
    i;

for (i = 0; i < 10; i++) console.log(unshift(array, i).join(' '));

user_14476750

You can use proxies to do this and a lot more. For example here's a simple proxy that keeps an array to only 5 elements. This has the advantage that it still acts like an array with length and map and all the other stuff.

This is set so when you unshift, extra elements will fall off the end. You could of course do the opposite with push. You can also manually assign by index so long as the index is less than 5.

var limitedArrayProxy = {
    set: function(target, property, value, receiver) {
      if (!isNaN(property)){
          if(parseInt(property) < 5){
            target[property] = value;
      }
    }
      return true;
    }
  };
  
var limitArray = new Proxy( [], limitedArrayProxy );

// push on a few elements 
limitArray.push(1, 2, 3)
console.log(limitArray)

// unshift a few more
limitArray.unshift(5, 4)
console.log(limitArray)

// now that length is 5 unshift will add to front
// and the last element will fall off
limitArray.unshift(10)
console.log(limitArray)

// manually change index 2
limitArray[2] = "manually changed"
console.log(limitArray)

// it won't let you push more than five
limitArray.push(20)
console.log(limitArray)

// can't add an index of 5 or greater
limitArray[5] = "overflow"
console.log("still 5 element:", limitArray)

// it still acts like an array 
// with length and methods like map
console.log("length", limitArray.length)
console.log("map squares", limitArray.map(i => i**2))

user_38746230 
var array = ['5', '4', '3', '2', '1'];

console.log(array);
queue('6');
console.log(array);

function queue(number){
    array.pop(); //removes last element from array
    array.splice(0, 0, number);//puts new number in first spot
}

This should do the trick. Any time you needed to add an element to the array you would just call that function.

user_92593100

You can modify the Array's push method to remove the last element of the Array with Array.prototype.pop if its length is equal to the maximum length that you want to the Array to be.

var array = ['5', '4', '3', '2', '1'];
array.maxlength = 5;
array.push = function(elem){
  if(this.length==this.maxlength){
    this.pop();
  }
  return [].unshift.call(this, elem);
}
array.push('6');
console.log(array);

user_95131840

You could create a little class managing the ids for you

class Ids {
  constructor() {
    this._store = [];
  }

  add(id) {
    if (this.store.length > 4) this._store.shift();
    this._store.push(id);
  }

  get store() {
    return this._store;
  }
}

const id = new Ids();
id.add(1);
id.add(2);
id.add(3);
id.add(4);
id.add(5);
id.add(6);
id.add(7);
id.add(8);
id.add(9);
console.log(id.store);

user_39936620
Related