JavaScript中的ArrayBuffer和TypedArray如何操作二进制数据?

JavaScript通过ArrayBuffer提供二进制数据存储,TypedArray实现高效读写,DataView支持灵活的字节序控制,三者结合可处理文件、网络通信等场景中的二进制数据。

javascript中的arraybuffer和typedarray如何操作二进制数据?

在JavaScript中处理二进制数据主要依赖 ArrayBufferTypedArray。它们为操作原始二进制数据提供了底层支持,常用于文件读取(如图片、音频)、WebSocket通信、Canvas像素处理等场景。

ArrayBuffer:二进制数据的容器

ArrayBuffer 是一段固定长度的连续内存区域,用来存储二进制数据。它本身不能直接读写,必须通过 视图(View) 来操作,最常见的视图就是 TypedArray。

创建一个 ArrayBuffer 示例:

let buffer = new ArrayBuffer(8); // 创建 8 字节的缓冲区

立即学习“Java免费学习笔记(深入)”;

此时 buffer 就是一块空的二进制空间,无法直接访问内容。

TypedArray:访问和操作二进制数据的视图

TypedArray 是一组基于 ArrayBuffer 的数组类型,提供不同数据格式的读写能力。常见的有:

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

使用 TypedArray 操作数据示例:

let buffer = new ArrayBuffer(8);
let view = new Uint8Array(buffer); // 使用 Uint8Array 视图
view[0] = 42; // 写入一个字节
view[1] = 255;

现在 buffer 中前两个字节分别是 42 和 255。

多个视图共享同一块内存

同一个 ArrayBuffer 可以被多种 TypedArray 视图访问,这在处理复杂数据结构时非常有用。

例如,用 Float32Array 写入浮点数,再用 Uint8Array 查看其二进制表示:

let buffer = new ArrayBuffer(4);
let floatView = new Float32Array(buffer);
let byteView = new Uint8Array(buffer);

floatView[0] = 1.5;
console.log(byteView); // 输出 [0, 0, 192, 63] —— 1.5 的 IEEE 754 编码

这种能力常用于序列化、解析协议或调试二进制格式。

DataView:更灵活的二进制操作

如果需要精确控制字节序(大端或小端),可以使用 DataView。它比 TypedArray 更灵活,允许在任意偏移位置读写不同类型的值。

示例:

let buffer = new ArrayBuffer(8);
let dataView = new DataView(buffer);

dataView.setUint32(0, 123456, true); // 小端模式写入 32 位整数
dataView.setFloat32(4, 3.14, false); // 大端模式写入浮点数

console.log(dataView.getUint32(0, true)); // 读取小端整数

DataView 特别适合处理网络协议或跨平台数据交换。

基本上就这些。ArrayBuffer 提供存储空间,TypedArray 提供高效访问,DataView 提供精细控制。掌握它们就能在 JavaScript 中自如处理二进制数据。

以上就是JavaScript中的ArrayBuffer和TypedArray如何操作二进制数据?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1525340.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 17:35:50
下一篇 2025年12月20日 17:36:12

相关推荐

  • 使用 Promise 返回值填充数组的正确方法

    本文旨在帮助开发者理解如何在 JavaScript 中正确处理 Promise 返回值,并将其用于填充数组。我们将通过一个实际案例,详细介绍如何使用 .then() 方法来确保在 Promise 完成后,再将解析后的值用于后续代码,避免出现 [object Promise] 的问题。 在 JavaS…

    2025年12月20日
    000
  • 如何实现一个基于WebSocket的多人联机游戏?

    答案:基于WebSocket的多人联机游戏需构建稳定实时通信,通过Node.js等后端技术建立连接,前端使用Canvas或Phaser.js,利用JSON格式传输数据;服务端管理玩家状态并广播更新,采用状态同步策略,结合心跳机制与断线重连保障稳定性,从小型demo逐步扩展,注重安全性与性能优化。 实…

    2025年12月20日
    000
  • 如何实现一个JavaScript的打包器(Bundler)基础功能?

    答案:通过解析AST收集依赖,构建模块图并封装为自执行函数实现打包。首先读取文件内容并解析为AST,提取import路径形成依赖关系;接着从入口文件开始递归分析所有依赖,构建包含每个模块路径、依赖和代码的图结构;然后将每个模块包裹在函数中,通过require机制实现模块间引用,最终生成一个包含所有模…

    2025年12月20日
    000
  • JavaScript中的错误监控和上报系统如何设计?

    通过全局事件捕获JavaScript运行时错误、资源加载失败及未处理的Promise异常;2. 上报数据包含错误详情、设备信息、网络状态等上下文,避免敏感信息;3. 使用navigator.sendBeacon确保上报可靠性,降级使用fetch并支持keepalive;4. 引入采样、去重与节流机制…

    2025年12月20日
    000
  • JavaScript的国际化API如何支持多语言动态切换?

    JavaScript的国际化通过Intl对象实现,结合外部语言资源动态切换界面语言。首先使用Intl.DateTimeFormat、Intl.NumberFormat等格式化日期、数字等内容,再配合JSON语言包管理翻译文本,利用t(key)函数根据当前语言返回对应文案。通过setLanguage(…

    2025年12月20日
    000
  • 怎样使用JavaScript构建一个交互式数据仪表盘?

    答案:使用JavaScript结合HTML/CSS构建交互式数据仪表盘,推荐Chart.js等可视化库实现动态图表。通过HTML布局结构,CSS优化响应式设计,fetch加载数据,并为下拉控件添加事件监听以实时更新图表。利用tooltips、点击交互和导出功能增强用户体验,确保界面简洁且交互流畅,兼…

    2025年12月20日
    000
  • 教程:解决HTTPS会话中缺少’Secure’属性的敏感Cookie问题

    本文旨在解决在HTTPS会话中,即使设置了secure属性,仍然出现“Sensitive Cookie in HTTPS Session Without ‘Secure’ Attribute”漏洞警告的问题。我们将探讨可能的原因,并提供切实可行的解决方案,包括显式设置Http…

    2025年12月20日
    000
  • 如何精确匹配特定字符串:正则表达式技巧详解

    本文旨在帮助读者掌握更精准的正则表达式编写技巧,解决在复杂文本中提取特定信息时遇到的匹配过度问题。通过一个实际案例,详细讲解如何利用否定预查、非捕获组以及巧妙的断言,避免匹配到不需要的字符串,从而获得期望的结果。 在处理文本数据时,正则表达式是强大的工具。然而,编写一个能够精确匹配所需内容,同时避免…

    2025年12月20日
    000
  • 如何使用 JavaScript 根据属性比较两个对象数组

    本文介绍了如何使用 JavaScript 比较两个对象数组,并找出第一个数组中 name 属性包含第二个数组中 name 属性的对象。我们将使用 filter 和 some 方法来实现这一目标,提供清晰的代码示例和解释,帮助你理解和应用这种比较方法。 使用 JavaScript 比较对象数组的属性 …

    2025年12月20日
    000
  • 如何用JavaScript进行实时通信(如WebSockets或WebRTC)?

    WebSockets适用于客户端与服务器间的实时文本通信,如聊天室;WebRTC用于点对点音视频通话和低延迟数据传输,需WebSocket辅助信令交换。 实时通信在现代Web应用中非常关键,比如聊天室、视频会议、在线协作工具等。JavaScript提供了多种方式实现这类功能,主要依赖于 WebSoc…

    2025年12月20日
    000
  • 处理Nuxt中JSON空字符串导致的渲染错误:两种前端解决方案

    本文针对Nuxt应用接收JSON数据中包含空字符串时可能引发的渲染错误,提供了两种前端解决方案。第一种方法是利用JavaScript的filter()函数在数据加载后进行预处理,移除包含空值的整个数据对象;第二种方法是在Vue/Nuxt组件模板中使用v-if指令进行条件渲染,仅当数据字段非空时才渲染…

    2025年12月20日
    000
  • JavaScript中的标签模板(Tagged Templates)在DSL开发中如何应用?

    标签模板通过标签函数自定义模板字符串解析,如html函数转义字符防XSS,sql函数构造安全查询,styled组件定义样式,实现HTML、查询语言、样式等DSL,提升安全性与可读性。 标签模板是JavaScript中一种强大的语法特性,它让开发者可以自定义模板字符串的解析方式。在领域特定语言(DSL…

    2025年12月20日
    000
  • 如何构建一个支持多租户的JavaScript前端应用架构?

    构建多租户前端需以租户上下文为核心,1. 启动时通过子域名或登录信息识别租户并全局管理;2. 动态加载租户品牌配置实现主题隔离;3. 路由与权限结合租户角色控制访问范围;4. 封装请求自动携带租户ID并隔离数据流。 构建支持多租户的前端应用,核心在于隔离租户数据、配置和行为,同时保持代码复用与可维护…

    2025年12月20日
    000
  • 在微前端架构中,如何实现JavaScript沙箱以隔离子应用?

    微前端JavaScript沙箱通过拦截全局操作实现隔离。1. 基于Proxy的动态沙箱劫持window读写,运行时记录变更,卸载时还原;2. 快照沙箱在不支持Proxy时保存window属性快照,卸载时对比恢复,但无法处理不可枚举属性;3. 构建时隔离通过模块化和CSP减少全局污染;4. 针对定时器…

    2025年12月20日
    000
  • 如何利用JavaScript处理和分析大规模数据集的前端展示?

    答案:前端展示大规模数据需采用虚拟滚动、分块加载、Web Workers和数据降采样等技术。虚拟滚动仅渲染可视区域,减少DOM数量;分块与懒加载按需获取数据,减轻初始压力;Web Workers处理密集计算避免主线程阻塞;降采样与Canvas渲染优化图表性能。结合react-window等库可实现流…

    2025年12月20日
    000
  • 如何利用JavaScript构建跨平台的桌面应用,如Electron?

    Electron是GitHub开发的跨平台桌面应用解决方案,结合Chromium和Node.js,支持HTML、CSS、JavaScript构建Windows、macOS、Linux应用;核心分主进程(管理窗口与生命周期)和渲染进程(运行网页内容);创建步骤包括初始化项目、安装Electron、编写…

    2025年12月20日
    000
  • 使用 Promise 返回值填充数组的最佳实践

    本文旨在讲解如何正确地从 Promise 中提取数值,并将其用于后续数组的定义。通过异步获取数据并处理后,我们常常需要将结果用于构建数组。本文将提供一种可靠的方法,避免常见的 top-level-await 错误,确保数据以期望的方式集成到数组中。 在 JavaScript 中,当处理异步操作时,例…

    2025年12月20日
    000
  • 如何实现一个轻量级的虚拟DOM及其Diff算法?

    答案:通过定义VNode、实现render渲染和patch Diff算法,用JavaScript对象模拟DOM并高效更新。首先创建描述DOM结构的VNode函数h;其次递归生成真实DOM的render函数;然后对比新旧VNode,同层比较标签与属性,子节点逐一对比替换;最后示例展示1秒后文本更新仅修…

    2025年12月20日
    000
  • 如何深入理解并应用JavaScript的执行上下文与调用栈?

    执行上下文和调用栈是JavaScript运行核心机制。代码执行时创建全局、函数或eval上下文,经历创建与执行两阶段,变量提升发生在创建阶段;调用栈以LIFO方式管理函数执行顺序,函数调用时入栈,执行完出栈,递归过深会导致栈溢出;通过调试工具观察栈变化、分析变量提升及闭包作用域链可加深理解,有助于排…

    2025年12月20日
    000
  • JavaScript 异步编程:从 Promise 中提取值并在后续代码中使用

    本文旨在解决在 JavaScript 异步编程中,如何从 Promise 对象中提取数值,并在后续代码(例如数组定义)中使用。通过详细的代码示例,展示了如何正确处理 Promise,并避免常见的 top-level-await 错误,确保异步操作的顺利进行,从而构建动态和响应迅速的应用程序。 处理 …

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信