JavaScript处理二进制数据：TypedArrays

小鱼儿 2022-01-06 00:27 230阅读 0赞

翻译自：[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed\_arrays][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 ...
    
    //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 以外都支持`.

转载于:https://www.cnblogs.com/iicx/p/3859969.html

[https_developer.mozilla.org_en-US_docs_Web_JavaScript_Typed_arrays]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
[Int8Array]: https://developer.mozilla.org/en/JavaScript_typed_arrays/Int8Array
[Uint8Array]: https://developer.mozilla.org/en/JavaScript_typed_arrays/Uint8Array
[Int16Array]: https://developer.mozilla.org/en/JavaScript_typed_arrays/Int16Array
[Uint16Array]: https://developer.mozilla.org/en/JavaScript_typed_arrays/Uint16Array
[Int32Array]: https://developer.mozilla.org/en/JavaScript_typed_arrays/Int32Array
[Uint32Array]: https://developer.mozilla.org/en/JavaScript_typed_arrays/Uint32Array
[Float32Array]: https://developer.mozilla.org/en/JavaScript_typed_arrays/Float32Array
[Float64Array]: https://developer.mozilla.org/en/JavaScript_typed_arrays/Float64Array
[DataView]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/DataView
[StringView]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView