JavaScript处理二进制数据：TypedArrays

翻译自：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<int32View.length; i++) {
    int32View[i] = i*2;
}

//使用多个视图来操做同一个缓冲区。若是你的机器是小端序(通常都是小端序)，将显示[ 0, 0, 2, 0, 4, 0, 6, 0 ]。若是是大端序，显示[0, 0, 0, 2, 0, 4, 0, 6]
var int16View = new Int16Array(buffer);
console.log(int16View)

操做更复杂的数据结构

经过把不一样类型、不一样起始偏移量的数据组合成单个的缓冲区，咱们能够建立和访问相似C语言结构体的数据。

以下面的结构体

struct someStruct { unsigned long id; char username[16]; float amountDue; };

你能够这样访问

var buffer = new ArrayBuffer(24);

// ... read the data into the buffer ...

//
var idView = new Uint32Array(buffer, 0, 1);
var usernameView = new Uint8Array(buffer, 4, 16);
var amountDueView = new Float32Array(buffer, 20, 1);Uint16ArrayUint16Array(ArrayBuffer buffer, optional unsigned long byteOffset, optional unsigned long length);
//第一个参数是ArrayBuffer，第二个参数是偏移量(以字节计)，第三个参数是数据的长度(以字节计)

转换成普通的数组

在处理完一个类型化的数组以后，有时咱们想把它转化为一个普通的数组，由于这样可使用数组原型提供的方便的方法。

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 之外都支持.