JavaScript的TypedArray并不是某一种具体数组，而是一组用于访问原始二进制内存的视图对象的统称。它们建立在ArrayBuffer之上，让开发者能以特定数值格式去读写一段连续的字节区域，从而避免普通数组在存储数字时的额外开销。
一、TypedArray的基本概念
在JavaScript中，所有二进制数据的底层载体都是ArrayBuffer，它代表一段固定长度的原始字节序列，本身不可直接读写。TypedArray的作用就是为这段缓冲区提供一种“带类型的窗口”。例如Int8Array把每1个字节解释为一个8位有符号整数，Float64Array则每8个字节解释为一个双精度浮点数。
常见的TypedArray类型包括Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array，以及用于处理多字节字符的Uint8ClampedArray。它们都继承自同一个抽象基类，拥有length、byteLength、byteOffset等属性，也共享类似set、subarray的方法。
// 创建一个长度为8字节的缓冲区 const buffer = new ArrayBuffer(8); // 以32位有符号整数视图操作它 const int32View = new Int32Array(buffer); int32View[0] = 100; int32View[1] = -20; console.log(int32View.length); // 2，因为8字节可容纳2个32位整数 console.log(buffer.byteLength); // 8 // 用8位无符号视图看同一块内存 const uint8View = new Uint8Array(buffer); console.log(uint8View[0]); // 100的低字节部分
1.1 ArrayBuffer与视图的关系
可以把ArrayBuffer想象成一块 raw memory，而TypedArray是贴在这块内存上的标签，决定了“怎么读、怎么算”。同一块ArrayBuffer可以同时被多个不同类型的TypedArray视图引用，这就方便了在不同粒度下处理数据。
需要注意的是，ArrayBuffer一旦创建，长度就不可变。如果业务需要变长，只能重新分配并拷贝内容。TypedArray视图本身也不拥有内存，只持有对底层缓冲区的引用，因此视图被回收并不代表缓冲区释放。
二、处理二进制数据时的优势
普通JavaScript数组是动态对象，每个元素都可能是一个独立包装的对象，存储数字时不仅占用更多内存，还会带来垃圾回收压力。TypedArray在内存中是连续且同构的，所有元素按固定字节对齐，CPU缓存命中率更高，适合批量数值计算。
在与外部二进制交互时，TypedArray优势尤为明显。比如通过WebSocket接收ArrayBuffer，使用Uint8Array即可逐字节解析协议；用Canvas的ImageData处理像素时，底层就是Uint8ClampedArray；Node.js中读写文件也常借助Buffer（其原型继承自Uint8Array）。
2.1 内存与性能对比
假设要存储一百万个0到255之间的整数。普通数组在V8中每个元素可能占用多倍空间且存在指针跳转；而Uint8Array只需正好一百万字节。以下示例展示两者简单遍历的耗时差异倾向：
// 普通数组 const normal = []; for (let i = 0; i < 1e6; i++) normal.push(i % 256); // TypedArray const typed = new Uint8Array(1e6); for (let i = 0; i < 1e6; i++) typed[i] = i % 256; console.log(normal.length, typed.length); // 遍历性能上TypedArray通常明显更快，且内存占用更小
| 对比维度 | 普通数组 | TypedArray |
|---|---|---|
| 内存布局 | 非连续、对象包装 | 连续、定长字节 |
| 类型约束 | 无，可混合类型 | 单一数值类型 |
| 与二进制交互 | 需手动转换 | 原生映射ArrayBuffer |
| 越界赋值 | 可动态扩容 | 忽略或截断（如ClampedArray） |
2.2 字节序与DataView的互补
TypedArray默认使用运行平台的本机字节序（大多数为小端）。在网络协议等明确大端场景下，若直接以TypedArray读写可能产生错误。此时可配合DataView按指定字节序操作同一块ArrayBuffer。
const buf = new ArrayBuffer(4); const view = new DataView(buf); // 按大端写入一个32位整数 view.setUint32(0, 0x12345678, false); const uint8 = new Uint8Array(buf); console.log(uint8[0].toString(16)); // 12，说明高位在前
DataView本身不是TypedArray，但常与TypedArray搭配使用，弥补了固定字节序视图在跨平台解析时的不足。
三、实际应用中的注意点
使用TypedArray时应留意边界行为。例如Uint8Array对超出范围的赋值会取模，Uint8ClampedArray则会钳位到0到255，这点在图像处理时很有用但容易在别的场景埋坑。另外，TypedArray的slice会创建新的ArrayBuffer副本，而subarray仅生成新视图，共享原缓冲区。
在前后端传输时，若使用fetch获取二进制，应调用arrayBuffer()方法再构造TypedArray；若误将字符串与TypedArray混用，会导致编码错乱。明确数据来源格式，选择合适的Uint8Array或TextDecoder，才能保证二进制处理既快又稳。
// 从二进制字符串转Uint8Array的正确方式 const str = 'hello'; const bytes = new Uint8Array(str.length); for (let i = 0; i < str.length; i++) bytes[i] = str.charCodeAt(i); console.log(bytes); // Uint8Array(5) [104, 101, 108, 108, 111]
总体来看，TypedArray把JavaScript从纯高级语法层面拉到了可精细操控内存的境地。掌握它与ArrayBuffer、DataView的协作方式，是处理文件、网络协议、多媒体以及高性能计算不可或缺的能力。
TypedArray二进制数据JavaScript修改时间：2026-07-31 18:15:29