首页 技术 正文
技术 2022年11月18日
0 收藏 508 点赞 4,850 浏览 2402 个字

类型化数组(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,那么这里的yx实际上就是重叠的,x已经占了8个字节,而y是从第4个字节开始的。既然是重叠的,那么改变x势必会影响到y,这里x类型化数组的第一个元素赋值为7,那么在ArrayBuffer中即是00000000 00000000 00000000 00000111y是从第四个字节开始,也就是从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。这几个例子等下再码,争取写出跟前面博客不一样的东西,先搬砖……

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,084
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,559
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,408
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,181
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,818
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,901