类型化数组与 ArrayBuffer

是什么，为什么存在

ArrayBuffer 表示一段按字节计数的二进制存储，本身没有读取某个数字的下标操作。类型化数组是这段存储上的数值视图，例如 Uint8Array 把每个元素解释为一个无符号字节，Float32Array 把每四个字节解释为一个二进制 32 位浮点数。DataView 也是视图，但每次调用都选择字段类型、字节偏移和 字节序（endianness） 。

普通 JavaScript 数组可以混放任意值、改变长度并保留空槽。类型化数组的每个索引都对应一个数值元素，写入时会按目标类型转换，而且视图不能用 push() 增加元素。文件、网络帧、Canvas 像素、音频样本、WebGL 属性和 WebAssembly 线性内存都会把字节交给这套接口。

new ArrayBuffer(n) 创建的是固定长度缓冲区。Node 24 也支持可调整缓冲区：构造时提供 maxByteLength 后，可以在上限内调用 resize()。因此，「所有 ArrayBuffer 创建后都不能改变大小」已经不准确；是否可调整是缓冲区自身的属性。

连续同类型的数值适合类型化数组，混合字段或规定了字节序的外部格式适合 DataView。两者经常配合使用：DataView 解析头部，Uint8Array.subarray() 提供负载窗口。先确定数据格式，再选视图，不要把构造函数名称当成文件格式说明。

工作原理

缓冲区拥有字节，视图只描述怎样访问其中一段。多个视图可以覆盖同一区域；通过任意一个视图写入后，其他视图会从共享字节中读到变化。

新缓冲区中的字节初始化为零。每个视图都有 buffer、byteOffset 和 byteLength；类型化数组还公开按元素计数的 length 与构造函数的 BYTES_PER_ELEMENT。byteOffset 和 byteLength 始终以字节计数，length 才以元素计数。

类型化数组下标读写会执行数值转换。非钳制无符号整数类型会按位宽取模，Uint8ClampedArray 会把结果限制到 0 至 255，浮点类型会舍入到自身能表示的值。BigInt64Array 和 BigUint64Array 接受 bigint，不能把普通 number 直接写入。

多字节类型化数组按运行平台的本机字节序解释数据，API 不提供切换参数。DataView 的多字节读取与写入方法接收 littleEndian 参数；省略或传入 false 表示大端序，传入 true 表示小端序。外部格式规定字节序时，每次调用都明确传参会让协议意图留在代码中。

构造方式决定所有权

构造函数的参数形状决定操作是分配、复制还是共享。尤其要分清 length 和 byteLength，也要分清「转换元素值」与「重新解释原始字节」。

解析二进制输入时可以按一个稳定顺序处理：

1. 明确函数接收 ArrayBuffer 还是某一种视图，并在入口验证类型。
2. 用视图自己的 byteOffset 和 byteLength 限定可访问范围。
3. 在读取每个字段或负载前验证剩余字节数。
4. 按格式规定的有符号性、宽度和字节序读取，再验证业务范围。

示例

下面四个示例依次展示共享字节、带偏移的数据包解析、复制与视图的区别，以及可调整缓冲区。输出由本地 Node 24.14.0 实际执行对应文件得到。

在同一缓冲区上建立两个视图

DataView 以大端序写入两字节头部，Uint8Array 写入后面的负载。两个对象没有互相复制数据。

字节视图直接显示 0x12 和 0x34，因为写入方法明确选择了大端序。subarray(2, 5) 的结束位置不包含在结果中，所以解码范围恰好是三个负载字节。

如果改用 Uint16Array 写头部，字节排列将取决于本机字节序。数据只在同一进程内部消费时这可能符合契约；写文件或网络帧时则不够明确。

解析具有非零偏移的数据包

真实输入常是更大接收缓冲区中的一个窗口。解析器必须把 DataView 限定到这个窗口，而不是从底层缓冲区的索引 0 开始。

function parsePacket(bytes) {
  if (!(bytes instanceof Uint8Array)) {
    throw new TypeError('Expected Uint8Array');
  }

  const headerBytes = 8;
  if (bytes.byteLength < headerBytes) {
    throw new RangeError('Truncated header');
  }

  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
  const payloadLength = view.getUint16(2, false);
  if (headerBytes + payloadLength !== bytes.byteLength) {
    throw new RangeError('Invalid payload length');
  }

  return {
    version: view.getUint8(0),
    flags: view.getUint8(1),
    sequence: view.getUint32(4, false),
    payload: new TextDecoder().decode(bytes.subarray(headerBytes)),
  };
}

const storage = new Uint8Array([
  99, 99, 1, 5, 0, 3, 0, 0, 0, 42, 79, 75, 33, 88,
]);
const packet = storage.subarray(2, 13);
console.log(JSON.stringify(parsePacket(packet)));

{"version":1,"flags":5,"sequence":42,"payload":"OK!"}

storage 前后各有不属于数据包的字节，这会暴露忽略 byteOffset 的实现。长度检查发生在负载解码之前，因此损坏的长度字段不会变成一次越界读取。

示例要求数据包刚好占满输入视图。允许尾随字节的协议可以把等号检查改成上界检查，但这个选择必须来自格式规范，不能由解析器猜测。

对比 subarray() 与 slice()

subarray() 创建共享窗口，slice() 创建独立副本。修改源数组或共享窗口会互相可见，旧副本保持不变。

const source = new Uint8Array([10, 20, 30, 40, 50]);
const windowView = source.subarray(1, 4);
const copy = source.slice(1, 4);

source[2] = 99;
windowView[0] = 77;

console.log([...source]);
console.log([...windowView]);
console.log([...copy]);
console.log(windowView.buffer === source.buffer);
console.log(copy.buffer === source.buffer);

[ 10, 77, 99, 40, 50 ]
[ 77, 99, 40 ]
[ 20, 30, 40 ]
true
false

共享并不一定是错误。同步解析器可以用窗口避免无意义的副本；若数据会被缓存、交给不受控调用方或跨越异步边界，独立副本通常能给出更清楚的所有权。

buffer.slice() 也复制字节，但它的索引相对于整个 ArrayBuffer。手中只有局部视图时，view.slice() 更不容易意外复制窗口之外的数据。

观察长度跟踪视图

省略类型化数组构造函数的 length 时，可调整缓冲区上的视图会跟踪可用长度。显式给出长度的视图不会随扩容增长，缩容越过它的末端时则会暂时越界。

const buffer = new ArrayBuffer(4, { maxByteLength: 8 });
const tracking = new Uint8Array(buffer);
const fixed = new Uint8Array(buffer, 0, 4);

tracking.set([1, 2, 3, 4]);
buffer.resize(6);
tracking.set([5, 6], 4);

console.log(tracking.length, [...tracking]);
console.log(fixed.length, [...fixed]);

buffer.resize(2);
console.log(tracking.length, [...tracking]);
console.log(fixed.length, fixed[0]);

6 [ 1, 2, 3, 4, 5, 6 ]
4 [ 1, 2, 3, 4 ]
2 [ 1, 2 ]
0 undefined

扩容得到的新字节是零，随后示例把它们改成 5 和 6。固定长度视图在缓冲区缩到 2 字节后报告长度 0；这不是一个自动截短到两个元素的新窗口。

可调整缓冲区适合确实需要增长的所有者，不代表每个 API 都应暴露可变长度。消费者依赖稳定大小时，可以传入固定长度视图或在边界复制。

陷阱

把元素数当成字节数

修复方法： 给布局常量加上 Bytes 或 Elements 后缀，并用 Type.BYTES_PER_ELEMENT 完成换算。在构造视图前验证偏移、元素数量和缓冲区边界。

忽略输入视图的偏移

修复方法： 用 new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength) 保留窗口几何信息。测试夹具应在目标数据前后放置哨兵字节，不能总从缓冲区索引 0 开始。

把共享窗口当成副本

修复方法： 在 API 名称或文档中说明返回值是 borrowed view 还是 owned copy。需要隔离时使用 slice()；允许共享时保留 subarray()，并约束谁能在何时写入。

用类型化数组解析规定字节序的格式

修复方法： 对外部多字节字段使用 DataView，为每次读取和写入明确传递 true 或 false。用固定的字节夹具断言数值，不要只做同一实现的编码后解码往返测试。

期待写入自动验证范围

修复方法： 在赋值前验证 Number.isFinite()、整数要求和业务范围。只有格式本身需要取模或饱和转换时，才把类型化数组的转换规则当成所需行为。

混淆数值转换与字节重解释

修复方法： 先写出目标是 value conversion、byte copy 还是 byte reinterpretation。重解释时从 view.buffer、view.byteOffset 和 view.byteLength 构造视图；转换时则直接传入原视图。

缓冲区失效后继续使用视图

修复方法： 为转移或调整大小指定唯一所有者，并在操作后停止使用旧视图。跨线程或异步边界时测试失效路径，不要把「对象仍在作用域内」误当成存储仍可访问。

延伸阅读

• ECMAScript 规范：ArrayBuffer 对象
• ECMAScript 规范：TypedArray 对象
• MDN：ArrayBuffer
• MDN：TypedArray
• MDN：DataView
• Node.js 24：Buffer 与 TypedArray