0

0

怎样使用javascriptArrayBuffer_二进制数据如何操作?

紅蓮之龍

紅蓮之龍

发布时间:2025-12-19 14:04:02

|

823人浏览过

|

来源于php中文网

原创

arraybuffer 是 javascript 中操作二进制数据的基础内存容器,需配合 uint8array、int32array 或 dataview 等视图使用;其长度固定,创建后不可变,常用于文件读取、网络请求、canvas 像素处理及 webassembly 等场景。

怎样使用javascriptarraybuffer_二进制数据如何操作?

JavaScript 中的 ArrayBuffer 是操作二进制数据的基础容器,它本身不提供读写能力,必须配合视图(如 Uint8ArrayInt32ArrayDataView)才能使用。核心逻辑是:先申请一段连续内存(ArrayBuffer),再用“视角”去解释这段内存里的字节

创建和分配 ArrayBuffer

最常见的是通过构造函数指定字节数来创建:

  • const buf = new ArrayBuffer(1024); —— 创建 1KB 的空缓冲区
  • const buf = new ArrayBuffer(8); —— 适合存两个 32 位整数(每个占 4 字节)
  • 注意:ArrayBuffer 一旦创建,长度不可变;如需扩容,得新建并手动复制

用类型化数组(TypedArray)读写数据

这是最常用的方式,适合处理同类型、等间隔的数据,比如图像像素、音频采样:

  • const view = new Uint8Array(buf); —— 把缓冲区当 8 位无符号整数数组用
  • view[0] = 255; view[1] = 0; view[2] = 128; —— 直接赋值,自动写入对应字节
  • const ints = new Int32Array(buf); ints[0] = -1; —— 写一个 32 位有符号整数(占 4 字节)
  • ⚠️ 注意:不同视图共享同一段内存,改一个会影响另一个(例如改 Uint8Array[0] 可能影响 Int32Array[0] 的低字节)

用 DataView 精确控制字节序和偏移

当你需要混合类型、指定起始位置、或明确大小端时,DataView 更灵活:

魔法映像企业网站管理系统
魔法映像企业网站管理系统

技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作

下载

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

  • const dv = new DataView(buf);
  • dv.setUint8(0, 42); —— 从第 0 字节写一个 uint8
  • dv.setInt32(4, 123456, true); —— 从第 4 字节写一个 32 位整数,true 表示小端序
  • const val = dv.getFloat64(8, false); —— 从第 8 字节读一个大端双精度浮点数
  • 优点:可跨类型、可重叠、可控制 endianness;缺点:语法稍长,性能略低于 TypedArray(但通常可忽略)

与实际场景对接:文件、网络、Canvas

真实项目中,ArrayBuffer 很少手动构造,多来自外部数据源:

  • 读取文件file.arrayBuffer() 返回 Promise
  • fetch 响应response.arrayBuffer() 获取二进制响应体
  • Canvas 像素ctx.getImageData(0,0,w,h).data.bufferUint8ClampedArray 的缓冲区
  • 传输优化:发送前可直接传 ArrayBufferWebSocket.send()postMessage(),无需转 base64

基本上就这些。关键不是记住所有 API,而是理解「ArrayBuffer 是内存块,视图决定怎么读」这个模型。用熟了,处理图片、音视频、协议解析甚至 WebAssembly 就顺手多了。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

558

2023.09.20

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

334

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

425

2023.10.12

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

544

2023.10.23

Golang WebSocket与实时通信开发
Golang WebSocket与实时通信开发

本专题系统讲解 Golang 在 WebSocket 开发中的应用,涵盖 WebSocket 协议、连接管理、消息推送、心跳机制、群聊功能与广播系统的实现。通过构建实际的聊天应用或实时数据推送系统,帮助开发者掌握 如何使用 Golang 构建高效、可靠的实时通信系统,提高并发处理与系统的可扩展性。

27

2025.12.22

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

140

2026.01.19

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

2

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

58

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

31

2026.03.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号