深入浅出: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! 别忘了点赞、评论和分享哦!

相关推荐
星晨雪海11 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉66611 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
white-persist11 小时前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式
ObjectX前端实验室11 小时前
【前端工程化】脚手架篇 - 模板引擎 & 动态依赖管理脚手架
前端
GISer_Jing11 小时前
前端GIS篇——WebGIS、WebGL、Java后端篇
java·前端·webgl
excel12 小时前
Vue3 EffectScope 源码解析与理解
前端·javascript·面试
细节控菜鸡12 小时前
【2025最新】ArcGIS for JS 实现地图卷帘效果
开发语言·javascript·arcgis
不老刘13 小时前
Base UI:一款极简主义的「无样式」组件库
前端·ui
祈祷苍天赐我java之术13 小时前
Redis 有序集合解析
java·前端·windows·redis·缓存·bootstrap·html
ObjectX前端实验室13 小时前
【react18原理探究实践】React Effect List 构建与 Commit 阶段详解
前端·react.js