深入浅出:JavaScript ArrayBuffer 的使用与应用

什么是 ArrayBuffer?

ArrayBuffer 是 JavaScript 中用于表示原始二进制数据缓冲区 的对象。 它是一个固定长度的内存区域,可以用来存储各种类型的数据。 与 JavaScript 数组不同,ArrayBuffer 不能直接读取或写入数据。 它只是一个字节容器

ArrayBuffer 的特点:

  • 固定长度: 创建后长度不可变。
  • 原始二进制数据: 存储的是字节数据,没有特定的数据类型。
  • 不可直接访问: 需要通过 TypedArrayDataView 来访问和操作数据。

如何创建 ArrayBuffer?

javascript 复制代码
// 创建一个 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);

console.log(buffer.byteLength); // 输出: 16

TypedArray:赋予 ArrayBuffer 数据类型

TypedArray 是一组用于操作 ArrayBuffer 的类型化数组。 它们允许你以特定的数据类型(例如:整数、浮点数)来读取和写入 ArrayBuffer 中的数据。

常见的 TypedArray 类型包括:

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

示例:使用 Uint8Array 操作 ArrayBuffer

javascript 复制代码
// 创建一个 8 字节的 ArrayBuffer
const buffer = new ArrayBuffer(8);

// 创建一个 Uint8Array 视图,指向 ArrayBuffer
const uint8Array = new Uint8Array(buffer);

// 设置 ArrayBuffer 中的值
uint8Array[0] = 10;
uint8Array[1] = 20;
uint8Array[2] = 30;

console.log(uint8Array); // 输出: Uint8Array(8) [10, 20, 30, 0, 0, 0, 0, 0]
console.log(buffer); // 输出: ArrayBuffer(8) { byteLength: 8 }

DataView:更灵活的数据访问

DataView 提供了更灵活的方式来读取和写入 ArrayBuffer 中的数据。 它可以让你以任意字节偏移量和数据类型来访问数据,而无需像 TypedArray 那样必须从缓冲区的开头开始。

示例:使用 DataView 操作 ArrayBuffer

javascript 复制代码
// 创建一个 8 字节的 ArrayBuffer
const buffer = new ArrayBuffer(8);

// 创建一个 DataView 视图,指向 ArrayBuffer
const dataView = new DataView(buffer);

// 设置 ArrayBuffer 中的值 (以不同的数据类型)
dataView.setInt8(0, 10); // 从偏移量 0 开始,写入一个 8 位有符号整数
dataView.setUint16(1, 256, true); // 从偏移量 1 开始,写入一个 16 位无符号整数 (小端字节序)
dataView.setFloat32(3, 3.14, false); // 从偏移量 3 开始,写入一个 32 位浮点数 (大端字节序)

console.log(dataView.getInt8(0)); // 输出: 10
console.log(dataView.getUint16(1, true)); // 输出: 256
console.log(dataView.getFloat32(3, false)); // 输出: 3.140000104904175

希望这篇文章能够帮助你更好地理解和使用 ArrayBuffer! 别忘了点赞、评论和分享哦!

相关推荐
用户4099322502121 分钟前
快速入门Vue3,插值、动态绑定和避坑技巧你都搞懂了吗?
前端·ai编程·trae
CondorHero2 分钟前
Environment 源码解读
前端
残冬醉离殇4 分钟前
别再傻傻分不清!从axios、ElementPlus深入理解SDK与API的区别
前端
CodeSheep13 分钟前
稚晖君官宣,全球首个0代码机器人创作平台来了!
前端·后端·程序员
向上的车轮16 分钟前
Actix Web 入门与实战
前端·rust·actix web
Every exam must be23 分钟前
10.27 JS学习12
开发语言·javascript·学习
程序00739 分钟前
微信小程序app.js错误:require is not defined
javascript·微信小程序·小程序
Mintopia42 分钟前
🧬 生物识别 + AIGC:Web端个性化服务的技术协同路径
前端·javascript·aigc
Mintopia44 分钟前
🧠 Next.js 安全防线:从 CSRF 到 XSS 的黑魔法防护 🌐⚔️
前端·javascript·全栈
用户6120414922131 小时前
基于JSP+Servlet+JDBC学生成绩管理系统
java·前端·javascript