怎样使用JavaScript操作二进制数据(如ArrayBuffer, Blob)?

JavaScript通过ArrayBuffer、TypedArray、DataView和Blob处理二进制数据。1. ArrayBuffer表示固定长度的二进制缓冲区,需配合Uint8Array等视图读写;不同视图共享缓冲区,字节序影响值解析。2. DataView支持指定字节序(大端或小端)进行精确读写,适用于跨平台数据交换。3. Blob用于文件级操作,可由ArrayBuffer创建并生成下载链接。4. 利用FileReader将Blob转为ArrayBuffer,反之可用new Blob()构造器转换。这些对象广泛应用于文件操作、网络通信、音视频处理等场景,实现高效二进制数据操控。

怎样使用javascript操作二进制数据(如arraybuffer, blob)?

JavaScript 提供了多种方式来处理二进制数据,主要通过 ArrayBufferTypedArrayDataViewBlob 等对象实现。这些工具适用于文件操作、网络通信(如 WebSocket)、音视频处理、Canvas 图像数据等场景。

1. 使用 ArrayBuffer 和 TypedArray 处理内存中的二进制数据

ArrayBuffer 表示一段固定长度的二进制数据缓冲区。它本身不能直接读写,需通过 TypedArray(如 Uint8Array、Int32Array)或 DataView 来操作。

创建 ArrayBuffer:

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

使用 TypedArray 操作数据:

let uint8 = new Uint8Array(buffer);
uint8[0] = 42; // 写入一个字节
console.log(uint8[0]); // 输出: 42

不同视图共享同一缓冲区:

let int32 = new Int32Array(buffer);
int32[0] = 1; // 写入一个 32 位整数(占 4 字节)
console.log(uint8[0]); // 可能为 1,取决于字节序

2. 使用 DataView 精确控制读写(支持跨平台字节序)

DataView 允许你以指定字节序(大端或小端)读写数据,适合处理协议数据或需要兼容性的场景。

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

创建 DataView:

let dataView = new DataView(buffer);

写入和读取指定格式的数据:

dataView.setUint16(0, 255, true); // 在偏移 0 处写入 uint16,小端序
let value = dataView.getUint16(0, true); // 读取,结果为 255

3. 将二进制数据转为 Blob(用于文件下载或上传)

Blob 表示不可变的原始二进制数据,常用于文件操作。

从 ArrayBuffer 创建 Blob:

let blob = new Blob([buffer], { type: ‘application/octet-stream’ });

创建可下载的文件链接:

let url = URL.createObjectURL(blob);
let a = document.createElement(‘a’);
a.href = url;
a.download = ‘data.bin’;
a.click();
URL.revokeObjectURL(url); // 释放内存

4. 在 Blob 和 ArrayBuffer 之间转换

常用于读取用户上传的文件或准备发送到服务器的数据。

Blob 转 ArrayBuffer:

let fileReader = new FileReader();
fileReader.onload = function(e) {
  let arrayBuffer = e.target.result;
  // 可进一步用 DataView 或 TypedArray 处理
};
fileReader.readAsArrayBuffer(blob);

ArrayBuffer 转 Blob:

let newBlob = new Blob([arrayBuffer], { type: ‘application/json’ });

基本上就这些。掌握 ArrayBuffer 配合 TypedArray 或 DataView 的使用,再结合 Blob 进行文件级操作,就能灵活处理大多数前端二进制任务。常见于图片压缩、音频分析、WebSocket 二进制消息、PDF 生成等场景。

以上就是怎样使用JavaScript操作二进制数据(如ArrayBuffer, Blob)?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JavaScript中的Symbol.iterator属性如何用于自定义迭代行为?
上一篇 2025年12月20日 18:50:06
如何编写一个 Babel 插件来自动转换代码中的潜在逻辑错误?
下一篇 2025年12月20日 18:50:20

相关推荐

  • PHP如何实现视频留言评论_PHP实现视频留言评论功能

    答案:通过数据库设计、前端表单、后端处理和评论展示四步实现PHP视频留言功能。1. 创建comments表存储信息;2. 构建表单提交昵称与评论;3. 用add_comment.php接收并存入数据库;4. 在页面读取并安全输出评论,防止XSS。 要实现视频留言评论功能,PHP可以结合前端页面、数据…

    2026年9月22日
    000
  • Java中如何区分逻辑错误和系统异常

    系统异常是程序运行中由JVM抛出的RuntimeException,如空指针、数组越界,会导致程序中断并打印堆栈;逻辑错误是程序语法正确但结果不符预期,如条件写反、循环次数错误,不会崩溃但行为异常。两者区别在于是否抛出异常、是否中断执行及调试方式不同,需通过防御性编程、单元测试和日志调试加以防范。 …

    2026年9月22日
    000
  • 歧路旅人2兑换码是什么 八方旅人2最新2025兑换码大全

    歧路旅人2最新通用兑换码:qlyrdldbz2025、qdn4xkcndx、qllrdldbz等,可在游戏内商城直接使用,领取剑士黄金武器皮肤、双倍经验加成及1000叶币,奖励丰富限时有效,先到先得。 无限资源畅玩|游戏辅助工具: 2025年最新可用兑换码汇总如下: 1、兑换码: qlyrdldbz…

    2026年9月22日
    000
  • LINUX怎么查看哪个进程占用了某个端口_LINUX端口占用查询方法

    使用ss或lsof命令可快速查看端口占用情况,如sudo ss -tulnp | grep :端口号或sudo lsof -i :端口号,结合PID进一步通过ps或/proc文件系统定位进程详情。 在Linux系统中,查看某个端口被哪个进程占用,常用的方法是使用命令行工具结合网络和进程信息进行查询。…

    2026年9月22日
    000
  • 夸克浏览器电脑网页版访问入口 夸克官网主页链接地址

    夸克浏览器电脑网页版访问入口是https://www.quark.cn/,用户可直接在浏览器地址栏输入该链接访问,其界面采用极简设计并集成智能搜索、网盘服务与跨设备同步等功能。 立即进入“☞☞☞☞☞点击夸克资源网(永久免费)入口☜☜☜☜☜”; 立即进入“☞☞☞☞☞点击夸克浏览器电脑网页版访问入口☜☜…

    2026年9月22日
    500
  • 抖音小店如何运营?普通人开店选品与推广的实用策略

    抖音小店如何运营?普通人开店选品与推广的实用策略抖音小店如何运营?普通人开店选品与推广的实用策略抖音小店如何运营?普通人开店选品与推广的实用策略抖音小店如何运营?普通人开店选品与推广的实用策略

    新手做抖音小店最现实的问题是没钱投广告和没专业团队,解决方法是抓住选品和推广两个核心环节。一、选品要找市场需求高且利润合理的商品,避开竞争激烈或太冷门的品类,结合多平台数据测试;二、前期重点用“商品卡”推广,通过短视频展示产品使用场景并挂链接引流,成本低且适合测试;三、适当尝试直播积累经验,但不依赖…

    2026年9月22日 用户投稿
    400
  • Spring Boot 应用中的单元测试、Mockito 和集成测试:最佳实践

    第一段引用上面的摘要: 本文旨在帮助初学者理解在 Spring Boot 应用中何时以及如何使用 JUnit、Mockito 和集成测试。我们将探讨这些测试框架在 Controller、Service 和 Repository 层中的应用,并提供示例说明何时使用 Mockito 模拟对象,以及何时使…

    2026年9月22日
    000
  • 如何查询命令所属包 yum provides反向查找

    如何查询命令所属包 yum provides反向查找如何查询命令所属包 yum provides反向查找如何查询命令所属包 yum provides反向查找如何查询命令所属包 yum provides反向查找

    使用 yum provides 可以查找某个命令或文件属于哪个软件包,解决“command not found”问题。1. 使用时建议带上完整路径,如 yum provides /usr/sbin/ifconfig;2. 支持通配符模糊查找,如 yum provides */python3;3. 若…

    2026年9月22日 用户投稿
    000
  • Karate框架中处理带方括号和日期范围的GET请求参数

    本文旨在解决Karate框架中构建包含复杂、带方括号(如filters[start_date])及日期范围的GET请求参数时遇到的URL编码问题。通过对比直接定义查询对象和使用param关键字的方法,详细阐述了如何正确地构造URL,确保参数格式符合预期,从而有效进行API测试。 1. 问题背景与挑战…

    2026年9月22日
    000
  • RAID 0阵列对NVMe SSD性能的提升与数据安全风险分析

    RAID 0通过多NVMe SSD并行提升读写性能,理论速度翻倍且显著优化高负载响应,但无冗余导致任一硬盘故障即全阵列崩溃,数据恢复极难,仅建议用于可接受高风险的临时工作或性能优先场景,并必须配合外部备份。 raid 0通过将数据条带化分布在多个存储设备上,理论上可提升读写性能。在搭配nvme ss…

    用户投稿 2026年9月22日
    200
  • SonyCatalyst如何制作高质量AI视频?专业工具剪辑AI内容的指南

    Sony Catalyst通过素材筛选、视觉修正、色彩校正、细节雕琢与音频优化,将AI生成的粗胚视频精修为具备叙事感与视觉一致性的专业作品,其强大色彩管理、稳定器与降噪工具有效解决AI视频的抖动、噪点、色彩偏差等问题,并支持高分辨率素材处理与跨平台输出,实现AI内容与传统剪辑流程的高效融合。 ☞☞☞…

    2026年9月22日
    000
  • 谷歌浏览器窗口透明边框显示异常如何修复

    首先尝试修改快捷方式添加–disable-gpu –disable-software-rasterize参数,若可正常运行则关闭硬件加速,并重置chrome://flags实验功能及清除ShaderCache缓存文件。 谷歌浏览器出现窗口透明边框显示异常,通常和硬件加速或GP…

    2026年9月22日
    000
  • windows11怎么开启或关闭Hyper-V虚拟机_windows11虚拟化功能设置教程

    windows11怎么开启或关闭Hyper-V虚拟机_windows11虚拟化功能设置教程windows11怎么开启或关闭Hyper-V虚拟机_windows11虚拟化功能设置教程windows11怎么开启或关闭Hyper-V虚拟机_windows11虚拟化功能设置教程windows11怎么开启或关闭Hyper-V虚拟机_windows11虚拟化功能设置教程

    首先确认硬件支持并开启CPU虚拟化,再根据系统版本通过图形界面或命令行启用Hyper-V,操作后重启生效,最后使用Hyper-V管理器验证状态。 如果您在使用Windows 11时需要运行虚拟机或兼容特定模拟器,可能需要开启或关闭Hyper-V功能。该功能依赖于系统版本和硬件支持,操作后需重启生效。…

    2026年9月22日 用户投稿
    100
  • VSCode配合Quartus开发FPGA(环境设置教程,提高开发效率)

    使用VSCode配合Quartus开发FPGA可提升效率,核心是结合VSCode的代码编辑功能与Quartus的编译仿真能力。首先安装Quartus、VSCode及Python,再安装VHDL/Verilog插件和Makefile Tools等扩展。配置系统环境变量,将Quartus命令路径加入PA…

    2026年9月22日
    100
  • 如何在Dask中训练AI大模型?分布式数据处理的AI训练技巧

    如何在Dask中训练AI大模型?分布式数据处理的AI训练技巧如何在Dask中训练AI大模型?分布式数据处理的AI训练技巧如何在Dask中训练AI大模型?分布式数据处理的AI训练技巧如何在Dask中训练AI大模型?分布式数据处理的AI训练技巧

    Dask在处理超大规模数据集时的独特优势在于其Python原生的分布式计算能力,能无缝扩展Pandas和NumPy的工作流,突破单机内存限制,实现高效的数据预处理与模型训练。它通过惰性计算、分块处理和内存溢写机制,支持TB级数据的并行操作,相比Spark提供了更贴近Python数据科学生态的API和…

    2026年9月22日 用户投稿
    100
  • 抖音小店网页版怎么登录?抖音我的小店在哪里

    随着抖音电商平台的快速发展,越来越多的商家选择入驻该平台。作为商家运营的重要工具之一,抖音小店网页版为店铺管理带来了诸多便利。那么,如何正确登录抖音小店网页版?又该如何找到“我的小店”?下面将为您详细介绍。 一、为什么需要登录抖音小店网页版? 通过抖音小店网页版,商家可以高效地进行商品管理、订单处理…

    2026年9月22日
    000
  • 如何设置Linux用户磁盘配额 xfs_quota配置完整流程

    如何设置Linux用户磁盘配额 xfs_quota配置完整流程如何设置Linux用户磁盘配额 xfs_quota配置完整流程如何设置Linux用户磁盘配额 xfs_quota配置完整流程如何设置Linux用户磁盘配额 xfs_quota配置完整流程

    linux用户磁盘配额是通过xfs_quota工具配置,以限制用户或组的磁盘空间和文件数量。1. 确认文件系统为xfs并安装xfsprogs;2. 修改/etc/fstab启用usrquota和grpquota后重新挂载;3. 使用xfs_quota初始化数据库;4. 用limit命令设置用户或组的…

    2026年9月22日 用户投稿
    000
  • php-gd怎么应用复古滤镜_php-gd图像怀旧色调处理

    使用PHP-GD库实现复古滤镜主要通过色调偏移和色彩调整模拟老照片效果。1. 色调偏黄褐色:先转灰度,再用imagefilter添加棕黄色调;2. 手动像素级调整:逐像素计算灰度并赋予暖色系值,降低饱和度;3. 增强质感:结合对比度降低与轻微模糊提升真实感;4. 示例流程包括加载图像、应用滤镜、输出…

    2026年9月22日
    100
  • Evernote如何设置智能文件夹 Evernote搜索语法的高级应用

    通过保存搜索实现智能文件夹,利用关键词组合、元数据过滤及通配符提升Evernote笔记检索效率,具体步骤包括创建高级搜索语法、保存搜索项、使用tag:、created:等属性筛选及filetype:附件类型查找。 如果您希望在Evernote中更高效地组织和查找笔记,但发现传统的笔记本分类难以满足复…

    2026年9月22日
    000
  • win11家庭版怎么升级到专业版_win11家庭版升级到专业版操作方法

    可通过系统设置输入专业版密钥升级,2. 或使用Media Creation Tool就地升级保留文件,3. 企业用户还可通过命令提示符部署KMS密钥激活,三种方法均能将Windows 11家庭版升级为专业版。 如果您希望在保留现有文件和设置的情况下,将功能较为基础的Windows 11家庭版升级为支…

    2026年9月22日
    1400

发表回复

登录后才能评论
关注微信