Editing Values in Typed Arrays

Question

Using JavaScript I would like to offset the elements in a typed array so that if the original array had values of 0 to 99, the new array would start at 10 and go to 99 leaving 10 empty elements for new data. So if the original array can be viewed as a 10 x 10 grid, I would like to move all data up one row and then enter new data in the bottom row.

I know this can be done using a loop but this method would be too slow for my project which has a much larger array (990 x 1920). I've tried ArrayBuffers and got nowhere.

The problem with the following test method (using subarray) is that although data1 size is specified as 100 it appears to reduce down to the subarray size when applied. I can then find no way to add further data at the end.

function initialize() {

    data = new Uint32Array(100);
    data1 = new Uint32Array(100);

    for (var i = 0; i < data.length; i++) {
    data[i] = i;
    }
    data1 = data.subarray(10);

    console.log(data1);
}

Is there any way other than a loop to offset data in a typed array and add data at the end.

OK, I found a solution at Typed Arrays in Gecko 2: Float32Array concatenation and expansion using Set().

Answer 1

In JavaScript, a typed array is a fixed-length data structure which is based on ArrayBuffer i.e. a pre-allocated piece of memory anyway. Because of that, typed arrays do not have variable-length methods like push, pop etc. So in order to offset a typed array you only have two options.

• Preallocate a lot of memory in advance and shift the 'typed array', which is a actually a view over a memory block

  var SIZE=100;
  var SHIFT=10;
  var buffer = new ArrayBuffer(100000); // preallocate a lot of memory
  var data = new Uint32Array(buffer, 0, SIZE);
  for (var i = 0; i < SIZE; i++) {
      data[i] = i;
  }
  var data1 = new Uint32Array(buffer, Uint32Array.BYTES_PER_ELEMENT*SHIFT, SIZE)
  data1[90]=100; //set the 101st (91st) element
  console.log('data1', data1);//10,11,...98,99,100,0,0,0,0,0,0,0,0,0
  

• Copy the slice of the old data into a new memory area.

  var SIZE=100;
  var SHIFT=10;
  var data = new Uint32Array(SIZE);
  for (var i = 0; i < SIZE; i++) {
      data[i] = i;
  }
  var data1 = new Uint32Array(SIZE)
  data1.set(data.subarray(SHIFT));
  data1[90]=100; //set the 101st (91st) element
  console.log('data1', data1); //10,11,...98,99,100,0,0,0,0,0,0,0,0,0
  

This is a classic space-time tradeoff. The first option takes more memory but less cpu cycles, the second option is the other way round.