JS中的二进制操作简介

nodejs那边先按住不表，这里谈谈在网页里若何获取二进制数据?常见的办法有3种，1是经由过程XMLHttpRequest 2，2是经由过程File和Blob一套相干接口。

JS中的二进制操作简介

写这篇博客的来源是小胡子哥的一篇文┞仿《你所不知道的JavaScript数组你所不知道的JavaScript数着?ⅲ

因为跟着XHR2和现代浏览器的普及，在浏览器傍边处理二进制不再向以前那样无所适大年夜，跟着Canvas/WebGL等新技巧逐渐开端进入大年夜众视野，也会用到一些字节数组或者16位、8位整数等器械。在node.js方才宣布的4.0版本中，Buffer的底层应用了更相符JS标准的Uint8Array来实现，浏览器和node.js再次向雷同的目标接近了一点点，所以对于JS中处理二进制，我驹萃Ｃ鸫这篇文┞仿作一小我门性质的流水账，便利一些对二进制处理不懂得的同窗快速入门，固然在前端范畴用到的不多，不过也可以作为茶余饭后的休闲谈资。

二进制数据在JS法度榜样里的表达

var buffer = get_array_buffer_some_how(); 
 
var i16 = new Int16Array(buffer, 10);

如不雅你用过canvas的getImageData/putImageData的话，会发明它给你的就是一个Uint8ClampedArray，这器械拜访起来速度比JS的原生Array快很多，使得对canvas进行高速的像素操作成为可能。

现当代界上几乎所有的计算机体系构造都是以字节(byte)为二进制数据的根本单位(注：不是说最小单位)，所以二进制经常以字节数组的情势存在于法度榜样傍边。例如在C#琅绫擎，就用byte[]，标准C琅绫擎没有byte类型，但可以经由过程typedef把byte定义为unsigned char的别号，效不雅是一样的。

JS设计之初似乎根本没想过要处理二进制的器械，加上对类型的极端日化，对于字节的概念可以说是异常异常的模糊。如不雅要表达字节数组，那么似乎只能用一个通俗数组来表示。

HTML5体系惹人了一大年夜堆新的器械，比如XHR2，是可以上传或下载二进制内容的，与之配套的器械就是JS里的ArrayBuffer和Typed Array了。

ArrayBuffer是一个固定长度的字节序列，你可以经由过程new ArrayBuffer(length)来获得一片空间，或者用下文将会介绍的办法大年夜XHR2等门路获取。因为内部实现与数组不一样，ArrayBuffer平日都是持续内存(留意，这只是经验之谈，并不是规范也不是文档所明白的)，是以对于高密度的拜访操作而言它比JS中的Array速度会快很多(但并不要用它来简单地代替Array)。如不雅用Chrome的Profile对象查看Heap Snapshot，会发明ArrayBuffer会被零丁列为一类，也许它的内存分派和构造与Array以及其他JS对象有一些差别吧。

ArrayBuffer是不克不及直接被拜访的，是以须要借助Typed Array。Typed Array是一组具体数据类型的Array-Like类型的统称，包含

Int8Array 8位有符号整数，类似于C琅绫擎的char
Uint8Array 8位无符号整数，类似于C琅绫擎的unsigned char
Uint8ClampedArray 8位无符号整数，跟Uint8类似，但在溢出处理上不大年夜一样
Int16Array 后面这些类型就不罗嗦了
Uint16Array
Int32Array
Uint32Array
Float32Array
Float64Array

Typed Array的背后是一个ArrayBuffer，也就是说，事实上的数据是存在ArrayBuffer琅绫擎的，而Typed Array只是给你供给了一个某种类型的读写接口，用MDN的话说，叫做

Multiple views>

01 02 03 04 05 06 07 08

也就是说它有8个字节，我们分别用它来构造Uint8Array, Uint16Array, Uint32Array，则可以获得

var u8 = new Uint8Array(buffer); // length为8 
 
var u16 = new Uint16Array(buffer); // length为4 
 
var u32 = new Uint32Array(buffer); // length为2

它们的内容分别为

[1, 2, 3, 4, 5, 6, 7, 8] 
 
[513, 1027, 1541, 2055] 
 
[67305985, 134678021]

这不难解得。

而如不雅用同样的ArrayBuffer构建带符号整数类型，则可能因为整数溢出而获得不合的结不雅，膳绫擎的例子并没有碰着，有兴趣的话可以本身尝尝。是以应用Typed Array也可以用来做有符号数和无符号数的转换。

获取二进制数据

经由过程XMLHttpRequest 2

XHR2的接口跟XHR几乎是一样的，当制订xhr.responseType = 'arraybuffer'今后，在成功获取数据的回调里就可以经由过程xhr.response来获得请求结不雅的ArrayBuffer了，然后就可以按照你的意愿来构造各类Typed Array进行拜访。

responseType还可以有blob取值，可以用xhr.response获得Blob对象。

然而最最重要的一个概念照样：Typed Array不直接存放任何数据，所有对Typed Array进行读写的操作，最终都邑落实到它背后所持有的ArrayBuffer的身上。ArrayBuffer才是真正的raw bytes，而Typed Array只是一个操作窗口/操作视图(View)。

1/3 1 2 3 下一页尾页

　　推荐阅读

　　无线墨仓混战为何GT5820脱颖而出？

加墨式也好，墨仓式也罢，这一类产品已经敏捷成为市场上的核心，无论是家里照样几小我的小公司，一分钱一张的打印成本让用户异常爱好，惠普、佳能、兄弟在以前两年纷纷推出产品，没有再让>>>详细阅读

本文标题：JS中的二进制操作简介

地址：http://www.17bianji.com/lsqh/34714.html

1/2 1