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

相关推荐
Face几秒前
事件循环
前端·javascript
ONE_Gua2 分钟前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫
CodePencil3 分钟前
CSS专题之盒模型
前端·css
谦谦橘子3 分钟前
服务端渲染原理解析
前端·javascript·react.js
carterwu3 分钟前
umi+模块联邦-配置指南
前端
Mintopia4 分钟前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
无名之逆10 分钟前
Rust 开发提效神器:lombok-macros 宏库
服务器·开发语言·前端·数据库·后端·python·rust
Dontla37 分钟前
函数柯里化(Currying)介绍(一种将接受多个参数的函数转换为一系列接受单一参数的函数的技术)
前端·javascript
xixixin_40 分钟前
为什么 js 对象中引用本地图片需要写 require 或 import
开发语言·前端·javascript
uhakadotcom41 分钟前
Zustand状态管理库:轻量级、高效的React解决方案
前端·javascript·面试