前端需要懂得的二进制

作为一名前端，在工作中也会遇到很多有关二进制处理的需求，如 EXCEL 表格的导出，PDF 的生成，多个文件的打包，音频的处理。

从前后端整体上来说前端代表 UI 层，它的外在表现是 human readable 的，而服务端代表数据层，所表现出来的是 machine readable 。如果 EXCEL 以及 PDF 的处理交由服务端处理，服务端免不了要做一层格式化的逻辑处理，以便与前端保持一致。一来增加了复杂度，二来容易造成前端与服务器端的数据不一致。此时为了减少复杂度，工作量有可能都尽可能在浏览器端完成。

本篇文章总结了浏览器端的二进制以及有关数据之间的转化，如 ArrayBuffer ， TypedArray ， Blob ， DataURL ， ObjectURL ， Text 之间的互相转换。为了更好的理解与方便以后的查询，特意做了一张图做总结。

二进制相关数据类型
在介绍常见的二进制数据处理之前，先简单介绍下几种二进制相关的数据类型

ArrayBuffer && TypedArray
TypedArray 是 ES6+ 新增的描述二进制数据的类数组数据结构。但它本身不可以被实例化，甚至无法访问，你可以把它理解为 Abstract Class 或者 Interface 。而基于 TypedArray ，有如下数据类型：

Uint8Array
Uint
Unsigned Int
8
Int8Array
Uint16Array
Int16Array
…

通过 Uint8Array ，即可知道 Uint16Array ， Int8Array 所代表的意义。

const array = new Int32Array([1, 2, 3])

// .length 代表数组的大小
// 3
array.length

// .btyeLength 代表数据所占字节大小
// 12
array.byteLength
ArrayBuffer 代表二进制数据结构， 「并且只读」 ，需要转化为 TypedArray 进行写操作。

const array = new Int16Array([1, 2, 3])

// TypedArray -> ArrayBuffer
array.buffer

// ArrayBuffer -> TypedArray
new Int16Array(array.buffer)

// buffer.length 代表数据所占用字节大小
array.buffer.length === array.byteLength
连接多个 TypedArray
TypedArray 没有像数组那样