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

turbo夏日漱石

于 2024-04-07 22:04:00 发布

阅读量1.1k

点赞数 18

分类专栏：前端前端面试文章标签： es6 ES6 二进制前端

本文链接：https://blog.csdn.net/qq_62799214/article/details/137479195

版权

前端同时被 2 个专栏收录

47 篇文章 1 订阅

订阅专栏

前端面试

16 篇文章 0 订阅

订阅专栏

举例理解

先举个简单的例子理解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的内容。它提供了多种类型，如Int8Array、Uint8Array、Float32Array等，用于存储不同范围和精度的数值。

与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的不同部分。

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

创建与使用：

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

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

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

注意事项

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