Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
如何利用JavaScript操作二进制数据(如ArrayBuffer和Blob)?_创想鸟

如何利用JavaScript操作二进制数据(如ArrayBuffer和Blob)?

JavaScript通过ArrayBuffer、TypedArray、DataView和Blob处理二进制数据。1. ArrayBuffer是固定长度的二进制缓冲区,需通过TypedArray或DataView操作;2. TypedArray如Uint8Array提供类型化视图,可直接读写数值;3. DataView支持指定字节序(小端或大端),适用于跨平台协议解析;4. Blob表示不可变的二进制大对象,常用于文件下载和上传;5. 可通过Uint8Array将ArrayBuffer转为Blob,Blob也可通过arrayBuffer()方法异步转回ArrayBuffer。掌握这些类型可有效处理文件操作、网络传输和多媒体数据。

如何利用javascript操作二进制数据(如arraybuffer和blob)?

JavaScript 提供了多种方式来处理二进制数据,尤其是在处理文件、网络传输、图像音频操作或与 Web API 交互时非常有用。核心的类型包括 ArrayBuffer、TypedArray(如 Uint8Array)、DataView 和 Blob。下面介绍如何使用它们进行常见操作。

ArrayBuffer 与 TypedArray:读写原始二进制数据

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

例如:创建并写入数据

let buffer = new ArrayBuffer(8); // 8 字节缓冲区 let view = new Uint8Array(buffer); // 使用 8 位无符号整数视图 view[0] = 255; view[1] = 10;

使用不同视图访问同一段内存

let intView = new Int32Array(buffer); // 按 32 位整数解释 console.log(intView[0]); // 输出: 660607 (由前4个字节组合而来)

DataView:灵活控制字节序

当你需要精确控制字节顺序(如处理网络协议或文件格式),DataView 更适合,因为它允许指定 littleEndian 参数。

示例:跨平台读取 16 位整数

let buffer = new ArrayBuffer(4); let dataView = new DataView(buffer); dataView.setUint16(0, 0x1234, true); // 小端模式写入 let value = dataView.getUint16(0, true); // 小端读取,得到 0x1234

Blob:表示不可变的二进制大对象

Blob 常用于文件操作,比如上传下载、生成文件链接等。它可以包含 ArrayBuffers、字符串或其他 Blob。

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

创建一个 Blob 并生成下载链接

let blob = new Blob([“Hello”, Uint8Array.from([1, 2, 3])], { 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); // 清理

ArrayBuffer 与 Blob 的相互转换

在实际开发中,经常需要在这两种格式之间转换。

ArrayBuffer 转 Blob

let buffer = new ArrayBuffer(8); let blob = new Blob([new Uint8Array(buffer)], { type: “application/octet-stream” });

Blob 转 ArrayBuffer

blob.arrayBuffer().then(function(buffer) { let bytes = new Uint8Array(buffer); console.log(bytes); });

基本上就这些。掌握这些基础操作后,你就能处理图片压缩、WebSocket 二进制消息、File API 文件读取等场景中的二进制数据了。关键是理解 ArrayBuffer 是“内存块”,而 TypedArray/DataView 是“查看方式”,Blob 是“文件式封装”。

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

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何通过 JavaScript 的 File API 在浏览器中实现文件的分片上传?
上一篇 2025年12月20日 17:48:03
使用纯JavaScript实现按钮控制音频播放/暂停
下一篇 2025年12月20日 17:48:14

相关推荐

  • Java多线程API调用中Future.get()返回null的解决方案

    本文旨在解决%ignore_a_1%api调用中`future.get()`方法返回`null`的常见问题。当使用`callable`和`executorservice`并发执行api请求并尝试获取结果时,如果流读取逻辑不当,可能导致获取到的数据为空。文章将详细解释问题根源,并提供使用`string…

    2026年9月21日
    000
  • 交管12123处理非本人车辆违章怎么办_交管12123处理非本人车辆违章攻略

    可通过“交管12123”APP处理非本人名下车辆的交通违法,但需先完成备案。备案方式有两种:一是扫码备案,由车主生成二维码后驾驶人扫描并提交信息;二是短信验证备案,输入车牌号、发动机号后六位,系统向车主手机发送验证码,输入后完成备案。备案成功后,进入APP【更多】→【违法处理】,选择已备案车辆,查看…

    2026年9月21日
    000
  • 升级后如何检查兼容性

    检查兼容性是升级后确保系统稳定的关键,需先确认硬件配置与驱动支持,再验证软件运行及业务流程正常,最后通过系统日志排查潜在错误,逐步排除风险。 系统或软件升级后,检查兼容性是确保各项功能正常运行的关键步骤。直接进入实际使用前,花时间验证兼容性可以避免数据丢失、服务中断等问题。 检查硬件和驱动支持 某些…

    2026年9月21日
    000
  • .com网站安全维护_保障.com网站稳定的措施

    答案:保障.com网站稳定需加强安全防护、定期备份、实时监控和应急准备。部署防火墙、更新系统、使用HTTPS、限制端口;制定自动备份并异地存储,定期恢复测试;利用监控工具检测可用性与异常流量,优化加载速度;建立应急流程,严格权限管理,定期演练。细节执行到位才能确保长期安全稳定运行。 确保.com网站…

    2026年9月21日
    100
  • 哔哩哔哩怎么设置点赞和投币记录为私密_哔哩哔哩点赞投币隐私设置

    1、进入哔哩哔哩App个人主页,点击头像进入个人空间,通过右上角菜单进入设置;2、开启“隐藏我的点赞”功能,防止他人查看点赞记录;3、在隐私权限设置中关闭“展示投币动态”,限制投币行为的公开显示;4、手动检查并删除或隐藏历史动态中的互动记录,确保过往点赞与投币不被他人可见。 如果您希望在使用哔哩哔哩…

    2026年9月21日
    100
  • PostgreSQL地理位置数据按距离排序的最佳实践:数据库层优化策略

    在处理大量地理位置数据并按距离排序时,将排序逻辑下推至数据库层(如postgresql)是更优的选择。这种方法能有效减少应用层的数据传输和内存消耗,充分利用数据库的计算能力,从而提升整体性能和资源利用率,而非在spring boot应用服务层进行排序。 1. 地理位置排序的需求与挑战 在现代Web应…

    2026年9月21日
    100
  • Flyway配置中安全使用环境变量的实践指南

    flyway配置中直接暴露数据库连接参数存在安全隐患。本文详细阐述了如何通过命令行参数和api调用两种主要方式,将环境变量安全地集成到flyway配置流程中。通过外部化管理敏感信息,可以有效提升数据库迁移配置的安全性、灵活性和可维护性,避免将凭证硬编码到配置文件中。 在数据库迁移实践中,将敏感的数据…

    2026年9月21日
    100
  • 如何为VSCode设置最小化到系统托盘?

    VSCode不支持内置最小化到系统托盘功能,可通过第三方工具实现:Windows推荐使用RBTray或AutoHotkey脚本,Linux可借助AppIndicator扩展,macOS则依赖Dock最小化及辅助工具视觉隐藏。 VSCode 本身不提供内置的“最小化到系统托盘”功能,但可以通过一些方法…

    2026年9月21日
    000
  • 怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧

    怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧

    通过Memoji、第三方贴纸应用和iOS 16+抠图功能,可为情侣打造专属表情包;结合自定义聊天背景、语音消息、共享相册等方式,既能提升聊天趣味性,又能保持沟通效率,增强情感连接。 在iPhone上设置情侣专属表情,与其说是开启一个内置的“情侣模式”,不如说是巧妙利用iOS系统和第三方应用提供的各种…

    2026年9月21日 • 用户投稿
    100
  • Java OOP如何使用内部类提高代码组织性

    内部类提升Java代码组织性与封装性,成员内部类增强封装,静态内部类分离逻辑,局部与匿名内部类简化回调,私有内部类隐藏实现细节。 内部类在Java面向对象编程中是一种有效提升代码组织性和封装性的工具。通过将一个类定义在另一个类的内部,可以更好地表达类之间的逻辑关系,控制访问权限,并减少命名冲突。合理…

    2026年9月21日
    000
  • PHP 数组值比较与嵌套数组过滤教程

    本教程详细讲解如何在 PHP 中比较一个简单数组与一个复杂嵌套数组,并根据特定条件(如文件名匹配)过滤嵌套数组中的所有相关子数组。我们将通过识别非匹配项的索引,然后从所有子数组中移除这些项并重新索引,实现精确的数据筛选。 问题背景 在 php 开发中,我们经常会遇到需要处理结构复杂的数组数据。例如,…

    2026年9月21日
    100
  • Java集合框架在数据处理中的应用实例

    使用Set去重:通过LinkedHashSet去除标签重复并保持顺序;2. Map统计频次:利用HashMap统计单词出现次数;3. List结合Comparator排序:按年龄升序、姓名降序排列用户;4. 集合嵌套处理数据:用Map组织部门与员工列表。集合框架提升数据处理效率与代码可读性。 Jav…

    2026年9月21日
    000
  • 如何使用XGBoost训练AI大模型?优化机器学习模型的步骤

    XGBoost并非用于训练GPT类大模型,而是擅长处理结构化数据的高效梯度提升算法,其优势在于速度快、准确性高、支持并行计算、内置正则化与缺失值处理,适用于表格数据建模;通过分阶段超参数调优(如学习率、树深度、采样策略)、结合贝叶斯优化与交叉验证,并配合特征工程、数据预处理和集成学习等关键步骤,可显…

    2026年9月21日
    000
  • 美图秀秀导出视频卡住 美图视频保存失败修复方案

    导出视频卡住或保存失败,通常和设备性能、软件状态或操作方式有关。直接强制退出再尝试是很多人会做的,但更有效的是先排查具体原因。 检查设备资源与软件状态 导出视频是个高负载任务,容易因资源不足中断。 关闭后台应用:尤其是浏览器、游戏或其他大型程序,释放内存和处理器资源。 确认存储空间:确保手机或电脑有…

    2026年9月21日
    000
  • 如何在Java中配置与数据库连接环境

    答案:Java中配置数据库连接需引入JDBC驱动,如MySQL在Maven中添加对应依赖;通过DriverManager或连接池(如HikariCP)获取Connection,使用try-with-resources管理资源;建议将连接参数存入properties文件,并处理常见问题如驱动加载、权限…

    2026年9月21日
    000
  • PHP错误日志怎么查看_PHP错误日志定位与查看方法

    要查看PHP错误日志,首先确定php.ini中error_log路径,若未设置则检查Web服务器(如Apache/Nginx)错误日志;确保log_errors=On、error_reporting合理配置,并通过tail、grep等工具分析日志,结合框架日志和系统日志(如syslog)全面定位问题…

    2026年9月21日
    200
  • 苹果为何把Apple ID改名为Apple Account

    苹果公司宣布将“Apple ID”更名为“Apple Account”,这一变化迅速引发热议。虽然只是名称上的调整,但其背后蕴含着深远的战略考量。 体现服务边界的扩展 随着苹果生态系统日益庞大,原有的“ID”一词已难以全面涵盖用户通过该账户所使用的广泛功能。如今,这一个账户不仅用于设备激活和App …

    2026年9月21日
    100
  • Java Executors类提供哪些线程池方法

    Executors类提供创建线程池的静态方法:newFixedThreadPool创建固定大小线程池,适用于稳定负载;newCachedThreadPool创建可缓存线程池,适合短期异步任务;newSingleThreadExecutor创建单线程池,保证任务顺序执行;newScheduledThr…

    2026年9月21日
    200
  • 夸克Ai搜索如何设置默认_夸克Ai搜索默认引擎更改

    首先在夸克APP中将默认搜索引擎设为AI引擎,再开启相关AI功能开关以启用AI搜索服务。具体步骤:1、打开夸克APP,点击右下角菜单进入设置;2、选择“通用”选项,点击“搜索引擎”;3、选择“AI引擎”或“夸克AI搜索”作为默认服务;4、返回主界面测试搜索关键词,确认AI结果是否展示;5、进入“AI…

    2026年9月21日
    400
  • iPhone 17 Pro如何关闭后台应用刷新

    关闭iPhone后台应用刷新可省电省流量,进入设置→通用→后台App刷新,关闭顶部总开关或单独关闭特定App,还能提升系统流畅度。 虽然目前还没有iPhone 17 Pro,但关闭后台应用刷新的方法在所有iPhone上都是一样的。你可以通过设置里的“通用”选项来管理这个功能,既能省电也能减少数据使用…

    2026年9月21日
    100

发表回复

登录后才能评论
关注微信