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
Uint8ArrayInt16ArrayUint16ArrayInt32ArrayUint32ArrayFloat32ArrayFloat64Array

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

JavaScript处理二进制数据:TypedArrays

时间: 2024-12-26 18:56:52

JavaScript处理二进制数据:TypedArrays的相关文章

JavaScript二进制数据序列化和反序列化

最近业余时间在搞h5小游戏,由于同步协议过于频繁,和服务器之间的同步直接用json就显得太浪费了,于是我们商讨之下决定改用二进制.学习过程中并没有遇到一篇就解决问题的文章,遂再总结一发. 1.二进制数据的存储 ArrayBuffer对象.TypedArray对象.DataView对象是JavaScript操作二进制数据的一个接口. (1)ArrayBuffer对象:代表内存之中的一段二进制数据,它不能直接读写,只能通过视图(TypedArray视图和DataView视图)来读写,视图的作用是以指

Javascript的二进制数据处理学习 ——nodejs环境和浏览器环境分别分析

以前用JavaScript主要是处理常规的数字.字符串.数组对象等数据,基本没有试过用JavaScript处理二进制数据块,最近的项目中涉及到这方面的东西,就花一段时间学了下这方面的API,在此总结一下. 首先浏览器是没有主动读取本地文件的权限的,所以对JavaScript处理二进制数据能力的学习,应该从运行在服务器端的nodejs看起. Nodejs 中的 Buffer 为了方便处理二进制数据,nodejs特地封装了一个Buffer模块.文档地址:http://nodejs.cn/doc/no

nodeJS-使用buffer类处理二进制数据

使用buffer类处理二进制数据 在客户端javascript脚本代码中,对于二进制数据并没有提供一个很好的支持.然后在nodejs中需要处理像TCP流或文件流时,必须要处理二进制数据.因此在node.js中,定义了一个Buffer类,该类用来创建一个专门存放二进制数据的缓存区. 一:创建Buffer对象 在node.js中,Buffer类是一个可以在任何模块被利用的全局类,不需要为该类的使用而加载任何模块.可以使用new关键字来创建该类的实例对象.Buffer类可以使用三种方式来构造函数,第一

二进制文件文本文件和二进制数据

我们知道计算机是用二进制来做运算处理的,所以所有存储在计算机里面的东西都是二进制的. 我也知道这句话,但为什么总是听到别人说"二进制"文件和"文本"文件呢? 按照上面那句话来说计算机里面的都应该是二进制的啊! 底层存储的都是二进制的"数据",而不是二进制的文件. 列举一个二进制文件如下: 00000000h:0F 01 00 00 0F 03 00 00 12 53 21 45 58 62 35 34; .........S!EXb54 0000

二进制数据和字符串之间转换

1.把二进制数据编码为base64格式 你有一个byte[]用于表示一些二进制信息,比如图像,你需要把这些数据编码为一个字符串,以便可以通过不适合二进制的方式(比如电子邮件)发送它. 可以使用Convert类的静态方法Convert.ToBase64String,把byte[]编码为string public static string Base64EncodeBytes(this byte[] inputBytes) { return Convert.ToBase64String(inputB

数据库中用varbinary存储二进制数据

问题描述:将图片.二进制文件内容等数据存储在数据库中,并能从数据库中取出还原为图片或文件,数据库存储二进制数据用varbinary字段. 分析:由于之前数据库中没有用过varbinary存储数据,首先要把varbinary搞懂了,其次就是图片类型与二进制类型之间的转换,文件类型与二进制类型之间的转换. 准备工作:     1.varbinary 与 binary的区别:             固定长度 (binary) 的或可变长度 (varbinary) 的 binary 数据类型.    

BLOB存储图片文件二进制数据是非对错

子在一天一天虚度,生活也在一天一天中茫然 做人做事哪能尽如人意,付出多少收获多少虽然存在偏颇,但是不劳而获的心态是万万不对的,更不能去怨天尤人,低调为人.做好自己就可以了 改进你的系统的最好的方法是先避免做“蠢事”.我并不是说你或你开发的东西“蠢”,只是有些决定很容易被人们忽略掉其暗含的牵连,认识不到这样做对 系统维护尤其是系统升级带来多大的麻烦.作为一个顾问,像这样的事情我到处都能见到,我还从来没有见过做出这样的决定的人有过好的结果的. 图片,文件,二进制数据 既然数据库支持 BLOB 类型的

atitit.二进制数据无损转字符串网络传输

1. gbk的网络传输问题,为什么gbk不能使用来传输二进制数据 1 2. base64 2 3. iso-8859-1  (推荐) 2 4. utf-8 (不能使用) 2 1. gbk的网络传输问题,为什么gbk不能使用来传输二进制数据 gbk会造成信息丢失 由于有些字符在gbk字符集中找不到对应的字符,所以默认使用编码63代替,也就是?(问号)...gbk仅仅能兼容低位asc编码(英文字母),高位编码要使用来编码汉字了... 作者::老哇的爪子Attilax艾龙,EMAIL:[email p

QT: QByteArray储存二进制数据(包括结构体,自定义QT对象)

因为利用QByteArray可以很方便的利用其API对内存数据进行访问和修改, 构建数据库blob字段时必不可少; 那如何向blob内写入自定义的结构体和类 1. 利用memcpy拷贝内存数据 //自定义person结构体 Cpp代码   typedef struct { int age; char name[20]; }Person; //向QByteArray写入多个结构体 void writeStruct() { QByteArray ba; ba.resize(2*sizeof(Pers