1. ArrayBuffer和TypedArray、DataView的关系
ArrayBuffer存储了固定byte(字节)的raw binary data(原始二进制数据)。不能直接通过ArrayBuffer读取和修改数据。只能通过view(视图)来操作。其他编程语言里有相似的概念，一般叫做byte array(字节数组)，可以直接操作，元素值的范围在[0,255]之间，类似于Uint8Array。个人觉得ByteArray比ArrayBuffer这个命名要好。同一ArrayBuffer可以用不同的视图，以不同的“视角”去读写。
1.1 TypedArray是ArrayBuffer的视图
TypedArray是类数组对象，TypedArray里元素值的类型都相同(Array元素值的类型可以不相同)。共有10种具体的TypedArray:
- Int8Array
- Uint8Array
- Uint8ClampedArray
- Uint16Array
- Int32Array
- Uint32Array
- Float32Array
- Float64Array
- BigInt64Array
- BigUint64Array
Uint8Array的常见使用场景:
- 16进制是二进制数据的标准数字格式，8位无符号(+-)二进制的范围是[0,255]，表示成16进制是[00,ff]，在需要处理二进制数据时，多使用Uint8Array。
- Uint8Array还可以用来存储ASCII字符码，ASCII也使用无符号的8位来存储字符码，共编码了128个字符。
Uint8ClampedArray的元素值被“裁切”限制在[0,255]之间。用它来存储颜色值是个不错的选择。
const u8a=new Uint8Array(3);
u8a.fill(256);//[0,0,0]
const u8ca=new Uint8ClampedArray(3);
u8ca.fill(256);//[255,255,255]
1.2 DataView是ArrayBuffer的另一种视图
2. 如何创建ArrayBuffer
创建ArrayBuffer主要有两种方式:
2.1 通过构造器函数创建
//创建了8个字节长度的ArrayBuffer
var buffer=new ArrayBuffer(8);
2.2 通过既有数据转化
比如读取本地文件再转换成ArrayBuffer。
var fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
3. 举例
MDN上有个稍微复杂的例子——
Working
with complex data structures。但这个例子太理论化了。我想做一个更实际的例子——通过ArrayBuffer检测文件的类型(示例只检测了图片类型，可以根据具体情况予以完善，file-type这个js库检测的类型很全面)。算法的核心流程大致如下:
- 文件里的magic number简单理解就是文件数据里的常量，用来标识这个文件的数据，检测这些magic number可以简单有效地区分文件的格式。详情参考wiki。如果无法访问，可以浏览enacademic。
- 16进制中A-F是大小写无关的。js里toString(16)返回的a-f是小写的。
-
Char Array和
Hex Array并不同时需要。因为magic number这个常量一定可以用16进制数值表示，有些也可以用ASCII字符表示。ASCII字符可能直观一点，16进制数值更直接。 -
并不需要提前把Uint8Array转成Char Array或
Hex Array。可以在与magic number比较时，再转换。这样延迟操作既可以节约空间、又可以避免过早地浪费计算能力。(十进制数和16进制数可以直接比较，所以Hex Array多余了。)
4. 思考题
使用ArrayBuffer做一个简易版的hex editor。可以参考Hex Fiend。