Javascript中的二进制数据类型 Javascript中的二进制数据类型

原文：Javascript中的二进制数据类型

最近工作上接手的一个项目涉及到了图片的加密压缩与上传，也就需要用JavaScript直接去操作二进制数据，特地整理了一下JavaScript中的二进制数据类型，当做学习笔记。
起源历史上JavaScript是没有读写二进制数据能力的，但随着es5中Blob对象的引入以及es6中ArrayBuffer对象、TypedArray和DataView对象的规范化，js处理二进制数据的能力大幅度增强，也能直接处理文件流，网络流等二进制Buffer数据了。
基本的二进制数据类型 ArrayBuffer
ArrayBuffer代表内存当中的一段通用的、固定长度的原始二进制数据缓冲区。它无法被直接读写，需要配合TypedArray对象或DataView对象来操作缓冲区的内容。
我们可以直接通过ArrayBuffer构造函数来创建一段存放二进制数据的连续内存区域。

const buffer = new ArrayBuffer(8);

这里我们创建了一个长度为8个字节的连续内存区域。由于我们没有赋初值，每一个字节单元的值都默认是0.（这里注意ArrayBuffer不能像数组那样直接通过索引下标来访问内存单元的数据）
ArrayBuffer有一个只读的byteLength属性可以读取数组的字节长度，这在ArrayBuffer创建的时候就已经确定。ArrayBuffer还有一个ArrayBuffer.prototype.slice方法用来拷贝自身的一部分生成一个新的ArrayBuffer。

const buffer = new ArrayBuffer(8); buffer.byteLength// 8 const buf = buffer.slice(0, 4); buf.byteLength // 4

但ArrayBuffer自身是不可直接读写的，更多操作还是需要依靠TypedArray或DataView来实现。
TypedArray
我们通过ArrayBuffer在内存中存储一段未加工的二进制数据，这一段二进制数据本身只是内存中存储的0,1数据，我们通过不同的格式来解读就会赋予它不同的意义，这里的格式也就是‘视图’，视图有两种，一种是TypedArray，一种是DataView。
TypedArray是一簇api相似的Array-like对象，现在包括以下九种：

Int8Array();

Uint8Array();

Uint8ClampedArray();

Int16Array();

Uint16Array();

Int32Array();

Uint32Array();

Float32Array();

Float64Array();

生成视图可以采用多种方法来。

// TypedArray 不是实际存在的对象，指代以上九种构造函数之一 new TypedArray(length); new TypedArray(typedArray); new TypedArray(object); new TypedArray(buffer [, byteOffset [, length]]);

以Int8Array为例，我们创建一个以8bit为单位存储单元的内存数组。

// 在已存在的ArrayBuffer 上生成视图 const buffer = new ArrayBuffer(4); const x1 = new Int8Array(buffer); x1// [0, 0, 0, 0]// 不借助事先生成的ArrayBuffer, 直接生成视图 const x2 = new Int8Array(4); x2[0] = 1; x2// [1, 0, 0, 0]// 通过已有的TypedArray转化而来 const x3 = new Int8Array(4); x3[0] = 1; const x4 = new Int8Array(x3); x4[0] // 1 x4[0] = 2; x3[0], x4[0]// 1, 2// 通过对象转化，类似于Array.from方法 const x5 = new Int8Array([1, 2, 3, 4]); x5// [1, 2, 3, 4]

TypedArray表现和Array类似，可以用方括号运算符([])访问特定内存单元的数据，也可以使用几乎所有的数组方法，具体可以参考MDN。
TypedArray还有几个特有的属性与方法。

TypedArray.prototype.buffer: 指向我们操作的TypedArray引用的ArrayBuffer；
TypedArray.prototype.byteLength: 返回ArrayBuffer的字节长度；
TypedArray.prototype.byteOffset: 读取ArrayBuffer时的字节偏移量；
TypedArray.prototype.set: 复制一个指定数组的元素保存到TypedArray；
TypedArray.prototype.subarray: 拷贝TypedArray的一个子数组为副本；

const buffer = new ArrayBuffer(4); const int8Arr = new Int8Array(buffer); int8Arr.buffer === buffer; // true int8Arr.byteLength// 4 int8Arr.byteOffset// 0const int8Arr2 = new Int8Array(4); int8Arr2.set(int8Arr); // 以int8Arr为数据来源制作了一个相同数据的副本 int8Arr.subarray(2, 3); // 返回以int8Arr中索引从2（含）到3（不含）的数据为数据来源的副本

DataView
不同于类型化数组，一个数组只能存放同一类型的数据，DataView可以在内存中存放不同类型的数据。但TypedArray的一系列方法足以应付各种场景下的ArrayBuffer存取操作，需要用到DataView的场景较少，这里简单介绍下。
DataView对象接受一个ArrayBuffer生成视图。

// new DataView(buffer [, byteOffset [, length]]); const buffer = new ArrayBuffer(4); const dv = new DataView(buffer);

DataView有十六个实例方法对应于8种数据类型的存取操作。

getInt8()

getUint8()

getInt16()

getUint16()

getInt32()

getUint32()

getFloat32()

getFloat64()

setInt8()

setUint8()

setInt16()

setUint16()

setInt32()

setUint32()

setFloat32()

setFloat64()

const buffer = new ArrayBuffer(4); const dv = new DataView(buffer, 0); dv.setInt8(0, 4); dv.getInt8(0);

web浏览器中的二进制对象 web浏览器中常见的二进制对象有Blob和File等。
Blob
Blob对象代表一段二进制对象，并提供了一系列对该二进制数据操作的方法。
生成Blob对象可以使用Blob构造函数，或者对已有Blob对象使用slice切片生成。

const obj = {hello: 'world'}; const blob = new Blob([JSON.stringify(obj)], {type: 'application/json'});

Blob构造函数接受两个参数，一个是buffer数据数组，第二个是只有一个type属性的options对象，type指定文件的MIME类型。
生成的Blob实例有两个只读的属性。

【Javascript中的二进制数据类型】size 生成二进制数据的大小，单位是字节
type 生成二进制数据的MIME类型

File
File对象继承与Blob对象，在Blob的基础上增加了一些属性。

File.prototype instanceof Blob// true

最常见的File类型来自type为file的input元素。

FileReader
在获取到Blob对象或File对象后，我们通常还需要借助FileReader对象将我们的二进制数据转换成需要的形式，如转换成DataURL后用于image, audio, video等标签的直接引入，或转化成ArrayBuffer后进一步对我们的二进制数据进行操作。
FileReader提供了以下转化方法。

FileReader.prototype.readAsDataURL

FileReader.prototype.readAsArrayBuffer

FileReader.prototype.readAsText

FileReader.prototype.readAsBinaryString

function readBlob(blob, type) { return new Promise(resolve => { const reader = new FileReader(); reader.onload = (e) => { resolve(e.target.result); }; reader[`readAs${type}`](blob); }); }const blob = new Blob('hello, world!'.split('')); readBlob(blob, 'DataURL').then(console.log);

其他
除了FileReader外，还有些web api可以输出我们的Blob/File数据。

URL.createURLObject

Response对象提供的方法

Response.prototype.arrayBuffer

Response.prototype.blob

Response.prototype.json

Response.prototype.text

Response.prototype.formData

const str = 'hello, world'; const blob = new Blob(str.split('')); URL.createURLObject(blob); new Response(blob).arrayBuffer(buffer => console.log(new Int8Array(buffer)); // Response也可以直接转化一个String new Response(str).arrayBuffer(buffer => console.log(new Int8Array(buffer));

应用根据以上的内容，我们已经可以进行String, Blob/File, ArrayBuffer, TypedArray, DataURL, ObjectURL这些对象之间的相互转化了。有的转化操作直接使用现有api即可，有的需要中间状态过度。以下为几种常见的应用到这些转换的场景。
将json数据下载为本地文件。

function download (url, name) { const a = document.createElement('a') a.download = name a.rel = 'noopener' a.href = https://www.it610.com/article/url a.dispatchEvent(new MouseEvent('click'))// or a.click() } // 要被下载的json数据 const json = { name: 'coffeeBean' }; const str = JSON.stringify(json, null, 4); const dataURL = `data; ,${str}`; const blob = new Blob(str.split('')); const url = URL.createObjectURL(blob); download(dataURL, 'demo1.json'); download(url, 'demo2.json');

上传本地图片并在网页中显示。

利用canvas实现图片压缩

function compress(img, mimeType, maxWidth, quality) { const canvas = document.createElement('canvas'); cosnt ctx = canvas.getContext('2d'); let width = img.width; let height = img.height; if (width > maxWidth) { height = Math.round(height *= maxWidth / width); width = maxWidth; } canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); return new Promise(resolve => { canvas.toBlob(blob => { resolve(blob); }, mimeType, quality); }); }// compress(img, 'image/png', 1080, 0.9) // 第一个参数为要压缩的图片对象 // 第二个为图片的MIME类型 // 第三个为图片等比压缩后的最大宽度 // 第四个参数为canvas压缩的质量 // 函数返回压缩后的图片Blob，可以作为图片文件上传到服务器

js中二进制数据类型的应用场景还有很多，但理解了这些二进制对象之间的关系以及原理之后，就能够在各种二进制数据中自由转换，场景应对起来也就游刃有余了。
参考