弄清楚 TypedArray & ArrayBuffer

一个 TypedArray 对象描述了一个二进制数组缓冲器(Buffer)的类数组 (array-like) 视图。TypeArray 是一个概念，既不存在于全局 (global) 对象中，也没有自己的构造函数 (constructor)，它是一系列拥有特定类型 (specific element types) 的数组的集合体，这类型的数组我们称为 Typed Array (有类型的数组)。

我们知道 JS 的数组里面可以放各种类型的数据，在 Typed Array 的数组中，我们要求数组中的数据都是其指定的类型。

TypedArray 拥有11种类型，依次是：

• Int8Array
• Uint8Array
• Uint8ClampedArray
• Int16Array
• Uint16Array
• Int32Array
• Uint32Array
• Float32Array
• Float64Array
• BigInt64Array
• BigUint64Array

上面这些类型拥有相同的构造方法（把下面的 TypedArray 替换成对应的类型）

// 多种构造方式
new TypedArray();
new TypedArray(length);
new TypedArray(typedArray);
new TypedArray(object);
new TypedArray(buffer [, byteOffset [, length]]);

每个类型的常用方法基本等同于传统的 Array，这里就不赘述了。

说了相同点，下面来看看不同点。每个类型区别在于数组中元素的取值范围 (Value Range) 的不同，例如 Uint8Array 里面元素的类型是无符号8字节，范围就是 0 ~ 255(= 2⁸ - 1) 。

下面我们用一段代码来对取值范围做进一步研究

var uint8 = new Uint8Array(10)
var a = uint8[0] = 255
var b = uint8[1] = 256
var c = uint8[2] = 257

上面 a b c unit8[0] unit8[1] unit8[2] 的值分别是多少？大家先自己想想。

公布答案：255、256、257、255、0、1

Unit8Array 会对每个元素进行取模 (%) 运算：255 % 256 = 255、256 % 256 = 0 ...
至于像 Int8Array (取值范围 -127 ~ 128) 这种带符号的，会涉及到补位的概念，稍微有点复杂，这里不做进一步深入，大家不了解的可以去查一些数据基础方面的资料。

那么当我们对元素赋非数字的值的时候，会发生什么呢？

var uint8 = new Uint8Array(10)
uint8[0] = 'abc'
uint8[1] = '123hello'
uint8[2] = '444'
uint8[3] = true
uint8[4] = false

结果分别是：0、0、258、1、0。你答对了吗？
背后的逻辑就是 TypedArray 会对赋的值进行 Number(value) 操作。

还有要注意的是，TypedArray 的长度是在初始化 (new) 的时候就固定 (fixed-length) 的，并不能像普通 Array 那样动态改变数组长度。例如：

var uint8 = new Uint8Array(10)
uint8[11] = 100
console.log(uint8[11])

控制台打出的结果是 undefined

总的来说，TypedArray 数组的作用，是确保每个元素都是在一定的范围内的整数或浮点数，为一些特定业务的处理提供了便捷。

说完 TypedArray，我们来说说 ArrayBuffer。ArrayBuffer 在其他开发语言中常被成为 Byte Array，它也是个定长 (fixed-length) 的数组。由于 ArrayBuffer 不能直接进行操作，所以通常用 TypeArray 或 DataView 对其进行封装后再进行操作。下图展示了 ArrayBuffer 的结构并对其直接操作：

ArrayBuffer.png

我们看到对 ArrayBuffer 用数组的方式赋值，其实就是创建了新的属性。那么按照上面说的，要操作 ArrayBuffer，我们需要先对齐进行封装

var uint8 = new Uint8Array(arrayBuffer)
uint8[3] = 17

这时候我们再来看下结果，见下图

对ArrayBuffer操作.png

ArrayBuffer 的实例除了通过 new 函数获得，文件的读写操作喝 Base64 的转换也能从中获得 ArrayBuffer。