当前位置: 首页 > news >正文

深入浅出理解ArrayBuffer对象TypedArray和DataView视图

目录

举例理解

1. ArrayBuffer对象

2. TypedArray

3. DataView

总结

具体讲解 

1. ArrayBuffer对象

2. TypedArray

3. DataView

注意事项


举例理解

先举个简单的例子理解ArrayBuffer对象TypedArray和DataView视图的概念和之间的关系

1. ArrayBuffer对象

想象一个场景:你有一个装满水的长水管,这个水管就是一个ArrayBuffer。水管里的水是二进制数据,而水管本身则是用来存储这些数据的地方。

特点

  • 固定长度:这个水管一旦制作好了,长度就不能再改变。
  • 不能直接操作:你不能直接打开水管去喝水(即不能直接读取或修改二进制数据)。但是,你可以通过一些工具来帮助你。
2. TypedArray

继续上面的场景:现在,你想从水管里取水,但是水管太细了,手伸不进去。于是,你使用了一个特制的杯子(TypedArray),这个杯子有各种大小,可以对应水管里的不同水量。

类型

  • Int8Array:像是一个小杯子,每次只能取8位(1字节)的水。
  • Uint16Array:像是一个大杯子,每次可以取16位(2字节)的水。
  • ……以此类推。

用途

  • 当你需要按照特定的量(类型)来取水(读取数据)或倒水(写入数据)时,就可以使用对应的杯子(TypedArray)。
3. DataView

再次回到场景:但有时候,你可能想从水管的某个特定位置取一点水,或者同时取几种不同量的水。这时,使用杯子就不太方便了,因为杯子只能从头开始取水。

于是,你使用了一个吸管(DataView)。吸管可以让你选择从水管的哪个位置开始取水,以及取多少。

特点

  • 灵活:你可以决定从水管的哪个位置开始,以及取多少水。
  • 复杂:相对于杯子(TypedArray),使用吸管(DataView)可能需要更多的技巧和注意。
总结
  • ArrayBuffer就像是一个装满水的长水管,用来存储二进制数据。
  • TypedArray就像是一个特制的杯子,用来按照特定的量(类型)来取水或倒水。
  • DataView则像是一个吸管,可以灵活地选择从水管的哪个位置开始取水,以及取多少。
  • 如果ArrayBuffer中存储的二进制类型单一使用TypedArray反之使用DataView

通过以上例子相信你已经大致了解了这三者之间的关系,接下来具体看一下

具体讲解 

1. ArrayBuffer对象

用途与特性

ArrayBuffer对象是一个通用的、固定长度的原始二进制数据缓冲区。它常被用于存储和处理大量的二进制数据,比如图像、音频文件、网络通信中的数据等。

  • 固定长度:一旦创建,ArrayBuffer的大小就不能改变。这意味着,你需要在创建时确定所需的缓冲区大小。
  • 不能直接操作:你不能直接读写ArrayBuffer的内容。相反,你需要通过某种类型数组对象(如TypedArray)或DataView对象来访问和修改其中的数据。

创建与使用

你可以使用ArrayBuffer构造函数来创建一个新的ArrayBuffer对象,指定所需的字节长度作为参数。

const buffer = new ArrayBuffer(16); // 创建一个16字节的ArrayBuffer
2. TypedArray

用途与特性

TypedArray是一种特殊的数组,用于以特定的数值类型来读写ArrayBuffer的内容。它提供了多种类型,如Int8ArrayUint8ArrayFloat32Array等,用于存储不同范围和精度的数值。

  • 与ArrayBuffer关联TypedArray对象会关联一个ArrayBuffer,并且其元素会对应到ArrayBuffer的特定部分。
  • 类型安全:每个TypedArray都有一个固定的元素类型,这确保了存储的数据类型的一致性。

创建与使用

你可以通过传入一个ArrayBuffer对象来创建一个TypedArray

const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer); // 创建一个关联到buffer的Int32Array视图

你还可以使用TypedArray.set()方法来复制数据,或者使用.get()方法来获取数据。

3. DataView

用途与特性

DataView提供了一种用于读写ArrayBuffer内容的低级接口。与TypedArray不同,DataView允许你以任意顺序和字节序来读写ArrayBuffer的不同部分

  • 灵活性:你可以指定偏移量和字节序(大端或小端)来读取或写入数据。
  • 低级操作:相比于TypedArrayDataView提供了更底层的访问方式,但这也意味着操作起来可能更复杂一些。

创建与使用

你可以通过传入一个ArrayBuffer对象来创建一个DataView

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer); // 创建一个关联到buffer的DataView

然后,你可以使用DataView提供的各种方法来读取或写入数据,如.getInt8().setUint16()等。

注意事项
  • 当使用TypedArrayDataView来读写ArrayBuffer时,要确保不要越界访问,否则可能会导致不可预测的行为。
  • ArrayBufferTypedArrayDataView共享相同的底层二进制数据。因此,对一个视图所做的修改会影响到其他视图和原始的ArrayBuffer
  • 当不再需要ArrayBufferTypedArrayDataView时,最好显式地解除对它们的引用,以便垃圾回收器能够回收它们占用的内存。

相关文章:

深入浅出理解ArrayBuffer对象TypedArray和DataView视图

目录 举例理解 1. ArrayBuffer对象 2. TypedArray 3. DataView 总结 具体讲解 1. ArrayBuffer对象 2. TypedArray 3. DataView 注意事项 举例理解 先举个简单的例子理解ArrayBuffer对象TypedArray和DataView视图的概念和之间的关系 1. ArrayBuffer对象 想象一个场景…...

人工智能 - 服务于谁?

人工智能服务于谁? 人工智能服务于生存,其最终就是服务于战争(热战、技术战、经济战) 反正就是为了活着而战的决策。 既然人工智能所有结果,来自大数据的分挖掘(分析)也就是数据的应用&#x…...

软考高级架构师:嵌入式系统的内核架构

作者:明明如月学长, CSDN 博客专家,大厂高级 Java 工程师,《性能优化方法论》作者、《解锁大厂思维:剖析《阿里巴巴Java开发手册》》、《再学经典:《Effective Java》独家解析》专栏作者。 热门文章推荐&am…...

分布式锁实战

4、分布式锁 4.1 、基本原理和实现方式对比 分布式锁:满足分布式系统或集群模式下多进程可见并且互斥的锁。 分布式锁的核心思想就是让大家都使用同一把锁,只要大家使用的是同一把锁,那么我们就能锁住线程,不让线程进行&#x…...

【VMware Workstation】启动虚拟机报错“此主机支持 AMD-V,但 AMD-V 处于禁用状态”

问题出现步骤: 打开虚拟机: 然后报错: “此主机支持 AMD-V,但 AMD-V 处于禁用状态。 如果已在 BIOS/固件设置中禁用 AMD-V,或主机自更改此设置后从未重新启动,则 AMD-V 可能被禁用。 (1) 确认 BIOS/固件设…...

非关系型数据库(缓存数据库)redis的基础认知与安装

目录 一.关系型数据库和非关系型数据库 关系型数据库 非关系型数据库 关系数据库与非关系型数据库的区别 ①非关系数据 关系型数据库 非关系型数据库产生背景 数据存储流向 非关系型数据库 关系数据库 二.redis的简介 1.概念 2.Redis 具有以下几个优点: 3.Redi…...

Go语言如何处理文件

1.文件的重要性 文件不过是硬盘中的数据,看起来好像没什么了不起,但实际上,文件能够让程序员管理配置、存储程序的状态乃至从底层操作系统中读取数据。 UNIX型操作系统的一个重要特征是,将一切都视为文件。这意味着在操作系统看来,从键盘到打印机的所有东西都可像文件那样…...

Java基础知识总结(42)

(1)Java关键字的相关知识进行了复习 考试过程中“main”是主方法名,而不是Java关键字 (2)类型转换 当一个算术表达式中包含多个基本类型的值时,整个算术表达式的数据类型将发生自动提升,所有的b…...

C++ | Leetcode C++题解之第6题Z字形变换

题目&#xff1a; 题解&#xff1a; class Solution { public:string convert(string s, int numRows) {int n s.length(), r numRows;if (r 1 || r > n) {return s;}string ans;int t r * 2 - 2;for (int i 0; i < r; i) { // 枚举矩阵的行for (int j 0; j i &l…...

JavaEE——手把手教你实现简单的 servlet 项目

文章目录 一、什么是 Servlet二、创建一个简单的 Servlet 程序1. 创建项目2.引入依赖3. 创建目录4.编写代码5. 打包程序6. 部署7.验证整体过程总结 三、使用 Smart Tomcat 插件简化项目创建四、创建项目时可能遇到的几个问题。 一、什么是 Servlet Servlet 是一种实现 动态页面…...

X年后,ChatGPT会替代底层程序员吗?

能不能替代&#xff0c;真的很难说&#xff0c;因为机器换掉人&#xff0c;这其实是一个伦理问题。 其实说白了&#xff0c;任何行业在未来都会被AI或多或少的冲击到&#xff0c;因为ChatGPT做为一个可以持续提升智能的AI&#xff0c;在某些方面的智能程度超过人类并不是什么难…...

OpenAI 推出新网络爬虫GPTBot,为GPT-5做准备

目录 一、GPTBot是什么&#xff1f;它是如何工作的&#xff1f;二、GPTBot 与 Google Bot 等搜索引擎网络爬虫有何不同&#xff1f;三、GPTBot 与 Perplexity AI 的网络爬虫有何不同&#xff1f;四、允许 GPTBot 爬取有哪些风险和好处&#xff1f;4.1 允许 GPTBot 的好处4.2 允…...

【Easy云盘 | 第二篇】后端统一设计思想

文章目录 4.1后端统一设计思想4.1.1后端统一返回格式对象4.1.2后端统一响应状态码4.1.3后端统一异常处理类4.1.4StringUtils类4.1.5 RedisUtils类 4.1后端统一设计思想 4.1.1后端统一返回格式对象 com.easypan.entity.vo.ResponseVO Data public class ResponseVO<T> …...

c语言:模拟字符串拷贝功能(strcpy),面试题

面试题&#xff1a;优化中的优化&#xff08;10分满分&#xff09; 字符串拷贝:是将一个字符串的内容复制到另一个字符串中的操作。 运用函数模拟字符串拷贝&#xff1a;&#xff08;5分&#xff09; 模拟字符串拷贝 #include <stdio.h> void my_strcpy(char* dest, c…...

信创环境ES索引管理脚本:close, delete

背景 elastic-curator在信创环境无现成安装包&#xff0c;且现成一般无法联网&#xff0c;此时通过脚本管理es索引是最佳选择。 1, 脚本内容: es-close-del.sh [rootmyprojtest001 ]# cat es-close-del.sh #/bin/bash#elastic地址 ELASTIC_URL127.0.0.1:9200 #默认的删除时间…...

torch-v1.3.1-build

编译pytorch-v1.3.1 python版本>3.8会收到报错 error: cannot convert ‘std::nullptr_t’ to ‘Py_ssize_t’ {aka ‘long int’} in initialization, 参见: https://github.com/pytorch/pytorch/issues/28060 简单办法是用python3.7 wget https://mirrors.tuna.tsingh…...

C语言宏定义笔记

把宏名全部大写&#xff0c;函数名不要全部大写。注意宏定义表示数据类型和用 typedef 定义数据说明符的区别。宏定义只是简单的字符串替换&#xff0c;由预处理器来处理&#xff1b; typedef 是在编译阶段由编译器处理的&#xff0c;它并不是简单的字符串替换&#xff0c;而给…...

设计模式:生活中的观察者模式

想象你在社交媒体上关注&#xff08;订阅&#xff09;了一个名人或新闻频道&#xff08;主题&#xff09;。一旦他们发布新内容&#xff0c;所有关注者&#xff08;观察者&#xff09;都会收到通知。这个过程就很像观察者模式的工作原理。 生活场景类比 主题&#xff08;Subj…...

Qt实现Kermit协议(四)

3 实现 3.3 KermitRecvFile 该模块实现了Kermit接收文件功能。 序列图如下&#xff1a; 3.3.1 KermitRecvFile定义 class QSerialPort; class KermitRecvFile : public QObject, public Kermit {Q_OBJECT public:explicit KermitRecvFile(QSerialPort *serial, QObject *…...

苏州金龙助力旅游客运加速蜕变

近日&#xff0c;北京铭悦旅游客运有限公司又迎来一批苏州金龙海格纯电动客车。&#xff08;以下简称北京铭悦旅游&#xff09;总经理郭保生在车辆交付时说到&#xff0c;“为迎接强劲复苏的旅游市场&#xff0c;要求旅游客运向绿色客运转型&#xff0c;以及人民对品质生活、美…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...