DataView视图

如果一段数据包括多种类型(比如服务器传来的HTTP数据),这时除了建立ArrayBuffer对象的复合视图以外,还可以通过DataView视图进行操作。

DataView视图提供更多操作选项,而且支持设定字节序。本来,在设计目的上,ArrayBuffer对象的各种类型化视图,是用来向网卡、声卡之类的本机设备传送数据,所以使用本机的字节序就可以了;而DataView的设计目的,是用来处理网络设备传来的数据,所以大端字节序或小端字节序是可以自行设定的。

DataView本身也是构造函数,接受一个ArrayBuffer对象作为参数,生成视图。

DataView(ArrayBuffer buffer [, 字节起始位置 [, 长度]]);

下面是一个实例。

var buffer = new ArrayBuffer(24);
var dv = new DataView(buffer);

实例2: 使用DataView还可以避免一些异常

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
type: 'text/plain'
});
//将Blob 对象转换成 ArrayBuffer
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (e) {
console.info(reader.result); //ArrayBuffer {}
//经常会遇到的异常 Uncaught RangeError: byte length of Int16Array should be a multiple of 2
//var buf = new int16array(reader.result);
//console.info(buf); //将 ArrayBufferView 转换成Blob
var buf = new DataView(reader.result);
console.info(buf); //DataView {}
reader.readAsText(new Blob([buf]), 'utf-8');
reader.onload = function () {
console.info(reader.result); //中文字符串
};
}

DataView视图提供以下方法读取内存:

  • getInt8:读取1个字节,返回一个8位整数。
  • getUint8:读取1个字节,返回一个无符号的8位整数。
  • getInt16:读取2个字节,返回一个16位整数。
  • getUint16:读取2个字节,返回一个无符号的16位整数。
  • getInt32:读取4个字节,返回一个32位整数。
  • getUint32:读取4个字节,返回一个无符号的32位整数。
  • getFloat32:读取4个字节,返回一个32位浮点数。
  • getFloat64:读取8个字节,返回一个64位浮点数。

这一系列get方法的参数都是一个字节序号,表示从哪个字节开始读取。

var buffer = new ArrayBuffer(24);
var dv = new DataView(buffer); // 从第1个字节读取一个8位无符号整数
var v1 = dv.getUint8(0);
// 从第2个字节读取一个16位无符号整数
var v2 = dv.getUint16(1);
// 从第4个字节读取一个16位无符号整数
var v3 = dv.getUint16(3);

上面代码读取了ArrayBuffer对象的前5个字节,其中有一个8位整数和两个十六位整数。

如果一次读取两个或两个以上字节,就必须明确数据的存储方式,到底是小端字节序还是大端字节序。默认情况下,DataView的get方法使用大端字节序解读数据,如果需要使用小端字节序解读,必须在get方法的第二个参数指定true。

// 小端字节序
var v1 = dv.getUint16(1, true);
// 大端字节序
var v2 = dv.getUint16(3, false);
// 大端字节序
var v3 = dv.getUint16(3);

DataView视图提供以下方法写入内存:

  • setInt8:写入1个字节的8位整数。
  • setUint8:写入1个字节的8位无符号整数。
  • setInt16:写入2个字节的16位整数。
  • setUint16:写入2个字节的16位无符号整数。
  • setInt32:写入4个字节的32位整数。
  • setUint32:写入4个字节的32位无符号整数。
  • setFloat32:写入4个字节的32位浮点数。
  • setFloat64:写入8个字节的64位浮点数。

这一系列set方法,接受两个参数,第一个参数是字节序号,表示从哪个字节开始写入,第二个参数为写入的数据。对于那些写入两个或两个以上字节的方法,需要指定第三个参数,false或者undefined表示使用大端字节序写入,true表示使用小端字节序写入。

// 在第1个字节,以大端字节序写入值为25的32位整数
dv.setInt32(0, 25, false);
// 在第5个字节,以大端字节序写入值为25的32位整数
dv.setInt32(4, 25);
// 在第9个字节,以小端字节序写入值为2.5的32位浮点数
dv.setFloat32(8, 2.5, true);

如果不确定正在使用的计算机的字节序,可以采用下面的判断方式。

var littleEndian = (function() {
var buffer = new ArrayBuffer(2);
new DataView(buffer).setInt16(0, 256, true);
return new Int16Array(buffer)[0] === 256;
})();

如果返回true,就是小端字节序;如果返回false,就是大端字节序。

属性:

DataView.prototype.buffer

Read onlyThe ArrayBuffer referenced by this view. Fixed at construction time and thus read only.

DataView.prototype.byteLength

Read onlyThe length (in bytes) of this view from the start of its ArrayBuffer. Fixed at construction time and thus read only.

DataView.prototype.byteOffset

Read onlyThe offset (in bytes) of this view from the start of its ArrayBuffer. Fixed at construction time and thus read only.

更多类型化数组:http://www.cnblogs.com/tianma3798/p/4294433.html

更多DataView:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView

HTML5 ArrayBufferView之DataView的更多相关文章

  1. HTML5操作麦克风获取音频数据(WAV)的一些基础技能

    基于HTML5的新特性,操作其实思路很简单. 首先通过navigator获取设备,然后通过设备监听语音数据,进行原始数据采集. 相关的案例比较多,最典型的就是链接:https://developer. ...

  2. HTML5网页录音和压缩,边猜边做..(附源码)

    宣传一下自己的qq群: (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以 ...

  3. 后HTML5时代

    十二年前,无论多么复杂的布局,在我们神奇的table面前,都不是问题:十年前,阿捷的一本<网站重构>,为我们开启了新的篇章:八年前,我们研究yahoo.com,惊叹它在IE5下都表现得如此 ...

  4. Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

    XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...

  5. HTML5 文件处理之FileAPI简介整理

    在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串是js最擅长的处理之一.但文件处理,尤其是二进制文件处理,一直是个空白.在一些情况下,我们不得不通过Flas ...

  6. HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换

    1.将String字符串转换成Blob对象 //将字符串 转换成 Blob 对象 var blob = new Blob(["Hello World!"], { type: 'te ...

  7. HTML5中的二进制大对象Blob(转)

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

  8. HTML5录音控件

    最近的项目又需要用到录音,年前有过调研,再次翻出来使用,这里做一个记录. HTML5提供了录音支持,因此可以方便使用HTML5来录音,来实现录音.语音识别等功能,语音开发必备.但是ES标准提供的API ...

  9. HTML5 进阶系列:文件上传下载

    前言 HTML5 中提供的文件API在前端中有着丰富的应用,上传.下载.读取内容等在日常的交互中很常见.而且在各个浏览器的兼容也比较好,包括移动端,除了 IE 只支持 IE10 以上的版本.想要更好地 ...

随机推荐

  1. Python 处理EXCEL的CSV文档分列求SUM

    相对于导出EXCEL文件,PYTHON计算更为实时. import csv import sys from optparse import OptionParser def calculate_pro ...

  2. Android中moveTo、lineTo、quadTo、cubicTo、arcTo详解(实例)

    1.Why 最近在写android画图经常用到这几个什么什么To,一开始还真不知道cubicTo这个方法,更不用说能不能分清楚它们了,所以特此来做个小笔记,记录下moveTo.lineTo.quadT ...

  3. php-Mysql示例1

  4. Linux学习笔记5——虚拟内存

    一.为什么要有虚拟内存 虚拟内存的提出,是为了禁止用户直接访问物理存储设备,有助于系统稳定. 二.为什么一个程序不能访问另外一个程序的地址指向的空间 1:每个程序的开始地址0x80084000 2:程 ...

  5. 折腾iPhone的生活——5s使用的各种小技巧

    电池: iPhone电池正常充电方法:随便充,想怎么充怎么充,想充就充,想停就停. 需要注意: 1.如果要闲置3个月以上,一定要冲到40%电以后再闲置 2.不要在-40~35度使用(应该是废话) 3. ...

  6. Cogs 1672. [SPOJ375 QTREE]难存的情缘 LCT,树链剖分,填坑计划

    题目:http://cojs.tk/cogs/problem/problem.php?pid=1672 1672. [SPOJ375 QTREE]难存的情缘 ★★★☆   输入文件:qtree.in  ...

  7. ITU-R BT.656 协议

    ITU-R BT.601和ITU-R BT.656国际电信联盟(International Telecommunication Union)无线通信部门(ITU-R)制定的标准.严格来说,ITU-R ...

  8. Apache Mesos_百度百科

    Apache Mesos_百度百科 Apache Mesos

  9. hdoj 4883 TIANKENG’s restaurant【贪心区间覆盖】

    TIANKENG’s restaurant Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/O ...

  10. [CF 351B]Jeff and Furik[归并排序求逆序数]

    题意: 两人游戏, J先走. 给出一个1~n的排列, J选择一对相邻数[题意!!~囧], 交换. F接着走, 扔一硬币, 若正面朝上, 随机选择一对降序排列的相邻数, 交换. 若反面朝上, 随机选择一 ...