类型化数组的前世今生

392 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

对于那些貌似障碍重重的问题, 在视图转向道德和心里方面的求解之前,不妨先从理解最基本的问题开始。 ————夏洛克·福尔摩斯《血字的研究》

类型化数组的定义

一个类型化数组TypedArray) 对象描述了一个底层的二进制数据缓冲区(binary data buffer)的一个类数组视图(view)。

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

我们知道电是通过金属丝传递的,将一根金属丝斩断,中间加一个开关,我们可以模仿一个简单的二进制模型。

image.png

开启状态表示1,关闭状态表示0

我们可以将内存卡看作一个超精细微型电路,有很多如上图所示的开关组成。

通过cpu操作内存的电路开闭状态,我们在内存中暂存了我们的运行数据。

缓冲区就是在内存中预留指定大小的存储空间用来对I/O的数据做临时存储,这部分预留的内存空间叫缓冲区。

那么ArrayBuffer这个对象就声明了这样一个预留的内存空间,代码如下:

const buf = new ArrayBuffer(10);
console.log(buf.byteLength);
// 输出: 8

随着web前端开发的深入发展,前端所能实现的构想越来越多!比如3d游戏,vr游戏,视频直播,大数据处理造成的性能问题成为了一座阻挡这些技术前进的大山。因而,类型化数组就是在这样一个背景下被提上日程,终于在2015年6月,前端迎来了大爆发,这一年很多新前端可能都还没有从校园毕业。

那么,问题来了? 如何用代码人类语言代码表示这些数据?

类型化数据应运而生。

类型化数组的应用

const ta = new Int8Array(8000);
ta[1] = 32;

上述代码声明了一个byteLength(字节长度)为8000byte的二进制缓冲区。8kb的存储空间可以存一张较小的图片了。至于为什么是8kb,因为1字节可以存储8位0或1,数据类型为Int8的数组,1个元素就是1字节,8000个元素就是8000byte=8kb。类推,你可以算出其他类型化数组的缓冲大小。

image.png

像是webgl的纹理像素源ArrayBufferView,图片的ImageData数据,视频数据HTMLVideoElement都会用到类型化数组。

如今,它已经广泛应用在3d框架,图片处理,视频处理等前端应用中,更多使用方法待我们去挖掘。