翻译自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
随 着Web应用的发展,越来越多地需要使用JavaScript来处理视频、音频,或者通过WebSocks获取原始数据。很显然,我们需要有一种方法能够 方便快捷地地用JavaScript处理原始二进制数据。过去,我们将原始数据作为字符串来对待,并使用charCodeAt()来从数据缓冲区中读取字 节。由于需要进行多次转换,这种方法低效而且容易出错,特别是当数据格式不是实际上的字节数据时(如32位整数或是浮点数)。
JavaScript的类型化数组(TypedArrays)提供了一个更加高效的机制来访问和处理二进制数据。
TypedArrays构造:缓冲区(Buffer)和视图(View)
为了达到最大的灵活性和高效性,JavaScript的TypedArray分为两个部分:缓冲区和视图。
缓 冲区由ArrayBuffer实现,一个缓冲区是一个代表某个数据块的对象。它没有格式,而且没有提供一个机制来访问或操纵其中的内容。为了存取缓冲区中 的内容,你需要创建一个视图。视图提供了一个环境(context),包括数据类型、起始偏移量以及元素数量。它把数据转化为实际上的类型化数组。视图由 ArrayBufferView和它的一些子类实现。
ArrayBufferView的子类:
下面的子类提供了特定的缓冲区视图,用来处理不同类型的数据。要注意的是,如果要处理的数据类型超过一字节,将使用平台对应的端序。如果需要操作端序,可以使用DataView来代替ArrayBufferView。
Int8Array 、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array
ArrayBufferView的父类:
DataView:DataView提供了一个底层接口来从ArrayBuffer中存取数据
StringView:StringView提供了一个构建于ArrayBuffer之上的C语言风格的字符串操作接口(比如说字符编码的数组,类似JavaScript中的ArrayBufferView)
//创建一个16字节的缓冲区,自动初始化为全0 var buffer = new ArrayBuffer(16); //检测缓冲区大小 if (buffer.byteLength == 16 ) { alert("it's 16 bytes."); } //为了能操作这个缓冲区,我们创建一个视图,将缓冲区中的数据看成32位(4字节)有符号整数数组 var int32View = new Int32Array(buffer); //现在可以像操作一个数组那样操作里面的数据了。下面的这个操作会把数组中的四个元素赋值为0,2,4,6 for (var i=0; i操作更复杂的数据结构
通过把不同类型、不同起始偏移量的数据组合成单个的缓冲区,我们可以创建和访问类似C语言结构体的数据。
如下面的结构体
struct someStruct { unsigned long id; char username[16]; float amountDue; };你可以这样访问
var buffer = new ArrayBuffer(24); // ... read the data into the buffer ... //Uint16Array
Uint16Array
(ArrayBuffer buffer, optional unsigned long byteOffset, optional unsigned long length); //第一个参数是ArrayBuffer,第二个参数是偏移量(以字节计),第三个参数是数据的长度(以字节计)
var idView = new Uint32Array(buffer, 0, 1); var usernameView = new Uint8Array(buffer, 4, 16); var amountDueView = new Float32Array(buffer, 20, 1);转换成普通的数组
在处理完一个类型化的数组之后,有时我们想把它转化为一个普通的数组,因为这样可以使用数组原型提供的方便的方法。
var typedArray = new Uint8Array( [ 1, 2, 3, 4 ] ), normalArray = Array.apply( [], typedArray ); normalArray.length === 4; normalArray.constructor === Array;兼容性
Typed arrays 已经在 Webkit 中可用了. Chrome 7 支持
ArrayBuffer
,Float32Array
,Int16Array
, 和Uint8Array
. Chrome 9 和 Firefox 15 添加了DataView
对象的支持. Internet Explorer 10 除了Uint8ClampedArray
和ArrayBuffer.prototype.slice 以外都支持
.