JavaScript与二进制数据的恩怨情仇

09/03/2020 00:00

点击量：次

JavaScript

TypedArray

Arraybuffer

缓冲区

类型数组

endian

字节序

视图

DataView

blob

file

上传

下载

编程江湖，终日血雨腥风，论及二进制数据，又有多少豪杰谈笑风生，风生水起，水起船高，高深莫测……

不扯远了，想必谈到二进制数据，大家联想到的就会是 1010110110001 或者 00000000 11111111 00000101 这样的数据流；而这武林之中，号称三剑客之一的 JavaScript，在其行走江湖之际（日常开发），可能厮杀（处理）最多的类型就是直观的数字、字符串或者对象等；那么与极少露面的隐士（二进制）狭路相逢之时，它又将作何应对（描述与处理二进制数据）呢？是波澜壮阔，还是全身而退，抑或是力挽狂澜，且听本文中分解。

ArrayBuffer

未曾识得英雄面，只缘身在此山中；先来了解第一个概念，ArrayBuffer 表示的是一个原始二进制数据缓冲区（buffer），长度固定，并且内容是只读的；如果需要执行写操作，那么需要使用 类型化数组（TypedArray）或者 数据视图（DataView）来实现；

知己知彼，方可百战百胜；在 JavaScript 中与二进制数据接触最紧密的可能就是 ArrayBuffer 了，之前讲目的是要描述和操作二进制数据，那么就要把这些数据先存放到某个地方，然后才能对其进行操作，这里的 ArrayBuffer 缓冲区就可以被看成这么一种地方；当然，可能最直观的方式就是将其保存到字符串中，如 "101011011"，又或者存入数组，如 [1,0,1,0,1,1,0,1]，这样确实是方便人类了，但是机器执行的效率也降低了，因为毕竟字符和数组是另外两种基本类型，并且也不是专门为此设计的；所以，就出现了专门为缓冲数据设计的 ArrayBuffer，并通过结合视图来提供一个访问和操作数据的接口；

语法

实例化 ArrayBuffer 构造函数时，只接受一个参数，就是要创建的 Arraybuffer 的大小，单位是字节，不指定的话默认为 0；同时它也提供了一个实例属性 byteLength（只读），实现对当前 ArrayBuffer 字节值的访问；

举例：

var buffer = new ArrayBuffer(3);

console.log(buffer.byteLength); // 3

另外，由于 ArrayBuffer 只是负责创建这么一段数据区域，并没有提供初始化赋值的接口，所以这 n 字节的数据都为空，即都置 0；

方法

由于 ArrayBuffer 构造函数本身是用于创建数据缓冲区，并且数据只读，所以提供的属性和方法也只有少数几个；

.slice()

用于返回一个新的缓冲区，语法为 .slice(start, end)，即以当前缓冲区为母本，从索引为 start 的位置开始，到 end 位置结束（end 位置不包含在内），然后复制并返回这一区段的数据；其用法大致与 Array.prototype.slice() 类似，举例说明：

var buffer1 = new ArrayBuffer(5);
var buffer2 = buffer1.slice(0, 3);
var buffer3 = buffer1.slice(2);
var buffer4 = buffer1.slice(1, -1);

console.log(buffer2.byteLength); // 3
console.log(buffer3.byteLength); // 3
console.log(buffer4.byteLength); // 3

ArrayBuffer.isView()

该方法用来判断所提供的参数值是否是一种 ArrayBuffer 视图，比如类型化数组（TypedArray）和数据视图（DataView），例如：

console.log(ArrayBuffer.isView());                   // false
console.log(ArrayBuffer.isView([1, 2, 3]));          // false
console.log(ArrayBuffer.isView(new ArrayBuffer(3))); // false

console.log(ArrayBuffer.isView(new Int8Array()));                 // true
console.log(ArrayBuffer.isView(new Uint32Array(3)));              // true
console.log(ArrayBuffer.isView(new DataView(new ArrayBuffer()))); // true

类型化数组（TypedArray）

概述

工欲善其事必先利其器；前面提到操作 ArrayBuffer 创建的数据缓冲区需要使用视图（view）实现，类型化数组就是这么一个描述二进制数据缓冲区（buffer）的视图（view），这个视图是一个 类数组。另外，不存在 TypedArray() 这个构造函数，它指的是一类数组，因此它有多种实现，即多个类型化数组构造器函数；可以姑且理解为水果之于苹果和香蕉，水果指的是一类食物，都知道并不存在名为水果的一种具体食物，但是苹果和香蕉是具体存在的；

有效的类型如下：

Int8Array(); // 8 位二进制有符号整数
Uint8Array(); // 8 位无符号整数（超出范围后从另一边界循环）
Uint8ClampedArray(); // 8 位无符号整数（超出范围后为边界值）
Int16Array(); // 16 位二进制有符号整数
Uint16Array(); // 16 位无符号整数signed
Int32Array(); // 32 位二进制有符号整数
Uint32Array(); // 32 位无符号整数
Float32Array(); // 32 位 IEEE 浮点数（7 位有效数字，如 1.1234567）
Float64Array(); // 64 位 IEEE 浮点数（16 有效数字，如 1.123...15)
BigInt64Array(); // 64 位二进制有符号整数
BigUint64Array(); // 64 位无符号整数

语法：

万法不离其宗，一招一式都有迹可循；后面就都以 Int8Array() 为例进行说明，以下代码展示了可以传入的参数类型：

new Int8Array(); // ES2017 中新增
new Int8Array(length); 
new Int8Array(typedArray); 
new Int8Array(object); 
new Int8Array(buffer [, byteOffset [, length]]); 

无参数

最好的招式是没有招式；实例化构造函数时不传入任何参数，则返回一个空的类型化数组：

var i8 = new Int8Array();

console.log(i8); // Int8Array []
console.log(i8.length); // 0
console.log(i8.byteLength); // 0
console.log(i8.byteOffset); // 0

length

一寸长一寸强；传入一个数字类型的参数，表示申明类型化数组中元素的个数：

var i8 = new Int8Array(3);
var _i8 = new Int8Array('3'); // 字符串会先被转换成数字

console.log(i8); // Int8Array(3) [0, 0, 0]
console.log(_i8); // Int8Array(3) [0, 0, 0]
console.log(i8.length); // 3
console.log(i8.byteLength); // 3
console.log(i8.byteOffset); // 0

typedArray

好招不怕效仿；当传入的一个参数同样是一个类型化数组时，则返回一个原类型数组的拷贝（不是引用）：

var i8 = new Int8Array(3);
var _i8 = new Int8Array(i8);

console.log(i8 == _i8); // false
console.log(i8 === _i8); // false
console.log(_i8); // Int8Array(3) [0, 0, 0]

object

海纳百川有容乃大；使用该参数时类似于用 TypedArray.prototype.from() 方法创建的类型数组，同时该方法也和 Array.from() 方法类似，即这个 object 参数是一个类数组的对象，或者是可迭代的对象；举例：

// 数组
var i81 = new Int8Array([1, 2, 3]);
console.log(i81);
// Int8Array(3) [1, 2, 3]

// 等价的操作
var i81 = Int8Array.from([1, 2, 3]);
// Int8Array(3) [1, 2, 3]

// 类数组
var i82 = new Int8Array({
    0: 1,
    1: 2,
    2: 3,
    length: 3
});
console.log(i82);
// Int8Array(3) [1, 2, 3]

// 可迭代对象
var i83 = new Int8Array(new Set([1, 2, 3]));
console.log(i83);
// Int8Array(3) [1, 2, 3]

buffer, byteOffset, length

众人拾柴火焰高；该构造函数也支持同时提供三个参数，第一个 buffer 指的是数组缓冲区，是 ArrayBuffer 的实例，同时也是 Int8Array.prototype.buffer 这个属性的值；butyOffset 指的是元素的偏移值，表示从数组中第几个元素开始读取，默认是 0，也就是数组的第一个元素；length 指的是在设置了偏移值后，要读取的元素长度，默认是整个数组的长度；举例说明：

var buf = new Int8Array([1,2,3,4,5]).buffer;
var i8 = new Int8Array(buf, 1, 2);

console.log(i8);
// Int8Array(2) [2, 3]

也就是让申明的类型化数组在提供的 buffer 的基础上，从它的索引为 1 的元素（第二个元素）开始读取，然后向后读取 2 个元素；该操作一般用于对缓冲区数据的截取；

类型差异

存在即合理；根据前面的介绍，TypedArray 定义了多种类型，如 Int8Array, Uint8Array, Int16Array 等，这样做也是为了适应不同的应用场景，接下来大致了解一下几个典型的类型化数组之间的区别；

有无符号

以 Int8Array 和 Uint8Array 为例，其实 有符号 的意思是数组中的元素可以存在符号，即可以是负数；因此 无符号 的意思就是元素只能是非负数，举例：

var i8 = new Int8Array([1, 2, 3]);
var _i8 = new Int8Array([-1, -2, -3]);
var ui8 = new Uint8Array([1, 2, 3]);
var _ui8 = new Uint8Array([-1, -2, -3]);

console.log(i8);  // Int8Array(3) [1, 2, 3]
console.log(_i8); // Int8Array(3) [-1, -2, -3]
console.log(ui8); // Uint8Array(3) [1, 2, 3]
console.log(_ui8);// Uint8Array(3) [255, 254, 253]

可以发现有符号类型之处初始化负数元素，而无符号则会对负数进行转换，具体转换方式后面会提到；

元素范围

有无符号的类型数组，除了元素的值的正负区别外，元素的取值范围也有所不同；下面是一份具体的清单：

Type	Range
Int8Array	-128 ~ 127
Uint8Array	0 ~ 255
Uint8ClampedArray	0 ~ 255
Int16Array	-32768 ~ 32767
Uint16Array	0 ~ 65535
Int32Array	-2147483648 ~ 2147483647
Uint32Array	0 ~ 4294967295
Float32Array	1.2×10-38 ~ 3.4×1038
Float64Array	5.0×10-324 ~ 1.8×10308
BigInt64Array	-263 ~ 263-1
BigUint64Array	0 ~ 264-1

可以看出，为了顾及有无符号类型的单个元素取值范围区间一样，所以就调整了它们的取值上下限；

字节位数

以有符号类型为例，可以发现有 Int8Array, Int16Array 等几个不同的类型数组，唯一的区别就是他们构造函数名字中间的数字不同，其实这个数字指的是实例化后的类型化数组的单个元素的大小，即多少位，8 就是 8 位，即一字节，16 就是 2 字节，类推；其实，这个数字也反应了类型数组中 BYTES_PER_ELEMENT 这个属性的值，从名字也可以看出代表的是每个元素的字节数；举例说明：

var i8 = new Int8Array(3);
var i16 = new Int16Array(3);
var i32 = new Int32Array(3);

console.log(i8.BYTES_PER_ELEMENT); // 1
console.log(i16.BYTES_PER_ELEMENT); // 2
console.log(i32.BYTES_PER_ELEMENT); // 4

console.log(i8.length); // 3
console.log(i16.length); // 3
console.log(i32.length); // 3

console.log(i8.byteLength); // 3
console.log(i16.byteLength); // 6
console.log(i32.byteLength); // 12

另外 byteLength 这个属性其实指的是类型数组总的字节大小，其值等于单个元素字节值乘以元素个数（byteLength = BYTES_PER_ELEMENT x length）;

Clamped

鹤难隐于鸡群；从前面的清单中可以找到 Uint8ClampedArray 这个独特的类型数组，区别就是中间多了 clamped 这个单词，词典解释的意思是“夹紧，箝位”，具体功能是什么，下面通过代码来解释：

var i8 = new Uint8Array([1, 2, 3]);
var _i8 = new Uint8Array([-1, -2, -3]);
var _i8_ = new Uint8Array([255, 256, 257]);

var uic8 = new Uint8ClampedArray([1, 2, 3])
var _uic8 = new Uint8ClampedArray([-1, -2, -3])
var _uic8_ = new Uint8ClampedArray([255, 256, 257])

console.log(i8);    // Int8Array(3) [1, 2, 3]
console.log(_i8);   // Int8Array(3) [255, 254, 253]
console.log(_i8_);  // Uint8Array(3) [255, 0, 1]

console.log(uic8);  // Uint8ClampedArray(3) [1, 2, 3]
console.log(_uic8); // Uint8ClampedArray(3) [0, 0, 0]
console.log(_uic8_);// Uint8Array(3) [255, 255, 255]

不知诸位可否查探出端倪，这里也能解释之前说的无符号类型数组实例化时转换负值的问题；通过分析不难发现，转换方式类似于素组循环取值，就是如果传入的值超过了元素的取值范围的上限或下限之一时，那么超过的部分就会，从范围的另一个界限开始依次向后计数；所以上例中 -1 会被转换为 255，257 会被转换成 1；

而对于 Uint8ClampedArray 这个类型数组，其实差不多也是字面的意思，类似于一个 “夹住” 的操作：超出范围不会发生循环转换，无论超出多少都只会被置为对应的边界值，所以上例中 -1, -2, -3 都被转换为 0，256, 257 则都被转换成了 255；

浮点数

论世间谁主浮沉；仅有的两个浮点类型的类型数组，Float32Array 和 Float64Array，浮点的意思就是元素值可以是小数，因为之前介绍过的都是 int(整数) 类型的；依然来举例说明：

var f32 = new Float32Array([1.11, 2.12345678911, -3.33333333333333333333333333])
var f64 = new Float64Array([1.11, 2.12345678911, -3.33333333333333333333333333])

console.log(f32);
// Float32Array(3) [1.1100000143051147, 2.1234567165374756, -3.3333332538604736]
console.log(f64);
// Float64Array(3) [1.11, 2.12345678911, -3.3333333333333335]

从结果来看 32 位浮点类型数组每个元素都保留到小数点后 16 位，而 64 位是最多保留到 16 位，具体的细节就不深究了；

操作元素

欲与二进制数据一决高低，首先肯定是选几样趁手兵器；虽然类型化数组拥有普通数组的大部分方法，比如 every, forEach, slice 等等，但也有自己特有的方法值得说一下，比如 .set() 这个方法；

.set() 方法用于把指定数组的（所有）元素添加到当前数组的指定位置，接受的参数为 .set(array[, ofset])，这里的 array 可以是普通数组或类型化数组，offset 指的是偏移值，即从哪个位置开始写入指定数组元素；举例说明：

var i8 = new Int8Array(6);
var i81 = new Int8Array(6);
var i82 = new Int8Array(6);
var arr = [1, 2, 3];
var arr1 = [1, 2, 3, 4, 5, 6];

i8.set(arr, 2);
console.log(i8);
// Int8Array(6) [0, 0, 1, 2, 3, 0]

i81.set(arr1, 2);
console.log(i81);
// Uncaught RangeError: offset is out of bounds

i82.set(arr, 6);
console.log(i82);
// Uncaught RangeError: offset is out of bounds

证明无论是拷贝的数组大小超过原数组，还是偏移值过大使得拷贝结果超过原数组，都会报错提示偏移超过边界，因此使用时需计算准确；

操作缓冲区

箭在弦上，东风将至；前面将 TypedArray 描述为操作 ArrayBuffer 中数据的视图，下面就来看一下具体的操作方法；

数据读取

数据转换

敌不动我不动；使用类型化数组操作 ArrayBuffer 的数据前，需要先获取其中的数据，也就是把 ArrayBuffer 转换为 TypedArray 类型；先来看一下这两种类型互相转换的方法：

ArrayBuffer 转换为 TypedArray：

var buffer = new ArrayBuffer(5); // 先初始化 5 字节长的区域
var i8 = new Int8Array(buffer); // 再把数据传递进 TypedArray

console.log(i8); // Int8Array(5) [0, 0, 0, 0, 0]

这里也可以验证，ArrayBuffer 新创建的区域数据都被置 0 了；

TypedArray 转化为 ArrayBuffer：

var i8 = new Int8Array(5);
var buffer = i8.buffer;

console.log(buffer); // ArrayBuffer(5) {}

读取方式

前面讲道，类型化数组有多种不同的实现，比如 1 字节有符号元素的 Int8Array，2 字节的 Int16Array 等；根据 ArrayBuffer 的定义，缓冲区是以 1 字节 为单位进行创建的，所以我们通常读取文本类数据使用 Uint8Array，因为它也正好每个元素的大小为 1 字节，当然，也可以选择用 Uint16Array 来 2 字节地挨个读，其他类型类推；

通过代码来观察一下具体的读取方式：

var data = new Uint8Array([1, 2, 3, 4])
var buffer = data.buffer;

var ui8 = new Uint8Array(buffer);
var ui16 = new Uint16Array(buffer);

console.log(ui8);  // Uint8Array(4) [1, 2, 3, 4]
console.log(ui16); // Uint16Array(2) [513, 1027]

原始数据 data 是 4 字节大小，通过 Uint8Array 就是以 1 字节为单位，所以得到的也是原始的数据 [1, 2, 3, 4]，这里由于数据小所以有无符号无影响；而通过 Uint16Array 则是以 2 字节为单位进行读取，所以总的元素长度为 2（2 = 4 / 2），但是其中的单个元素 513, 1027 又分别是如何得到的呢？我们可以通过计算来探究一下:

首先看 1, 2 这两个元素，根据结果它们被读取成为了 513，那么就把这几个元素的二进制数表示出来（缓冲区就是存储的二进制数据）：

"1":   00000001
"2":   00000010
"12":  00000001 00000010

"513": 00000010 00000001
"21":  00000010 00000001

规律显而易见了，513 这个 2 字节的数据，其实是把 1 和 2 这两个挨着的 1 字节的数据，以倒序方式拼接在一起的；

再来看一下 3 和 4 这两个是否也是以同样的方法得出 1027 这个数据的：

"3":    00000011
"4":    00000100
"34":   00000011 00000100

"1027": 00000100 00000011
"43":   00000100 00000011

结果不出所料，所以像 Uint32Array 等以多个字节读取数据的类型数组，方法也可以类推；

字节序

另外值得一提的是，上面所说的倒序拼接方式，其实有个专业术语，叫做 字节序（Endian），对应这个英文单词应该会感觉似曾相识，例如 Linux 中执行 lscpu 得到的结果中，就会发现它的存在：

Architecture:        x86_64
CPU op-mode(s):      32-bit, 64-bit
Byte Order:          Little Endian
Address sizes:       36 bits physical, 48 bits virtual

字节序，或字节顺序（”Endian”、”endianness” 或 “byte-order”），描述了计算机如何组织字节，组成对应的数字。

这个字节序可以分为：

Little Endia（低字节序）：低位数据放入存储地址的低位，高位数据放入高位地址；

这种顺序就显得和内存上的存储地址顺序（阅读模式下低位在右，高位在左）保持一致，并且也是一种常见的方式，比如上面的英特尔处理器；只不过对于这种顺序人类阅读时就要反着读了（从右至左），比如上面例子中的数据 12 就是以 21 的顺序读取的，也可以类比这种日期格式："Sat 07 Mar 2020";

Big Endian（高字节序）：低位数据存入高位地址，高位数据放入低位；

这种顺序可能更符合人类的阅读习惯（从左至右），它一般应用在互联网标准的数据结构中，可以类比 "2020-03-07" 这种日期格式；

数据修改

下面通过类型化数组视图来尝试修改一下 ArrayBuffer 缓冲区中的内容：

var buffer = new ArrayBuffer(3);
var i8 = new Int8Array(buffer);

console.log(i8); // Int8Array(3) [0, 0, 0]

for (let i = 0; i < i8.length; i++) {
    i8[i] = 1;
}

var _i8 = new Int8Array(buffer); // 新建个视图验证是否修改成功

console.log(_i8); // Int8Array(3) [1, 1, 1]

数据拼接

用之前讲过的 .set() 方法来尝试将数据拼接进缓冲区：

var buffer = new ArrayBuffer(6);
var i80 = new Int8Array(buffer);

console.log(i80); // Int8Array(6) [0, 0, 0, 0, 0, 0]

var i81 = new Int8Array([1, 2, 3]);
var i82 = new Int8Array([4, 5, 6]);

i80.set(i81);
i80.set(i82, 3);

var _i80 = new Int8Array(buffer); // 验证是否修改成功

console.log(_i80); // Int8Array(6) [1, 2, 3, 4, 5, 6]

注意：这里不能使用数组的 .concat() 这个方法来进行元素拼接，因为类型化数组中并没有内置这个方法，不然会报错，如下：

var arr1 = [1, 2, 3];
var arr2 = arr1.concat(4, 5, 6);

console.log(arr2); // [1, 2, 3, 4, 5, 6]

var i81 = new Int8Array([1, 2, 3]);
var i82 = i81.concat(4, 5, 6);

console.log(i82);
// Uncaught TypeError: i81.concat is not a function

同样地，.splice() 这个可以替换元素的方法也不存在于类型化数组中；

数据视图（DataView）

概述

一个好汉三个帮；DataView 是另外一个用于从 ArrayBuffer 缓冲区中读写数据的视图接口，其特点就是考虑了 字节序 的问题，后面会讲；

语法为：

new DataView(buffer [, byteOffset [, byteLength]]);

其中 buffer 指传入的数据缓冲区，如 ArrayBuffer；byteOffset 指偏移的字节量，默认第一个字节，byteLength 指要传入的数据的字节长度，默认整个 buffer 的长度；并且这三个参数都可以在实例化后通过相应属性（只读）访问到；

var buffer = new Int8Array([1, 2, 3, 4]).buffer;
var dv = new DataView(buffer, 1, 2);

console.log(dv); // DataView(2) {}
console.log(dv.buffer); // ArrayBuffer(4) {}
console.log(dv.byteOffset); // 1
console.log(dv.byteLength); // 2

操作数据

DataView 提供了一系列的方法用于操作缓冲区的数据，先简单预览一下：

Read	Write
getInt8()	setInt8()
getUint8()	setUint8()
getInt16()	setInt16()
getUint16()	setUint16()
getInt32()	setInt32()
getUint32()	setUint32()
getFloat32()	setFloat32()
getFloat64()	setFloat64()

Read

以 getInt8() 方法为例，可提供一个参数 byteOffset，表示偏移指定字节数，然后读取 1 字节（8 位）数据，默认为 0（第一字节）；而如果是 getInt16() 等用于获取大于 1 字节值以及浮点值的方法，还接受第二个可选参数 littleEndian，就是是否使用 little endian（低字节序，上文有讲）格式来读取数据，传入 true 就表示使用 little endian 格式，传入 false 或者不填，就使用 big endian（高字节序）格式；

var buffer = new Int8Array([1, 2, 3, 4]).buffer;
var dv = new DataView(buffer);

console.log(dv.getInt8(1)); // 2
console.log(dv.getInt16(0, true)); // 513
console.log(dv.getInt16(0, false)); // 258
console.log(dv.getInt16(0)); // 258

结果为 513 的这一行代码，使用的是 little endian 格式，并且 513 这个值也与之前 TypedArray 中关于 Int16Array 例子的结果一致，证明 TypedArray 默认使用的是 little endian 格式在操作数据缓冲区；

Write

以 setInt8() 为例，接受两个参数：setInt8(byteOffset, value)，第一个表示偏移字节量，用于定位，第二个则是要设置的具体值，非数字类型会报错；类似地，setInt16 等用于设置超过 1 字节的方法，也提供第三个可选参数 littleEndian，表示是否以 little endian 格式设置；

var buffer1 = new ArrayBuffer(2);
var buffer2 = new ArrayBuffer(4);
var dv1 = new DataView(buffer1);
var dv2 = new DataView(buffer2);

dv1.setInt8(0, 1);
dv1.setInt8(1, 2);
var i8 = new Int8Array(dv1.buffer);
console.log(i8); // Int8Array(2) [1, 2]

dv2.setUint16(0, 513, true);
dv2.setUint16(2, 513);
var i16 = new Uint16Array(dv2.buffer);
console.log(i16); // Int16Array(2) [513, 258]

需要注意的就是，因为 byteOffset 这个参数的单位始终是 1 字节，所以当写入超过一字节的数据时，相应的偏移值也需要增加，就像上例所以展示的一样；

对比

与前文所讲的 TyptedArray 视图接口相比，DataView 视图虽然兼容了不同平台的字节序问题，但是也没有了一些对整段数据进行修改拼接的功能，只能修改单个元素值；另外也不能用构造函数初始赋值，比如下面的情况：

console.log(new Int8Array([1, 2, 3]));
// Int8Array(3) [1, 2, 3]

console.log(new DataView([1, 2, 3]));
// Uncaught TypeError: First argument to DataView constructor must be an ArrayBuffer

所以，需要灵活地结合二者使用，以应对复杂的场景；兄弟齐心，其力断金；

Blob

Blob 构造函数用于描述一个 blob（Binary Large OBject，二进制大对象），即保存原始数据的类文件对象，支持保存 多种类型 的数据（不像 TypedArray，只能使用数字类型），并且数据是只读的，不可修改；另一个基于 Blob 的构造函数 File，就是用来处理用户上传文件的（<input type="file">）数据。

语法：

new Blob(array, options);

array 指的是一系列类型的数据构成的数组或者类数组，这些数据可以是字符串、ArrayBuffer、DataView、TypedArray、Blob、DOMString 等等；options 则是一个对象，可以包含以下两个属性：

{
    type: "", // 传入的数据的 MIMS 类型，比如 text/plain，默认为空
    endings: "" // 如何处理数据中的换行符，比如 \n 和  \r\n，因操作系统而异
                // 值为 transparent 或者 native，默认为 transparent
                // native 表示替换为当前系统的换行符
                // transparent 则表示不替换，保持数据内容
}

写入数据

通过几个例子来说明：

var blob1 = new Blob([1, 2, 3]);
var blob2 = new Blob(['a', 'bc', 'd e']);
var blob3 = new Blob(['hello'], {type: 'text/plain'});
var blob4 = new Blob(new Int8Array([4, 5, 6]));
var blob5 = new Blob([blob2]);

console.log(blob1); // Blob {size: 3, type: ""}
console.log(blob2); // Blob {size: 6, type: ""}
console.log(blob3); // Blob {size: 5, type: "text/plain"}
console.log(blob4); // Blob {size: 3, type: ""}
console.log(blob5); // Blob {size: 6, type: ""}

如果参入的参数不是类数组的类型，则会报错：

var blob1 = new Blob(123);
var blob2 = new Blob('123');
var blob3 = new Blob({foo: 'bar'});
var blob4 = new Blob(true);
var blob5 = new Blob(blob1);

console.log(blob1);
// VM3497:1 Uncaught TypeError: Failed to construct 'Blob': 
// The provided value cannot be converted to a sequence.
console.log(blob2);
// VM3497:1 Uncaught TypeError: Failed to construct 'Blob': 
// The provided value cannot be converted to a sequence.
console.log(blob3);
// VM3497:1 Uncaught TypeError: Failed to construct 'Blob': 
// The provided value cannot be converted to a sequence.
console.log(blob4);
// VM3497:1 Uncaught TypeError: Failed to construct 'Blob': 
// The provided value cannot be converted to a sequence.
console.log(blob5);
// VM3497:1 Uncaught TypeError: Failed to construct 'Blob': 
// The provided value cannot be converted to a sequence.

读取数据

写入 Blob 实例中的数据虽然不能修改，但是还是可以读取的，首先可以获取数据总的大小和类型（只读）：

var blob = new Blob(['a', 'b', 'c'], {type: 'text/plain'});

console.log(blob.size); // 3
console.log(blob.type); // text/plain

.text() 方法用于获取 Blob 中的文本数据，返回值是一个 promise 对象，包含一个 resolved 状态的文本数据，无提供的参数；

var blob = new Blob([1, 2, 3]);

blob.text().then(data => {
    console.log(data, typeof data);
});
// 123 string

.arrayBuffer() 方法也用于获取 Blob 中的数据，并且返回一个 promise，无参数提供，只不过返回的是数据的 ArrayBuffer，即二进制数据缓冲区；

var blob1 = new Blob([1, 2, 3]);
var blob2 = new Blob(['a', 'b', 'c']);

blob1.arrayBuffer().then(data => {
    console.log(new Uint8Array(data));
});
// Uint8Array(3) [49, 50, 51]

blob2.arrayBuffer().then(data => {
    console.log(new Uint8Array(data));
});
// Uint8Array(3) [97, 98, 99]

计算以下也可以验证，类型数组中的数值确实是对应的原始数据的二进制值。

TextEncoder

临阵磨枪，不快也光；这还是一个处于 实验阶段 的接口，当前的接口将来可能发生改变，并且目前 IE 系列浏览器都还不支持，这里只作简单介绍；

顾名思义，这个构造函数的作用就是负责编码文本，其实就是以指定的编码格式，将传入的文本转换成该数据对应的 类型化数组；实例化时可以提供一个参数，用于编码格式，不过目前默认并且只使用 UTF-8 格式编码，所以可以省略；

var encoder = new TextEncoder();
var arr = encoder.encode('abc');

console.log(encoder.encoding); // utf-8
console.log(arr); // Uint8Array(3) [97, 98, 99]

有编码就自然有解码，TextDecode 这个构造函数就与之对应，即将 ArrayBuffer 或者 ArrayBuffer View 类型的数据解码为相应的文本；

var ui8 = new Uint8Array([97, 98, 99]);
var buffer = ui8.buffer;
var decoder = new TextDecoder();

var text1 = decoder.decode(ui8);
var text2 = decoder.decode(buffer);

console.log(text1); // abc
console.log(text2); // abc

这样，除了上面的 Blob，这里的 TextEncoder 也可以用于将文本数据保存为 JavaScript 中的二进制缓冲数据；

处理文件数据

人外有人，天外有天，跨过了这二进制，便是更广阔的天地；说了一系列的关于二进制数据的保存和读写方法，也该谈谈其用武之地了；

要知道 JavaScript 中保存文本字符串什么的用变量就行了，缓冲区、类型数组、Blob 这些接口其实多数是用于处理文件数据相关的，因为它们有着不同的 MIME 类型，比如 .jpg .mp4 .bin 这些后缀的文件，JavaScript 并没有内置一些直接处理这些数据类型的接口（例如 .txt 文档就能可以处理），所以就需要以原生二进制数据的方式来保存或处理，方便用户上传、下载或预览；下面就将介绍一些文件处理相关的接口；

File

前面讲到，File 是基于 Blob 的，所以也就继承了它的一些方法；File 用于提供有关文件的信息和内容，语法如下：

new File(content, name[, options]);

content 指要创建的文件内容，是 ArrayBuffer, View, Blob, DOMString 等类型构成的数组或者类数组；name 则是文件的名称或者路径；options 参数可选，包含 type 和 lastModified 两个属性；

举例：

var content = new TextEncoder().encode('hello world!');
var file = new File(content, 'test.txt', {
    type: 'text/plain', // 可选，默认为空
    lastModified: Date.now() // 可选，后面是默认值
});

console.log(file.name); // test.txt
console.log(file.size); // 12
console.log(file.type); // text/plain
console.log(file.lastModified); // 1583638485180

File 构造函数自身并没有自带一些方法，而是继承了 Blob 的方法，例如：

var file = new File(['hello world!'], 'text.txt'); 
// 初始化内容可以直接是字符串，只是需要放在数组中

file.text().then(data => {
    console.log(data); // hello world!
});

file.arrayBuffer().then(data => {
    var text = new TextDecoder().decode(data);
    console.log(text); // hello world!
});

其实，一般很少像这样用 File 接口来直接创建一个文件对象，多数是用在用户上传文件等情况，比如在网页中用 <input type="file" /> 标签来上传文档，而用户点击上传后，与文件相关的信息就被包含在了这个 input 标签的节点引用的 files 属性中，这个 files 属性值是一个 FileList 接口的实例，就是包含所有上传文件的数组，其中每个元素都是一个 File 接口的实例；

通过一个简单的 demo 进行说明：

<!DOCTYPE HTML>
<html>
    <head></head>
    <body>
        <input type="file" class="upload" />
        <!--
        如果要上传多个文件，则使用：
        <input type="file" class="upload" multiple />
        -->
        <input type="submit" value="Upload" onclick="doUpload()" />
        
        <script>
            var upload = document.querySelector('.upload');
            
            // 用户点击 Upload 按钮后执行
            function doUpload() {
                var file = upload.files[0];
                
                console.log(file);
                // File {name: "test.txt", lastModified: 1583634142542, lastModifiedDate: 
                // Sun Mar 08 2020 10:22:22 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 12, …}
            }
            
            // 也可以用这种方法获取文件对象，
            // 这个函数中的代码会在用户完成上传操作就执行，即使没点上传按钮
            upload.onchange = function(el) {
                var file = el.files[0];
                // 执行的操作...
            }
        </script>
    </body>
</html>

FileReader

FileReader 是另一个用于读取文件数据的接口，其实例化后的一些方法与 Blob 中的 .text() 和 .arrayBuffer 方法类似，只不过返回的不再是一个 promise 对象，而是一个基于事件的接口；FileReader 一般也用于读取用户上传文件的数据；

语法：

new FileReader(); // 实例化无须提供任何参数

事件处理

既然是以基于事件，那么就需要一系列处理不同事件的方法，列出如下：

.onabort()：该事件在读取操作被中断时触发。
.onerror()：该事件在读取操作发生错误时触发。
.onload()：该事件在读取操作完成时触发。
.onloadstart()：该事件在读取操作开始时触发。
.onloadend()：该事件在读取操作结束时（要么成功，要么失败）触发。
.onprogress()：该事件在读取Blob时触发。

以上事件也可以使用 addEventListener() 方法的相应格式来设置回调函数；

加载状态

因为是基于事件的接口，所以 FileReader 提供了 readyState 这个属性，以不同值代表不同的数据加载状态：

0：数据尚未加载；
1：数据正在加载中；
2：数据加载完成；

数据加载完成后，可以使用 result 这个属性来获取文件内容；

数据加载

readAsText()

.readAsText(file[, encoding]) 以文本字符串的形式读取 file （文件对象或者 Blob）中的数据，以 encoding 格式进行编码（默认 utf-8）；

var file = new File(['abc'], 'test.txt');
var reader = new FileReader();

reader.onloadstart = event => {
    console.log('loadstart state:', event.target.readyState);
}
reader.onload = event => {
    console.log('load state:', event.target.readyState);
    console.log('result:', event.target.result);
}
reader.onloadend = event => {
    console.log('loadend state:', event.target.readyState);
}

reader.readAsText(file);
// loadstart state: 1
// load state: 2
// result: abc
// loadend state: 2

readAsArrayBuffer()

readAsArrayBuffer(file) 以 ArrayBuffer 的形式读取 file 中（文件或 Blob）的数据；

var blob = new Blob(['a', 'b', 'c']);
var reader = new FileReader();

// 使用监听器触发效果相同
reader.addEventListener('load', event => {
    console.log(event.target.result);
    console.log(new Uint8Array(event.target.result));
})

reader.readAsArrayBuffer(blob);
// ArrayBuffer(3) {}
// Uint8Array(3) [97, 98, 99]

readAsDataURL()

readAsDataURL(file) 同样是读取 file 中的数据，只是将文件中的内容以 base64 编码后，放进一个 DataURL 中（内容可以通过 URL 链接直接访问）；

var file = new File(['abc'], 'test.txt', {
    type: 'text/plain'
})
var reader = new FileReader();

reader.onload = event => {
    console.log(event.target.result);
}

reader.readAsDataURL(file);
// data:text/plain;base64,YWJj

如果将最后的输出内容粘贴复制进浏览器的地址栏，回车后就能直接看见文本内容；

呈现数据

DataURL

Data URL 指的是一种 URL 协议，语法格式为：

data:[<mediatype>][;base64],<data>

可以类比常见的 http: 协议，例如上例中的返回值：

data:text/plain;base64,YWJj

具体用法如之前所述，输入到浏览器地址栏回车后会直接呈现出原内容，比如上例就是一串文本（文件类型被指定为 text/plain），如果类型 image/png 等图片格式的，则会直接显示该图片；

Data URL 除了可以通过浏览器地址栏访问，也可以在 HTML 文档中展示，例如使 <img> 的 src 属性值等于这个 Data URL，这个标签就会展示为相应的图片，同样地，数据指定给 <iframe> 的 src 属性，也可以展示图片或者文本数据，指定给 <video> 标签的 src 则可以展示视频；

ObjectURL

ObjectURL 使用 URL.createObjectURL() 方法创建，返回结果也是一种类型的 URL，类似于上面的 Data URL，区别在于 ObjectURL 的生命周期与当前网站页面相关，例如 刷新页面 页面后不无法继续访问了；

例如在本地网页控制台中运行下面的代码：

var blob = new Blob(['abc']);

console.log(URL.createObjectURL(blob));

则会输出类似下面的内容：

blob:http://127.0.0.1:8080/4064e759-231f-466e-a6ef-778505e56d2b

链接临时有效，会展示数据内容刷新页面失效，不过格式基本一致；同样，ObjectURL 也可以用于设置为 <img> 或 <iframe> 的 src 属性，进行单独展示；

需要注意，createObjectURL() 方法每次调用都会返回一个新的 ObjectURL 对象，即使数据源相同，所以如果调用量较多，可能就会内存剧增，这时需要手动回收，使用的是 revokeObjectURL() 这个方法，示例：

var url = URL.createObjectURL(new Blob(['test']));

URL.revokeObjectURL(url); // 完成回收

文件下载

除了使用 <img, <iframe> 等标签对数据进行展示，也可以将文件提供给用户下载，使用的是 <a> 标签，把 DataURL 或者 ObjectURL 指定给它的 href 属性即可，另外还要指定 download 属性值，不然有可能会是跳转到相关页面而不是下载；

一个下载组件的示例：

<a href="data:text/plain;base64,YWJj" download="test.txt" type="text/plain">Download</a>

download 属性指代下载到用户本地的文件名称，不加后缀则系统自动识别类型，同样 type 属性也是可选的，可用于固定下载文件类型；

上传数据

让用户通过网页上传文件，最重要的当然就是最后的上传阶段了，即把用户选择的文件上传到服务器；下面的例子使用 XMLHttpRequest() 接口来实现数据的上传；

var file = new File(['hello world!'], 'hello.txt', {
    type: 'text/plain'
}); // 此处用于模拟用户上传的文件，即有具体的文件名、类型和内容
var xhr = new XMLHttpRequest();
var reader = new FileReader();

// 查看上传进度
xhr.upload.onprogress = event => {
    if (event.lengthComputable) {
        console.log('进度：'， event.loaded + '/' + event.total);
    }
}
// 上传完成的回调
xhr.upload.onload = event => {
    console.log('upload success.');
}
// 上传地址，参数换成实际地址
xhr.open('POST', 'http://localhost/upload/upload.php');
// 服务器没有指定文件类型则自行指定
xhr.overrideMimeType('text/plain');

reader.onload = event => {
    // 数据读取完毕就开始上传
    xhr.send(event.target.result);
}
reader.readAsText(file);

另外也可以使用 form 表格来上传文件，更加直接：

<form action="upload/upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="upload" >
    <input type="submit" value="Upload">
</form>

需要注意的是，上传文件时必须加上 enctype="multipart/form-data"，不然上传上去的只是一个文件名；

接收数据

投我以木瓜，报之以琼琚；有时也会接收来着服务端的数据，通常就是使用 XMLHttpRequest 来异步获取文本或 JSON 数据，但是它也能用于获取其他类型的数据，只不过需要手动设置 responseType 这个属性进行申明，该属性支持以下几个值：

""：默认值，与 text 类型相同；
"text"：以文本类型响应；
"arraybuffer"：以 ArrayBuffer 二进制数据响应；
"blob"：以 Blob 类型数据响应；
"json"：响应解析为 JSON 对象；
"document"：解析为 HTML 或 XML 内容；

一个接收数据的实例：

var xhr = new XMLHttpRequest();

xhr.responseType = 'arraybuffer';
xhr.onload = () => {
    var buffer = xhr.response;
    // 可以转换为类型化数组进行数据修改
    console.log(new Uint8Array(buffer));
}
xhr.open('GET', 'test.png');
xhr.send();

至此，历经几番交战，刀光剑影，战况激烈空前，难分难解，不下几十回合，能阅读至此处的诸位也都是真正的勇士，敢于面对惨淡的生活，正视淋漓的鲜血……又扯远了，俗话说，物以稀为贵，人以和为贵，JavaScript 剑客与二进制隐士此番交战，不求胜负，若这过程中的原理能被大家理解参透得透彻，也算是名留青史了；

恩怨自了结，情仇终消散，天下没有不散的宴席，暂且就此别过，江湖再见！

更多文章请访问havte官网

havte官网

关注微博微信公众号

随时随地想看就看

微信公众号：havte

微博账号：havte官方微博