首页 > 其他分享 >[JS] ArrayBuffer、DataView和TypedArray

[JS] ArrayBuffer、DataView和TypedArray

时间:2024-08-29 15:52:53浏览次数:5  
标签:定型 二进制 ArrayBuffer DataView 数组 TypedArray

JavaScript 中数组元素的数据类型是不固定的,number 类型可以是整数也可以是浮点数。这种性质与其它常见语言中的定型数组很不一样,导致不同语言编写的程序在交换数据的时候,需要花费很多时间在数据转换上。

ECMAScript 后来引入了定型数组 TypedArray。TypedArray并不是一个实际存在的数据类型,而是一系列定型数组类型的统称,它包含了 Int8ArrayUint8ArrayInt16ArrayUint16ArrayFloat32Array等等。

这些定型数组只是一种“视图”,通过一种指定的方式解读内存中的二进制数据。

ArrayBuffer

在 JavaScript 中,可以通过 ArrayBuffer 预分配内存。

const buffer = new ArrayBuffer(16);	// 分配 16 个字节

ArrayBuffer 在分配之后就不能再调整大小,可以通过 slice 方法切片出小 buffer。

ArrayBuffer 的粒度为字节 byte,不是比特 bit。

ArrayBuffer 不能直接读写,要通过视图读写。视图指的是 DataView 或者 TypedArray。

ArrayBuffer 存储的是二进制,只是一堆数据,但是数据表达了什么信息是未定义的。我们需要一种“解读方式”,按照一定的规定,才能解读出信息。不同的解读方式可以解读出不同的信息。这里的解读方式就是视图,也就是 DataView 或者 TypedArray。

如下图:

image-20240829151645496

TypedArray

定型数组用于指定一种方式来读写一块buffer。

常见的类型有:

ElementType 字节 说明 等价的C类型
Int8 1 8位有符号整数 signed char
Uint8 1 8位无符号整数 unsigned char
Int16 2 16位有符号整数 short
Uint16 2 16位无符号整数 unsigned short
Int32 4 32位有符号整数 int
Uint32 4 32位无符号整数 unsigned int
Float32 4 32位IEEE-754浮点数 float
Float64 8 64位IEEE-754浮点数 double

创建定型数组的时候,可以指定一个 ArrayBuffer 对象,那么定型数组实例会基于已存在的内存空间创建。

如果不指定已有的 ArrayBuffer 对象,则需要指定定型数组的长度,会自动在内存中分配内部数组缓冲区。

DataView

TypedArray是定型数组,在指定类型之后,就只能以固定大小的“窗口”来观察二进制读出一个数字来。

而 DataView 是一种更灵活的 buffer 视图,它可以通过指定偏移量和 elementType 在 buffer 中的任意位置读写一块数据。

它的特点有:

  • 必须指定 ArrayBuffer 实例才能创建 DataView 实例。
  • 可以指定字节序。
  • 读写操作超出边界时,会报错 RangeError。
image-20240829154621788

应用场景

ArrayBuffer 的关键字是二进制通信

常见的应用场景如下

  • 处理二进制文件: 读取、修改、生成二进制文件(如图像、音频、视频等)。
  • WebSocket 数据传输: 传输二进制数据,如视频流、音频数据等。
  • WebGL 与图形处理: 存储和传递图形数据到 GPU,处理顶点、颜色值等。
  • 音频处理: 生成或修改音频数据,通过 Web Audio API 进行处理。

标签:定型,二进制,ArrayBuffer,DataView,数组,TypedArray
From: https://www.cnblogs.com/feixianxing/p/18386857/javascript-array-buffer-data-view-typed-arr

相关文章

  • Javascript: Blob, File/FileReader, ArrayBuffer, ReadableStream, Response 转换方
    目录先上图各个ObjectArrayBuffer:Blob:File:FileReader:ReadableStream:Response用法举例ArrayBufferBlob,File,FileReaderReadableStream关于ReadableStream的一点总结Response构造函数Parametersblob()先上图各个ObjectArrayBuffer:1.ArrayBuffer是JavaScript......
  • 详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
    详谈JavaScript二进制家族:Blob、File、FileReader、ArrayBuffer、Base64:https://blog.csdn.net/weixin_43025151/article/details/129743443?ops_request_misc=&request_id=&biz_id=102&utm_term=JavaScript%E4%B8%AD%E7%9A%84Blob%E4%BD%A0%E7%9F%A5%E9%81%93%E5%A4%9A%E......
  • 微信小程序蓝牙红外发送ArrayBuffer合并字节数组
    微信小程序中与设备进行通讯时,经常需要在前面加一些字节,或者处理分包的时候需要加一些字节过去,如果在后端很好操作,但是在小程序中由于ArrayBuffer不支持直接操作,非常不方便最近一个与设备通讯中,需要添加前导字符,百度了一圈没有好的方案,东拼西凑了才算是搞出来了 functioncop......
  • JS 中的二进制 - Blob 与 ArrayBuffer
    零、参考资料《图解+实战》File、Blob、TypedArray、DataViewJavaScript也有操作二进制的一天:聊ArrayBuffer和Blob聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer一、定义宏观:Blob-表示一个不可变、原始数据的类文件对象,可读不可写微观:ArrayBuffer-表示通用的原始......
  • uniapp ArrayBuffer转16进度字符串 以及 十六进制转ASCII码
    1.ArrayBuffer转16进度字符串//ArrayBuffer转16进度字符串示例//ab2hex(buffer){//consthexArr=Array.prototype.map.call(//newUint8Array(buffer),//function(bit){//......
  • obsidian dataview写年报:按标签分类汇总
    原文地址:https://www.cnblogs.com/liqinglucky/p/ob-dataview.html使用场景上次我们讲过用dataview写周报obsidiandataview写周报:统计一周内的文件-liqinglucky-博客园(cnblogs.com)。现在考虑另一个场景,年底要写年报,将一年的工作汇总。但通常不是像周报那样只是简单的罗......
  • 谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64
    JavaScript提供了一些API来处理文件或原始文件数据,例如:File、Blob、FileReader、ArrayBuffer、base64等。下面就来看看它们都是如何使用的,它们之间又有何区别和联系!1.BlobBlob全称为binarylargeobject,即二进制大对象,它是JavaScript中的一个对象,表示原始的类似文件......
  • obsidian dataview写周报:统计一周内的文件
    原文地址:https://www.cnblogs.com/liqinglucky/p/dataview.html使用场景工作中经常每周要将一周的工作汇总成周报。汇报内容会包括任务的开始结束时间和进展情况。obsidiandataview可以按照时间条件将库里的文件统计出来形成表格,并且可以自定义每一栏的标题。被统计文件的格式......
  • ArrayBuffer和Blob解析
    API介绍1、ArrayBuffer:用来表示通用的、固定长度的原始二进制数据缓冲区。它不能直接读写,只能通过视图(TypedArray视图和DataView视图)来读写,视图的作用是以指定格式解读二进制数据。2、TypedArray:一个TypedArray对象描述了底层二进制数据缓冲区的类数组视图3、DataView:DataVi......
  • ArrayBuffer
    ArrayBuffer对象、TypedArray视图和DataView视图是JavaScript操作二进制数据的一个接口。这些对象早就存在,属于独立的规格(2011年2月发布),ES6将它们纳入了ECMAScript规格,并且增加了新的方法。它们都是以数组的语法处理二进制数据,所以统称为二进制数组。这个接口的原始设计目......