JavaScript array views

Question

Via XMLHttpRequest I have received arraybuffer of Uint32 values

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; 
  if (arrayBuffer) {
    pointsArray = new Uint32Array(arrayBuffer);

However, I know that this array has an internal structure. Say, pointsArray length is 10 but I know it contains 5 points X,Y coordinates.

How can I create( hopefully without copy ) two new 'views' at this pointsArray so that I can index X and Y points separately?

Something like:

var xArray = something (pointsArray)
var yArray = something else (pointsArray)

Then, even if pointsArray length is 10, my new two arrays will have a length of 5 so I can index them from 0 to 4.

EDIT: The question is imprecise. It implies that original input array can't be modified so the answer by David Alvarez is correct, despite the stated preference for avoiding any copies, which, in turn, for the best performance may require the format of the input array to be modified.

I can loop but that means I have to make extra calculations on indices/elements sizes. If JavaScript has an approach without me doing it, I would like to know about it. Also, I am not clear, even if I do that, that I won't incur unnecessary copies when I create two separate arrays for X and Y. Basically, I would like not to have to create two new arrays in code via for loop construct, if possible. — Tony
– Tony, Commented Feb 22, 2020 at 21:23
What is the structure of the array ? [x1,y1,x2,y2] or [x1,x2,y1,y2] ? — David Alvarez
– David Alvarez, Commented Feb 22, 2020 at 21:23

tevemadar · Accepted Answer · 2020-02-22 21:31:30Z

2

If there are 5 consecutive X coordinates and then 5 consecutive Y coordinates, you can create arrays on the same buffer:

let xArray = new Uint32Array(arrayBuffer,0,5);
let yArray = new Uint32Array(arrayBuffer,5*4,5);

(where 4 could be Uint32Array.BYTES_PER_ELEMENT)

But otherwise you will have to copy elements around, at least inside the array.

Side note: TypedArrays use platform-native byte order, so generally you can not avoid dealing with all data elements, at least in a conditional branch swapping bytes if necessary, or you can use DataView.getUint32(bytOffset,littleEndian) and you are back on the starting field, accessing elements individually.

answered Feb 22, 2020 at 21:31

tevemadar

13.3k3 gold badges27 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Alvarez · Accepted Answer · 2020-02-23 00:04:17Z

1

What you can do is create functions.

const xArray = () => pointsArray.filter((element, index) => index % 2 === 0)
const yArray = () => pointsArray.filter((element, index) => index % 2 !== 0)

In that manner, no values will be copied or processed until you call xArray() or yArray(). That is what I think is the closest to a "view".

EDIT

If you want to use that "view" to directly access nth element:

const nthX = (n) => pointsArray.filter((element, index) => index % 2 === 0)[n]
const nthY = (n) => pointsArray.filter((element, index) => index % 2 !== 0)[n]

Then call nthX(2) if you want the x at the index 2 (of the array contianing all the x's)

EDIT 2

If you want the same behavior without copying the array you can do:

const nthX = (n) => pointsArray[n*2]
const nthY = (n) => pointsArray[n*2+1]

edited Feb 23, 2020 at 0:04

answered Feb 22, 2020 at 21:33

David Alvarez

1,30613 silver badges23 bronze badges

10 Comments

Tony Over a year ago

Where do I specify index when calling xArray or yArray?

David Alvarez Over a year ago

You do not specify it. You just call xArray(), this will call pointsArray.filter(filterFunction). And filterFunction has this shape : function filterFunction(currentElement, indexOfCurrentElement) { // the element is returned if the function returns true }. More info here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

David Alvarez Over a year ago

And here I directly passed the function returning even indexes for x and not even indeses for y (as you can see with the modulo)

Tony Over a year ago

I don't get it. How do I get x coordinate of a point at index 3, for example? Say I have code like var x3 = something What is something in this case?

David Alvarez Over a year ago

No, xArray() is an array containing all your x's. If you want to use the 3rd x, then call xArray()[2]

|

Collectives™ on Stack Overflow

JavaScript array views

2 Answers 2

Comments

EDIT

EDIT 2

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

EDIT

EDIT 2

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related