一文讲清楚什么是类型化数组、ArrayBuffer、TypedArray、DataView等概念

为什么需要类型化数组

JavaScript 类型化数组是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制。

js 在处理图像、音频视频编辑等方面，通常需要处理大量相同类型的数据，比如一张图片的像素点数据，坐标数据等等。而使用普通的 js 数组，存储的对象能动态增多和减少，并且可以存储任何 JavaScript 值，性能可能会有问题。所以 js 引入了类型化数组。

类型化数组的创建要明确数据类型和长度，所以处理起来效率会高很多，而且不支持 push pop 等操作。

类型化数组的组成

类型数组拆分为两部分：

• 缓冲Buffer
• 视图View

缓冲由 ArrayBuffer 对象实现，描述的是一个数据块，并且不能访问。
如果要访问，就要用到视图。
有点像类和对象的概念。

缓冲Buffer

缓冲由 ArrayBuffer 对象实现，也就是上图框起来的部分，ArrayBuffer对象代表原始的二进制数据，那么如何对缓存区部分进行操作呢？有两种方式：

• 类型数组视图
• 数据视图DataView

视图View

简单总结一下就是，TypedArray视图用来读写简单类型的二进制数据，DataView视图用来读写复杂类型的二进制数据。

类型数组视图TypedArray

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Int8Array

语法：

new Int8Array(length);
new Int8Array(typedArray);
new Int8Array(object);
new Int8Array(buffer [, byteOffset [, length]]);
1
2
3
4

举例：

// 以长度参数构造对象
var int8 = new Int8Array(2);
int8[0] = 42;
console.log(int8[0]); // 42
console.log(int8.length); // 2
console.log(int8.BYTES_PER_ELEMENT); // 1

// 以数组构造对象
var arr = new Int8Array([21,31]);
console.log(arr[1]); // 31

// 从另一数组构造对象
var x = new Int8Array([21, 31]);
var y = new Int8Array(x);
console.log(y[0]); // 21

// 从 ArrayBuffer 构造对象
var buffer = new ArrayBuffer(8);
var z = new Int8Array(buffer, 1, 4);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

数据视图DataView

语法：

new DataView(buffer [, byteOffset [, byteLength]])
1

byteOffset：此 DataView 对象的第一个字节在 buffer 中的字节偏移。如果未指定，则默认从第一个字节开始。
byteLength：此 DataView 对象的字节长度。如果未指定，这个视图的长度将匹配 buffer 的长度。

// create an ArrayBuffer with a size in bytes
const buffer = new ArrayBuffer(16);

// Create a couple of views
const view1 = new DataView(buffer);
const view2 = new DataView(buffer, 12, 4); //from byte 12 for the next 4 bytes
view1.setInt8(12, 42); // put 42 in slot 12

console.log(view1.getInt8(12));
console.log(view2.getInt8(0));
// expected output: 42
1
2
3
4
5
6
7
8
9
10
11

提供的方法有很多如下：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView

实例

使用 canvas 画出图片后，可以拿到图片每个像素点 rgba 的数据，这个数据就是存储在缓冲区中的，可以用 Uint8Array 来获取，具体看 js：使用canvas检测图片亮度

参考文档

https://www.jianshu.com/p/40d4a4d133e8
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays