深入浅出理解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字节的ArrayBuffer2. 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时，最好显式地解除对它们的引用，以便垃圾回收器能够回收它们占用的内存。