异世之我是死神因为随着XHR2和现代浏览器的普及，在浏览器当中处理二进制不再向过去那样无所适从，随着vas/WebGL等新技术逐渐开始进入大众视野，也会用到一些字节数组或者16位、8位整数等东西。在刚刚发布的4.0版本中，Buffer的底层使用了更符合JS标准的Uint8Array来实现，浏览器和node.js再次向相同的目标靠近了一点点，所以对于JS中处理二进制，我就打算写这篇文章作一个入门性质的流水账，方便一些对二进制处理不了解的同学快速入门，虽然在前端领域用到的不多，不过也可以作为茶余饭后的休闲谈资。

　　现今世界上几乎所有的计算机体系结构都是以字节（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对象有一些差别吧。

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

　　举个栗子，如果我们有一个ArrayBuffer名为buffer（先不考虑怎么构造这个测试数据），内容如下：

　　可以看出，如果要手工构造上面的测试数据ArrayBuffer，用Uint8Array就会很方便（呃事实上这是我个人最常用的一种Typed Array）。

　　而如果用同样的ArrayBuffer构建带符号整数类型，则可能因为整数溢出而得到不同的结果，上面的例子并没有碰到，有兴趣的话可以自己试试。因此使用Typed Array也可以用来做有符号数和无符号数的转换。

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

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

　　在HTML5中提供了对表单的文件控件[ ] 更丰富的操作，可以通过inputDOM对象的.files来获取一个FileList，当然通常浏览器都只提供了单选的文件控件，于是这里都只会有一个File对象。另外，通过拖拽、剪贴板等方式也能获取到File或者Blob。

　　File继承了Blob，并提供了name, lastModifiedDate等基础元数据，但是依然是一个深度封装，不能直接获取到它的二进制。

　　这时候需要借助FileReader的帮忙。FileReader提供了一组用来将Blob读取为更为实用的类型的方法

　　可以干什么呢？例如图片上传之前的本地预览（甚至基于canvas的编辑）等等都可以实现了。

　　何谓消费？最常见的方式也许就是通过XHR2直接把二进制数据以文件方式POST到服务端去。

　　这里我比较推荐使用FormData来构造POST数据。因为在服务端收的时候会比较容易一些，具体有兴趣可以去找找别人的例子。

　　虽然直接提交ArrayBuffer也是可以的，但是这种时候服务端收到的POST body会是一大团，用起来不方便。如果要使用FormData来提交ArrayBuffer，需要先将其构造成Blob。

　　上面的代码就能以buffer向后偏移10字节处为起点来构造Int16Array，但是如果将10设置为一个奇数，会发现如下错误：

　　这是因为Typed Array对内存对齐有要求，它不能在非对齐的位置建立，同理，Uint32Array和Int32Array则要求偏移量是4字节对齐的。

　　因此如果你希望在非对齐的位置进行读写，则需要借助DataView的帮忙。

　　我们日常中所写的程序，几乎都不需要关心字节序，因此这个问题没那么严重，知道自己的程序会有字节序问题的人，开发到这里也肯定会知道问题的存在，但这里还是稍微提一下。

　　按照MDN的说法，Typed Array只会使用当前平台的字节序，例如我们现在用的桌面电脑不论PC还是Mac都是x86/x64的，也就是little-endian了。

　　使用DataView，不仅可以解决上面说到的内存对齐的问题，还可以指定读写时的字节序，具体参数都在文档里面了，就不搬运了。

　　使用DataView配合Typed Array也可以做到一个检测当前平台字节序的技巧：

　　如果你编写的程序需要垮体系结构例如x86/ARM/PPC等，则在交换文件和网络包的时候需要谨慎处理字节序，当然一个办法是在这些地方预先规范统一字节序以防后患。不过那些都是题外话了。

　　另外罗嗦一句，浏览器还提供了一系列所谓的“Binary String”，就是一些看起来像乱码一样的字符串，然后又提供了atob/btoa这种方式来对Base64和“Binary String”进行相互转换，甚至FileReader还提供了readAsBinaryString方法（已经废弃了，善哉）。这个Binary String真是谁用谁遭殃，别问我为什么知道……