现代JavaScript_ArrayBuffer与类型数组-js教程-PHP中文网

现代JavaScript_ArrayBuffer与类型数组

betcha

发布： 2025-11-22 21:58:02

原创

889人浏览过

ArrayBuffer是固定长度的二进制数据容器，需通过类型数组视图操作；类型数组如Uint8Array可按特定格式读写缓冲区，支持多视图共享同一缓冲，广泛用于文件、网络、音视频等高性能场景。

现代javascript_arraybuffer与类型数组

JavaScript中的ArrayBuffer和类型数组（Typed Arrays）为处理二进制数据提供了高效的方式，尤其适用于WebGL、音频处理、文件操作（如File API）以及网络协议（如WebSocket）等场景。它们弥补了传统JavaScript数组在性能和内存控制方面的不足。

ArrayBuffer：原始二进制数据容器

ArrayBuffer 是一个通用的固定长度的引用类型，用于表示一段二进制数据。它本身不提供直接操作数据的方法，只是一个“数据块”占位符。

创建一个16字节的缓冲区：

const buffer = new ArrayBuffer(16);

可以通过 byteLength 属性查看其大小：

立即学习“Java免费学习笔记（深入）”；

console.log(buffer.byteLength); // 16

一旦创建，ArrayBuffer 的大小不可变。若要操作其中的数据，必须借助视图（view），最常见的就是类型数组。

类型数组：访问ArrayBuffer的桥梁

类型数组是建立在ArrayBuffer之上的视图，允许以特定数据类型解释二进制内容。常见的类型包括：

Int8Array：8位有符号整数
Uint8Array：8位无符号整数
Int16Array：16位有符号整数
Uint16Array：16位无符号整数
Int32Array：32位有符号整数
Uint32Array：32位无符号整数
Float32Array：32位浮点数
Float64Array：64位浮点数

使用类型数组操作ArrayBuffer：

Modoer多功能点评系统2.5 精华版 Build 20110710 GBK

Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步旗舰版系统框架2.增加限制图片

查看详情

const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);
view[0] = 42;
view[1] = 84;
console.log(view[0]); // 42

此时，view 将buffer 解释为两个32位整数（每个4字节），共8字节。对view 的修改直接影响底层的buffer。

多个视图共享同一缓冲区

同一个ArrayBuffer 可以被多个不同类型的视图引用，这在处理复杂数据结构时非常有用。

const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);
const byteView = new Uint8Array(buffer);

intView[0] = 0x12345678;
console.log(byteView); // [120, 86, 52, 18, 0, 0, 0, 0]

上面例子中，写入一个32位整数后，通过8位视图可以看到其字节序列（小端序）。这种能力常用于序列化或解析二进制协议。

实际应用场景

类型数组广泛应用于现代Web开发：

从fetch获取图片或音频资源时，响应体可转为ArrayBuffer
使用FileReader读取本地文件的二进制内容
Web Audio API 中处理音频样本
WebSocket传输二进制消息
Canvas像素操作（ImageData使用Uint8ClampedArray）

例如，读取上传文件的前几个字节判断类型：

fileReader.onload = function(e) {
const buffer = e.target.result;
const bytes = new Uint8Array(buffer, 0, 4);
console.log(bytes); // 输出前4个字节
};
fileReader.readAsArrayBuffer(file);

基本上就这些。ArrayBuffer与类型数组让JavaScript具备了接近系统级的语言对内存的控制能力，是现代高性能Web应用不可或缺的基础。

以上就是现代JavaScript_ArrayBuffer与类型数组的详细内容，更多请关注php中文网其它相关文章！