现代JavaScript_ArrayBuffer与类型数组

千敏小哥_8665

千敏小哥_8665

2025-11-22

947人浏览

原创

ArrayBuffer是固定长度的二进制数据容器,需通过类型数组视图操作;类型数组如Uint8Array可按特定格式读写缓冲区,支持多视图共享同一缓冲,广泛用于文件、网络、音视频等高性能场景。

现代javascript_arraybuffer与类型数组

JavaScript中的ArrayBuffer和类型数组(Typed Arrays)为处理二进制数据提供了高效的方式,尤其适用于WebGL、音频处理、文件操作(如File API)以及网络协议(如WebSocket)等场景。它们弥补了传统JavaScript数组在性能和内存控制方面的不足。

ArrayBuffer:原始二进制数据容器

ArrayBuffer 是一个通用的固定长度的引用类型,用于表示一段二进制数据。它本身不提供直接操作数据的方法,只是一个“数据块”占位符。

创建一个16字节的缓冲区:

const buffer = new ArrayBuffer(16);

可以通过 byteLength 属性查看其大小:

console.log(buffer.byteLength); // 16

一旦创建,ArrayBuffer 的大小不可变。若要操作其中的数据,必须借助视图(view),最常见的就是类型数组。

类型数组:访问ArrayBuffer的桥梁

类型数组是建立在ArrayBuffer之上的视图,允许以特定数据类型解释二进制内容。常见的类型包括:

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

使用类型数组操作ArrayBuffer:

Java注释规范Skills
Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载
const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);
view[0] = 42;
view[1] = 84;
console.log(view[0]); // 42

此时,view 将buffer 解释为两个32位整数(每个4字节),共8字节。对view 的修改直接影响底层的buffer。

多个视图共享同一缓冲区

同一个ArrayBuffer 可以被多个不同类型的视图引用,这在处理复杂数据结构时非常有用。

const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);
const byteView = new Uint8Array(buffer);

intView[0] = 0x12345678;
console.log(byteView); // [120, 86, 52, 18, 0, 0, 0, 0]

上面例子中,写入一个32位整数后,通过8位视图可以看到其字节序列(小端序)。这种能力常用于序列化或解析二进制协议。

实际应用场景

类型数组广泛应用于现代Web开发:

  • 从fetch获取图片或音频资源时,响应体可转为ArrayBuffer
  • 使用FileReader读取本地文件的二进制内容
  • Web Audio API 中处理音频样本
  • WebSocket传输二进制消息
  • Canvas像素操作(ImageData使用Uint8ClampedArray)

例如,读取上传文件的前几个字节判断类型:

fileReader.onload = function(e) {
  const buffer = e.target.result;
  const bytes = new Uint8Array(buffer, 0, 4);
  console.log(bytes); // 输出前4个字节
};
fileReader.readAsArrayBuffer(file);

基本上就这些。ArrayBuffer与类型数组让JavaScript具备了接近系统级的语言对内存的控制能力,是现代高性能Web应用不可或缺的基础。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.31

3171

5

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

2025.10.31

554

9

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

2026.02.12

542

19

c语言const用法
c语言const用法

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

2023.09.20

2298

7

treenode的用法
treenode的用法

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

2023.12.01

2681

7

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

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

2025.12.22

376

20

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

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

2026.01.06

417

22

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

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

2026.05.09

472

25

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

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

2023.08.08

896

5

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
TypeScript+Vue3.0实战教程
TypeScript+Vue3.0实战教程

共122课时 | 36.8万人学习

TypeScript深入讲解—贪吃蛇实战
TypeScript深入讲解—贪吃蛇实战

共30课时 | 3.6万人学习

WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习