讲师中心 微信公众号
AI工具推荐 视频效率加速

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

胖磊姑娘_7446

胖磊姑娘_7446

发布时间:2025-10-01 20:10:02

|

429人浏览过

|

来源于php中文网

原创

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

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

在JavaScript中处理二进制数据主要依赖 ArrayBuffer 和 TypedArray。它们为操作原始二进制数据提供了底层支持,常用于文件读取(如图片、音频)、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。

Canvas 内容工厂(网格生成→多页 PDF→SVG 精准复刻)
Canvas 内容工厂(网格生成→多页 PDF→SVG 精准复刻)

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告,或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控,编排:网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词:生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

多个视图共享同一块内存

同一个 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 中自如处理二进制数据。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

相关专题

更多
treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2161

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

316

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

357

2026.01.06

C++ 数据结构与算法实现教程合集
C++ 数据结构与算法实现教程合集

以 C++ 为实现语言,系统讲解核心数据结构与算法,涵盖链表(单链表/双链表/环检测)、栈与队列(单调栈/优先队列)、二叉树(遍历/BST/AVL/红黑树)、哈希表(开地址法/链地址法)、图(邻接表/BFS/DFS/Dijkstra/拓扑排序)、常见排序算法(快排/归并/堆排/计数排序)的实现与复杂度分析,同时分享 LeetCode 刷题技巧、竞赛编程常用模板(二分/前缀和/滑动窗口/动态规划),帮助开发者夯实算法基础。

392

2026.05.09

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

776

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

5383

2024.05.29

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

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

3531

2023.10.23

canva可画使用技巧汇总
canva可画使用技巧汇总

本专题汇集了PHP中文网精心整理的Canva可画新手使用技巧大全,专为零基础用户打造。无论你是想制作精美海报、PPT还是社交媒体配图,这里都有从注册登录、模板搜索到AI辅助设计、导出分享的全流程保姆级教程。通过深入浅出的图文指南,帮助你快速跨越设计门槛,轻松掌握Canva可画的实用操作,让每个人都能成为设计达人!

224

2026.05.19

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

60

2026.09.23

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn