偏移量超出了 DataView 的边界，调试器显示它在边界内

Question

Offset is outside the bounds of the DataView我收到以下代码的错误

let data = [...] // some array of Int16
let buf = new ArrayBuffer(data.length);
let dataView = new DataView(buf);

data.forEach((b, i) => {
   dataView.setInt16(i, b);
});

这是 Chrome 中的调试视图

你可以看到它i是47999并且我的缓冲区大小DataView是48000。我在这里缺少什么？

Answer 1

这是因为 Int16Array 每个元素有 2 个字节。因此它.length会比缓冲区的实际大小小两倍，使用它.byteLength来创建一个相同大小的新 ArrayBuffer。
另外，设置 int16 实际上会一次设置两个字节。

因此，在某些时候，您的循环将尝试设置一个不存在的字节，并且它会抛出该错误。

但这并不是您的代码的全部。由于forEach()的迭代值i基于.lengthTypedArray 的值，因此您还需要将其乘以 TypedArray 每个元素的字节数，以在 中设置正确的偏移量DataView.setInt16。

const data = new Int16Array( [ 0xFFFF, 0xFF00, 0x00FF, 0x000 ] );

console.log( "length:", data.length );
console.log( "byteLength:", data.byteLength );

const buf = new ArrayBuffer(data.byteLength);
const dataView = new DataView(buf);

data.forEach( (b, i) => {
  dataView.setInt16( i * data.BYTES_PER_ELEMENT, b );
} );
console.log( new Int16Array( buf ) );
// -1, 255, -256, 0

现在，我不确定你想用这个片段做什么，但是要制作 TypedArray 的副本，那么你必须检查计算机的字节顺序，然后使用 的第三个参数，但你DataView.setInt16( byteOffset, value, littleEndian )可以也简单地做：

const data = new Int16Array( [ 0xFFFF, 0xFF00, 0x00FF, 0x000 ] );
const buf = data.buffer.slice();

// ensure they are not the same ArrayBuffer
data.fill( 0 );
console.log( "data: ", data ); // 0, 0, 0 ,0
console.log( "copy:", new Int16Array( buf ) );
// -1, 256, 255, 0

如果您想从小端交换到大端，那么您也可以通过首先检查计算机的端序并在.map必要时使用交换值来使其比使用 DataView 更快。

const data = new Int16Array( [ 0xFFFF, 0xFF00, 0x00FF, 0x000 ] );
// check for the computer's endianness
const is_little_endian = new Uint8Array( new Uint32Array( [ 0x12345678 ] ).buffer )[ 0 ] === 0x78;
console.log( is_little_endian );

const buf = is_little_endian ?
  data.map( (val) => (val<<8) | (val>>8) & 0xFF ).buffer : data.buffer.slice();

// ensure they are not the same ArrayBuffer
data.fill( 0 );
console.log( "data: ", data ); // 0, 0, 0 ,0
console.log( "copy:", new Int16Array( buf ) );
// -1, 255, -256, 0