[JS] 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 进行处理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/789162.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软工作业1:自我介绍+软工五问

| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/gdgy/CSGrade22-34/ | | ----------------- |--------------- | | 这个作业要求在哪里| https://edu.cnblogs.com/campus/gdgy/CSGrade22-34/homework/13228 | | 这个作业的目标 | <自我介绍,学习使用博客、GitHu…

30-物体检测算法R-CNN SSD YOLO

1、R-CNN2、Fast R-CNN3、Faster R-CNN4、Mask R-CNN5、SSD6、YOLO

Windows下使用Wireshark分析USB通信

WireShark中对USB数据捕获可以监视与主机连接的usb数据.usb设备是三段地址描述,例如1.15.1,第一个是总线,第二个是设备地址,第三个是端口.USB数据抓包分析这些是鼠标的数据包包抓包内容键盘数据包,按下一个键后抓到的数据包,查询usb标准,对照后是a。

前端零代码,套娃一样开发界面!

V3.0全新升级:社区版 | 文档(18万字)| AI问答 | 入门示例50+ | 设计极简 前端技术日新月异,UIOTOS是一款最新开源的前端零代码工具(无需用户懂前端开发,不同于低代码)。 三年磨一剑,独创的页面嵌套技术,给WEB前端、UI原型、组态HMI、工控上位机,以及工作流、规则链等…

vim显示行号

在命令模式下执行以下命令 set nu如下图:

ORACLE中行锁问题排查手段

概念描述 行锁,对应等待事件’enq: TX - row lock contention’。是应用环境中经常碰到的故障现象。当发生行锁时,往往意味着大量业务会话被阻塞。造成业务功能无法进行。因此需要尽快排查出问题源头及原因。采取有效的处理措施。 关于行锁等待事件enq: TX - row lock conten…

Gartner首次发布AI代码助手魔力象限,阿里云进入挑战者象限,通义灵码产品能力全面领先

8月29日消息,国际市场研究机构Gartner发布业界首个AI代码助手魔力象限,全球共12家企业入围,阿里云成为唯一进入挑战者象限的中国科技公司。通义灵码在产品功能和市场应用等方面表现优秀,获得权威机构认可。8月29日消息,国际市场研究机构Gartner发布业界首个AI代码助手魔力…

Linux | Ubuntu 16.04.4 通过docker安装单机FastDFS

Ubuntu 16.04.4 通过docker安装单机fastdfs 前言 很久没有写技术播客了,这是一件很不应该的事情,做完了事情应该有沉淀的。 我先说一点前情提要,公司的fastdfs突然就挂了,做过的操作就是日志文件太大了,所以把日志文件给删了,理论上这个动作应该不影响程序运行才对。 然后…

MDQ100-16-ASEMI单向整流模块MDQ100-16

MDQ100-16-ASEMI单向整流模块MDQ100-16编辑:ll MDQ100-16-ASEMI单向整流模块MDQ100-16 型号:MDQ100-16 品牌:ASEMI 封装:M18 批号:2024+ 分类:整流模块 特性:整流模块、整流桥 平均正向整流电流(Id):100A 最大反向击穿电压(VRM):1600V 恢复时间:>2000ns 结温:-…

pygame封装常用控件,第二日,有滑块的文本显示域

#coding=utf-8import os,sys,re,time import pygame import random from win32api import GetSystemMetrics from tkinter import messageboxpygame.init() pygame.display.set_caption("我的控件")percent = 0.6 screen_width = GetSystemMetrics(0) screen_height …

29-锚框

使用非极大值抑制(NMS)经过NMS后,可以去除很多重复的框