美文网首页js
js中ArrayBuffer操作

js中ArrayBuffer操作

作者: 活捉一枚程序猿 | 来源:发表于2019-03-16 20:04 被阅读0次

首先声明一下,本人前端菜鸟一枚,这里只是记录一下我个人最近使用js操作二进制文件的一些方法,以便日后用的时候查询,如果有写的不对的地方,请大神指出。

数据获取

前端请求二进制数据的时候需要设置数据响应格式:xhr.responseType = "arraybuffer";
写法如下:

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
    buffer = xhr.response;
    console.log(buffer)
};
xhr.send();

responseType可选的参数有:"text"、"arraybuffer"、"blob"或"document";对应的返回数据为DOMString、ArrayBuffer、Blob、Document;默认参数为"text"。

数据解析

通过对应数据类型的请求,可以得到二进制数据,数据被存储在通过ArrayBuffer这个构造函数创建一个缓冲区内,取得数据后需要使用相对应的TypedArray进行解析。
类型化数组有以下几种:

名称 占用字节 描述
Int8Array 1 8位二补码有符号整数
Uint8Array 1 8位无符号整数
Uint8ClampedArray 1 8位无符号整型固定数组(数值在0~255之间)
Int16Array 2 16位二补码有符号整数
Uint16Array 2 16位无符号整数
Int32Array 4 32 位二补码有符号整数
Uint32Array 4 32 位无符号整数
Float32Array 4 32 位 IEEE 浮点数
Float64Array 8 64 位 IEEE 浮点数

Int 为整型,Uint 为无符号数,Float 为浮点型,一个字节占八位,解析数据以"字节"为基础单位,无法直接读取位(不知道是不是这样,反正我是没找到方法)。解析数据的时候要了解数据的存储格式。

单一类型数据

单一类型数据可用对应的类型化数组直接进行解析:

var array = new Uint8Array(buffer);
for(var i = 0; i < array.length; ++i){
  console.log(array[i])
}
混编类型数据

混编类型数据解析需要用移位的方式解析其中对应类型的数据:

var array = new Uint8Array(buffer [, byteOffset [, length]])
for(var i = 0; i < array.length; ++i){
  console.log(array[i])
}

初始化数组的时候用第二个和第三个参数截取某段数据,生成相应类型的数据,其中第二个参数表示偏移的字节数,第三个参数表示数组长度。

DataView

DataView视图是一个可以从对象中读写多种数值类型的底层接口,使用它时,不用考虑不同平台的字节序问题。

var dataView = new DataView(buffer [, byteOffset [, byteLength]]);

DataView中提供了各种类型数据的get和set方法,通过这些方法可以更加直观的操作TypedArray,关于其中的各方法的详细解释,请参见MDN web doc
DataView的get方法中除了get一个字节的数据外,均含有第二个可选参数littleEndian,指示数据是以小端还是大端格式存储。如果为false或未定义,则偏移位是按照元素偏移的。设置为true时,则偏移位是按照字节数偏移的(个人见解。可能有误)。

小结

本篇文章主要写的是前端获取ArrayBuffer数据的方法,以及拿到数据时候该如何解析,写的时候才发现自己还是有很多没搞懂的地方,虽然查了一些资料,但是可能还是错误的地方,希望发现的读者可以指出,不胜感激。

相关文章

  • 009_scala编程详解数组操作之Array,ArrayBuf

    Array ArrayBuffer 遍历Array和ArrayBuffer 数组常见操作

  • JS ArrayBuffer

    在写JS时,主要用到的数据类型以 Number,String, bool为主,这几种已经能满足常规前端编程的需要了...

  • JS ArrayBuffer

      ArrayBuffer对象并没有提供任何读写内存的方法,因此想要对ArrayBuffer对象进行操作需要构建视...

  • JS ArrayBuffer溢出

    有符号正数溢出变负问题 今天在学习ES6的ArrayBuffer的时候遇到了一个问题,让我对有符号正数溢出有了新认...

  • node buffer 相关文章存

    js 二进制家族Buffer ArrayBuffer Blobhttps://zhuanlan.zhihu.com...

  • JS中的Blob和ArrayBuffer

    Blob Blob(binary large object),二进制类文件大对象,是一个可以存储二进制文件的“容器...

  • ArrayBuffer常用操作

    多个ArrayBuffer合并 字符串转ArrayBuffer 参考链接 DataViewhttps://deve...

  • JS操作属性、JS换肤、JS操作style属性、JS操作clas

    JS操作属性: JS换肤: JS操作style属性: JS操作class: JS中括号操作属性: JS函数: JS...

  • 04ArrayBuffer

    ArrayBuffer 用来表示通用的,固定长度的原始二进制缓冲区。 注意点 不能直接操作 ArrayBuffer...

  • JS-12day

    1、js操作style属性 2、js操作属性 3、js函数 4、js换肤 5、js换肤可控制 6、js中括号操作属...

网友评论

    本文标题:js中ArrayBuffer操作

    本文链接:https://www.haomeiwen.com/subject/hcgemqtx.html