红宝书第二十二讲:详解JavaScript类型化数组与二进制数据处理
资料取自《JavaScript高级程序设计(第5版)》。
查看总目录:红宝书学习大纲
一、为什么需要类型化数组?
普通JavaScript数组(Array)灵活但低效,不适合处理大量二进制数据(如文件、图像)。类型化数组(Typed Arrays)直接操作内存,解决以下痛点:
二、核心概念:ArrayBuffer与视图
ArrayBuffer:内存中的二進制数据容器(不可直接操作)
// 创建16字节的缓冲区 const buffer = new ArrayBuffer(16);
视图(View):通过指定格式访问缓冲区数据
三、类型化数组的常见类型
类型 | 字节 | 范围 | 典型用途 |
---|---|---|---|
Int8Array | 1 | -128 ~ 127 | 处理有符号整数 |
Uint8Array | 1 | 0 ~ 255 | 图像像素数据(RGBA) |
Float32Array | 4 | ≈±3.4×10³⁸ | 3D图形(WebGL顶点数据) |
BigInt64Array | 8 | -2⁶³ ~ 2⁶³-1 | 处理大整数 |
示例1:用Uint8Array处理图像像素
// 创建3字节缓冲区(RGB颜色值)
const buffer = new ArrayBuffer(3);
const pixels = new Uint8Array(buffer);
// 设置红色(255,0,0)
pixels[0] = 255; // 第一个字节→R通道
pixels[1] = 0; // 第二个字节→G通道
pixels[2] = 0; // 第三个字节→B通道
四、DataView:处理复杂字节顺序
DataView
可灵活指定字节偏移(byteOffset)和字节序(大端/小端),适合跨平台数据传输21。
示例2:读写混合数据类型
const buffer = new ArrayBuffer(8); // 8字节内存
const view = new DataView(buffer);
// 在第0字节写入32位整数(大端序)
view.setInt32(0, 1024, true); // true表示小端序
// 读取后8位字符串(UTF-8)
const strDecoder = new TextDecoder();
console.log(strDecoder.decode(new Uint8Array(buffer, 4))); // 根据内容输出
五、字节序(Endianness):大端与小端
- 大端序(Big-Endian) → 高位字节在前(如
0x1234
存储为12 34
) - 小端序(Little-Endian) → 低位字节在前(如
0x1234
存储为34 12
)
示例3:验证字节序
const buffer = new ArrayBuffer(2);
const view = new DataView(buffer);
view.setInt16(0, 0x1234, true); // 小端模式写入
console.log(view.getUint8(0).toString(16)); // 输出34 → 低位在前
六、实际应用:文件读取与处理
// 读取文件并转为类型化数组
const fileInput = document.querySelector('input[type="file"]');
fileInput.onchange = async (e) => {
const file = e.target.files[0];
const buffer = await file.arrayBuffer();
const uint8Array = new Uint8Array(buffer);
// 处理文件内容...
};
目录:总目录
上篇文章:红宝书第二十一讲:详解JavaScript的模块化(CommonJS与ES Modules)
下篇文章:红宝书第二十三讲:详解DOM事件模型:冒泡与事件委托
脚注
- 《JavaScript高级程序设计(第5版)》讨论类型化数组的历史与在WebGL中的应用 ↩
- 《JavaScript高级程序设计(第5版)》的表格详细描述了各类型化数组的字节及范围 ↩
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。