当前位置: 首页 > web >正文

19. 什么是 TypedArray

总结

  • TypedArray(类型化数组)是 JavaScript 中用于操作二进制数据的特殊数组。
  • 它提供了对 ArrayBuffer 的结构化访问,用于处理原始二进制数据,如图像、音频、网络协议等。
  • 常见类型包括:Int8ArrayUint8ArrayInt16ArrayUint16ArrayFloat32ArrayFloat64Array 等。
  • TypedArrayArrayBuffer 的“视图”,不直接操作内存,而是通过 DataViewTypedArray 本身。

为什么需要 TypedArray

  • JavaScript 原生数组(Array)是动态类型、自动扩容的,不适合直接操作二进制数据。
  • TypedArray 提供了更高效、更底层的访问方式,适用于以下场景:
    • WebSocket 传输
    • Canvas 图像处理
    • 音频/视频处理
    • 文件读取(如通过 FileReader
    • WebGL 数据传递

核心概念

1. ArrayBuffer

  • 表示原始的二进制缓冲区(一块内存区域)。
  • 不能直接操作,需要通过 TypedArrayDataView 来访问。
const buffer = new ArrayBuffer(16); // 分配 16 字节内存

2. TypedArray

  • 提供对 ArrayBuffer 的类型化访问。
  • 每种类型对应不同的字节数。
类型名每个元素大小(字节)描述
Int8Array1有符号 8 位整数
Uint8Array1无符号 8 位整数
Int16Array2有符号 16 位整数
Uint16Array2无符号 16 位整数
Int32Array4有符号 32 位整数
Uint32Array4无符号 32 位整数
Float32Array432 位浮点数
Float64Array864 位浮点数

3. DataView

  • 提供对 ArrayBuffer 的灵活访问,可以按任意偏移和类型读写数据。
const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
view.setInt32(0, 0x12345678, true); // 小端模式写入

示例代码

创建并操作 TypedArray

const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);intView[0] = 100;
intView[1] = 200;console.log(intView); // Int32Array [100, 200]

多视图访问同一内存

const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);
const byteView = new Uint8Array(buffer);intView[0] = 0x12345678;
console.log(byteView); // Uint8Array [0x78, 0x56, 0x34, 0x12, 0x00, 0x00, 0x00, 0x00]

注意事项

  • TypedArray 是类数组对象,具有 lengthbufferbyteOffset 等属性。
  • 不支持 pushpop 等方法,但可以使用 set()subarray() 等方法操作。
  • 所有操作都是基于底层内存的,需要注意字节顺序(大端/小端)。
  • TypedArray 可以通过 slice()map()filter() 等方法创建新数组。

使用场景

场景应用说明
图像处理通过 Canvas 获取像素数据,使用 Uint8ClampedArray 操作
音频处理使用 AudioBufferFloat32Array 处理音频采样
WebSocket 通信接收和发送二进制数据(如 ArrayBuffer
文件读取使用 FileReader.readAsArrayBuffer() 读取文件
WebGL 渲染向 GPU 传递顶点数据等

http://www.xdnf.cn/news/17889.html

相关文章:

  • buildroot 简单介绍
  • LeetCode Day5 -- 二叉树
  • 【LeetCode】6. Z 字形变换
  • 【R语言】RStudio 中的 Source on Save、Run、Source 辨析
  • 热门手机机型重启速度对比
  • Vue项目生产环境性能优化实战指南
  • 相机按键功能解析
  • python学习DAY40打卡
  • Easysearch 数据迁移之 INFINI Gateway
  • 天文与航天领域专业计算库介绍
  • Java 大视界 -- Java 大数据机器学习模型在金融资产配置优化与风险收益平衡中的应用(395)
  • 使用dify搭建hr简历助手-上传简历-对接飞书ai表格
  • 八月补丁星期二:微软修复 111 个漏洞
  • Excel怎么筛选重复项?【图文详解】查找/删除重复项?查找重复项公式?如何去重?
  • 飞凌OK3568开发板QT应用程序编译流程
  • HTML5 Canvas实现数组时钟代码,适用于wordpress侧边栏显示
  • C# 反射和特性(元数据和反射)
  • pycharm配置连接服务器
  • 服务器查看 GPU 占用情况的方法
  • 室外 3DVG 基准
  • C# 多线程:并发编程的原理与实践
  • 对线面试官之幂等和去重
  • Python图像处理基础(十三)
  • Ubuntu 20.04 虚拟机安装完整教程:从 VMware 到 VMware Tools
  • 【前端八股文面试题】【JavaScript篇8】作用域链介绍?
  • VMD+皮尔逊+降噪+重构(送报告+PPT)Matlab程序
  • 自动曝光算法参考
  • Datawhale AI夏令营 「2025全球AI攻防挑战赛-赛道一:图片全要素交互认证-生成赛」的赛事项目实践
  • python自学笔记7 可视化初步
  • 使用 Simple Floating Menu 插件轻松实现浮动联系表单