对类型化数组(Typed Array)与ArrayBuffer的理解

Worktile 发布于2019-08-19 17:51 / 2091人阅读

摘要：类型化数组也是中新引入的。用一句话解释类型化数组就是它是操作二进制数据的接口。类型化数组类型化数组的应用二进制数据的接口主要应用于文件，在中涉及文件处理的几乎都可以应用，主要是，，。

类型化数组（Typed Array）也是HTML5中新引入的API。用一句话解释类型化数组就是：它是JS操作二进制数据的接口。众所周知，直接操作二进制数据可以使程序更为高效，尽管JS对常规数组做了很多优化（JS数组被实现为对象形式），但是不得不承认JS数组的效率一直不高。比如在WebGL中的图像数据传输，如果使用原生的JS数组，浏览器在与显卡通信时，必须将它转换为二进制形式，这一步较为耗时。正是因为有大量二进制数据的操作需求，所以ArrayBuffer应运而生。在Canvas(可参考本人canvas笔记canvas的基本原理)中，使用getImageDate()方法所返回的ImageData对象就是一个类数组对象，HTML标准中称其为CanvasPixelArray，它除了在值的处理方式上与ArrayBuffer中视图类型Unit8Array有点区别外，其他都一样(Unit8Array只能处理0-255的数字，而CanvasPixelArray可以处理更多)

对于刚接触类型化数组的概念看到这可能还是云里雾里，下面将逐一将我所理解的ArrayBuffer中的关键概念做个整理：

视图（View）

大多数资料中对于视图都是一句带过，比如这篇博客中（ArrayBuffer：类型化数组）对于视图的解释就是：

ArrayBuffer作为内存区域，可以存放多种类型的数据。不同数据有不同的存储方式，这就叫做“视图”。

当我刚看到上面的解释，还是无法体会“视图”的含义，暂且把ArrayBuffer的概念放一边，想象一下，既然是操作二进制数据的接口，那么该如何操作他们呢，比如8位二进制数1是00000001，我们肯定不会使用原始的二进制编程，那么当我们操作这个1时，肯定是以1的形式操作，那么这里的1就是视图（view）了，视图可以理解为方便理解的二进制数据。如果知道C语言，对于这个概念就不难把握了，比如C语言中的字符串实际是数字，那么这里的字符串也可以理解为“视图”。其实这里的视图就是类型化数组。

ArrayBuffer的概念

ArrayBuffer是一段不透明的内存区域（所谓不透明，就是无法直接操作的数据块），单位是字节(Byte)也就是8位，它的byteLength属性返回其内存大小。在JS中，通过构造函数的形式申明一段ArrayBuffer区域：

var a = new ArrayBuffer(10)
a.byteLength // =>10

在这段内存区域上，可以使用不同的视图来创建任意数量的类型化数组，这些类型化数组也可以是重叠的。有八种不同的类型化数组(视图)，分别为：

Int8Array：8位有符号整数，长度1个字节。

Uint8Array：8位无符号整数，长度1个字节。

Int16Array：16位有符号整数，长度2个字节。

Uint16Array：16位无符号整数，长度2个字节。

Int32Array：32位有符号整数，长度4个字节。

Uint32Array：32位无符号整数，长度4个字节。

Float32Array：32位浮点数，长度4个字节。

Float64Array：64位浮点数，长度8个字节。

这里引用这篇博客中(JavaScript中的ArrayBuffer详细介绍)的例子来解释ArrayBuffer区域中出现的重叠(也叫复合视图)现象：

var buffer = new ArrayBuffer(12)
var x = new Float32Array(buffer, 0, 2)
var y = new Float32Array(buffer, 4, 1)
x[1] = 7;
console.log(y[0]); // 7

原文中作者的解释过于简单。这里的y[0]之所以为7，是因为在buffer这段12个字节的内存区域中，申明来一个从0字节开始，长度为2的32位浮点数x(也就是说x占了前8个字节)，再申明一个从第4个字节开始，长度为1的32位浮点数y，那么这里的y与x实际上就是重叠的，x已经占了8个字节，而y是从第4个字节开始的。既然是重叠的，那么改变x势必会影响到y，这里x类型化数组的第一个元素赋值为7，那么在ArrayBuffer中即是00000000 00000000 00000000 00000111而y是从第四个字节开始，也就是从00000111开始，所以y也是00000111也就是7了。

类型化数组与常规数组的区别

类型化数组实质上是二进制数据，而ArrayBuffer这段区域又是指定长度的，基于这些便可推出其与常规数组的区别：

类型化数组元素都是数字，它不像JS常规数组那样可以参杂不同类型，比如下面例子?中的赋值就是无效的

类型化数组长度固定

所有元素初始化为0

var  a = new Int8Array(3)
a[0] = "hello"
a[0] // =>0 显示a[0]依然未定义
a[0] = "8"
a[0]  // = > 8 但是注意类型的自动转换，当可被转换成数字时，JS会自动将其转成数值

DataView

既然本质是在操作二进制数据，那么就涉及到“高位优先(big-endian)”还是“低位优先(little-endian)”的数据传输问题，DataView的一整套API中就涉及到解决该问题，在当前的大部分CPU架构中的字节传输顺序都是使用低位优先，而在大部分的网络协议中使用的字节顺序却是高位优先(比如HTTP协议)，它的一系列get方法中就可以设置字节的处理顺序。DataView也是一种视图，它的原理并不难，详细的dataview的API可以看前面提到的博客中的DataView章节。mark?ArrayBuffer：类型化数组

类型化数组的应用

二进制数据的接口主要应用于文件，在JS中涉及文件处理的API几乎都可以应用ArrayBuffer，主要是Ajax，File，Canvas。这几个例子等下再码，争取写出跟前面博客不一样的东西，先搬砖……

云服务器 GPU云服务器数组Array类型对python的理解谈谈对php的理解对人工智能的理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78901.html

理解 typed array

摘要：在内部设计时分成了两部分和。层表示内存中的数据块，负责提供操作数据块的接口。也就是说通过创建内存块，通过实现对内存块的读写操作。很显然中的结果是。有同学可能对输出的顺序不理解，觉得为什么不是呢。上例在小端模式下的存储形式，每个框框表示位。我们知道在C语言中，可以使用malloc和free方法来分配和释放内存。随着web的发展中，js在ES6中新增了内存操作的支持。其实现方式就是---...

_Zhao 2019-08-21 17:51 评论0 收藏0
重学前端学习笔记（九）--JavaScript中的对象分类

摘要：固有对象由标准规定，随着运行时创建而自动创建的对象实例。普通对象由语法构造器或者关键字定义类创建的对象，它能够被原型继承。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：ka...

ShowerSun 2019-08-02 16:16 评论0 收藏0
重学前端学习笔记（九）--JavaScript中的对象分类

摘要：固有对象由标准规定，随着运行时创建而自动创建的对象实例。普通对象由语法构造器或者关键字定义类创建的对象，它能够被原型继承。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：ka...

tinna 2019-08-30 10:48 评论0 收藏0
重学前端学习笔记（九）--JavaScript中的对象分类

摘要：固有对象由标准规定，随着运行时创建而自动创建的对象实例。普通对象由语法构造器或者关键字定义类创建的对象，它能够被原型继承。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：ka...

dantezhao 2019-08-23 17:20 评论0 收藏0