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. Java获取本机MAC地址

    为什么写这个呢?因为前几天看见网上有采用windows命令获取局域网和广域网MAC,查了查可以直接用JDK的方法. MAC可用于局域网验证,提高安全性. import java.net.InetAdd ...

  2. Warm up

    hdu4612:http://acm.hdu.edu.cn/showproblem.php?pid=4612 题意:给你一个无向连通图,问加上一条边后得到的图的最少的割边数; 题解:首先对原图求割边数 ...

  3. 测试WWW方案(反向代理,负载均衡,HTTP加速缓存)

    大约图如下: NGINX FRONT(80)--->VARNISH(8080)---->LNMP BACKEND 1(80) |--->LNMP BACKEND 2(80) 主要是前 ...

  4. Keil 的调试命令、在线汇编与断点设置

    上一讲中我们学习了如何建立工程.汇编.连接工程,并获得目标代码,但是做到这一 步仅仅代表你的源程序没有语法错误,至于源程序中存在着的其它错误,必须通过调试才能 发现并解决,事实上,除了极简单的程序以外 ...

  5. rt: Unknown command 'PATH='

  6. (转载)mysql中limit用法

    (转载)http://hi.baidu.com/sppeivan/item/e45179375d6778c62f8ec221   mysql中limit用法 使用查询语句的时候,经常要返回前几条或者中 ...

  7. [XenServer] XenServer修改IP 以及 root密码

     A.修改IP以及DNS 1. root用户登录console 2.输入命令获得UUID xe pif-list 3.利用UUID查看之前的IP,注意替换下面的1111111111 xe pif-pa ...

  8. 这次GDC China 2015的总结与关卡设计教程的梳理

    去年关卡教程总结链接:听了GDC2014关于关卡设计的讲座的总结与自己的理解 24 号去了GDC china听了讲座,没有听unity没有听VR,听了一天关卡教程,和上次的关卡教程还是有区别的,这次的 ...

  9. bzoj 3611 [Heoi2014]大工程(虚树+DP)

    3611: [Heoi2014]大工程 Time Limit: 60 Sec  Memory Limit: 512 MBSubmit: 408  Solved: 190[Submit][Status] ...

  10. 部署war包到Tomcat

    1. 开发给到一个war包,假设叫 a-b-c.war. 2. 打开Tomcat安装路径 ,假设是“D:\Tomcat\apache-tomcat-7.0.68”,然后进入到 webapps文件夹. ...