JavaScript数组视图

Question

通过XMLHttpRequest，我收到了Uint32值的数组缓冲区

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

但是，我知道这个数组有一个内部结构。比方说，点数组的长度是10，但我知道它包含5个点X，Y坐标。

我如何在这一点上创建(希望没有复制(两个新的"视图"数组，这样我就可以分别索引X和Y点？

类似于：

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

然后，即使pointsArray的长度是10，我的新两个数组的长度也将是5，所以我可以将它们从0索引到4。

编辑：这个问题不精确。这意味着原始输入数组无法修改，因此David Alvarez的答案是正确的，尽管他表示倾向于避免任何副本，而为了获得最佳性能，可能需要修改输入数组的格式。

Answer 1

如果有5个连续的X坐标，然后是5个连续Y坐标，则可以在同一缓冲区上创建数组：

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

(其中4可以是Uint32Array.BYTES_PER_ELEMENT(

但除此之外，您将不得不四处复制元素，至少在数组内部是这样。

附带说明：TypedArray使用平台本机字节顺序，因此通常情况下，您无法避免处理所有数据元素，至少在必要时交换字节的条件分支中是这样，或者您可以使用DataView.getUint32(bytOffset,littleEndian)，然后回到起始字段，单独访问元素。

Answer 2

您所能做的就是创建函数。

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

这样，在调用xArray()或yArray()之前，不会复制或处理任何值。这就是我认为最接近"观点"的地方。

编辑

如果您想使用该"视图"直接访问第n个元素：

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

然后调用nthX(2(，如果您希望x位于(包含所有x的数组的(的索引2

编辑2

如果你想在不复制数组的情况下进行相同的行为，你可以这样做：

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