一个 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。
网友评论