探索JavaScript中的二进制世界

发表时间: 2023-02-18 18:40

在 JavaScript 中,有很多跟二进制相关的概念,例如 Buffer,TypedArray,ArrayBuffer,Blob,Stream 等等。那么这些概念彼此之间的关系是什么?各自的使用场景是什么?这将是本文内容的重点。

定型数组(TypedArray)

首先介绍下定型数组。定型数组是一种用于处理 数值 类型(注意不是所有类型)数据的 专用数组,ArrayBuffer(数组缓冲区) 只是其中的一个概念。

定型数组的历史

定型数组最早是在 WebGL 中使用的,WebGL 是 OpenGL ES 2.0 的移植版,在 WebGL 早期的版本中,因为 JavaScript 数组与原生数组之间不匹配,所以出现了性能问题。

JavaScript 数组在内存中的格式是双精度浮点格式(IEEE 754 64位),但图形驱动程序 API 通常不需要以 JavaScript 默认的双精度浮点格式传递给它们的数值。所以每次 WebGL 与 JavaScript 运行时之间传递数组时,WebGL 都需要在目标环境重新分配数组,以其当前格式迭代数组,然后将数值转换成新数组中的适当格式,这需要花费很多时间。

为了解决上面的问题,Mozilla 实现了 CanvasFloatArray。它提供了 JavaScript 接口的、C语言风格的浮点值数组。最终该类型成为了 Float32Array,即定型数组的其中一个类型。

数组缓冲区(ArrayBuffer)

ArrayBuffer 是所有定型数组的基础,它是一段 可以包含特定数量字节的内存地址,这在其他语言中被称为“Byte Array”。创建 ArrayBuffer 的过程类似于在 C 中调用 malloc() 来分配内存,只不过不需要指明内存块所包含的数据类型。

let buffer = new ArrayBuffer(10); // 在内存中分配 10 字节

需要注意一点:ArrayBuffer 一旦创建就不能改变大小。

当然,仅创建存储单元没什么用,我们需要将数据写入到存储单元中,所以还需要创建一个视图来实现写入功能。

数组缓冲区是内存中的一段地址,视图是用来操作内存中的接口。视图可以操作数组缓冲区或缓冲区的子集,并按照其中一种数值型数据类型来读取和写入数据。

DataView

第一种允许读写 ArrayBuffer 的视图是 DataView,它是一种 通用的 数组缓冲区视图 。该视图专为文件 I/O 和网络 I/O 设计,其 API 支持对缓冲数据的高度控制,但相比于其他类型的视图性能要差一些。

使用示例如下:

let buffer = new ArrayBuffer(10)let view = new DataView(buffer)

DataView 有以下几个属性:

  • buffer:视图绑定的数组缓冲区;
  • byteOffset:DataView 构造函数的第二个参数,默认是 0,只有传入参数时才有值;
  • byteLength:DataView 构造函数的第三个参数,默认是缓冲区的长度的 bytelength。

DataView 对存储在缓冲内的数据类型没有预设值,它的 API 强制开发者在读、写时指定一个 ElementType,然后 DataView 就会按照指定的类型做相应转换。DataView 支持的 ElementType 有如下 8 种:

类型

字节

说明

Int8

1

8 位有符号整数

Uint8

1

8 位无符号整数

Int16

2

16 位有符号整数

Uint16

2

16 位无符号整数

Int32

4

32 位有符号整数

Uint32

4

32 位无符号整数

Float32

4

32 位 IEEE-754 浮点数

Float64

8

64 位 IEEE-754 浮点数

以上每种类型都暴露了 get 和 set 方法,例如 getInt8(byteOffset, littleEndian),setFloat32(byteOffset, value ,littleEndian) 。更详细的介绍查看:DataView 。

定型数组

定型数组是另一种形式的 ArrayBuffer 视图,它是用于数组缓冲区的 特定类型 的视图,可以直接强制使用特定的数据类型而不是通用的 DataView 对象来操作数组的缓冲区,定型数组遵循原生的字节序。

定型数组的类型有如下几种:

构造函数名

字节

说明

Int8Array

1

8 位有符号整数

Uint8Array

1

8 位无符号整数

Uint8ClampedArray

1

8 位无符号整数(强制转换)

Int16Array

2

16 位有符号整数

Uint16Array

2

16 位无符号整数

Int32Array

4

32 位有符号整数

Uint32Array

4

32 位无符号整数

Float32Array

4

32 位 IEEE 浮点数

Float64Array

8

64 位 IEEE 浮点数

上面的 Uint8ClampedArray 和 Uint8Array 大致相同,唯一的区别在于数组缓冲区中的值如果小于 0 或大于 255,Uint8ClampedArray 会将其分别转换成 0 或者 255。例如,-1 会变成0,300 会变成 255。

按照 JavaScript 之父 Brendan Eich 的说法:“ Uint8ClampedArray 完全是 HTML5 canvas 元素的历史遗留。除非真的做跟 canvas 相关的开发,否则不要使用它。”

字节序

使用定型数组可以查看相同字节序列的8、16、32或64位视图。这里就涉及到“字节序”的问题。所谓“字节序”指的是计算机系统维护的一种字节顺序的约定。它分为两种:大端字节序(big endian)和小端字节序(little endian):

  • 大端字节序:高位字节在前,低位字节在后,这是人类读写数值的方法。
  • 小端字节序:低位字节在前,高位字节在后。 例如数值 0x2211 使用两个字节储存:高位字节是0x22,低位字节是0x11,所以对应的小端字节序为0x1122。

可以使用以下代码确定底层平台的字节序:

// 如果整数 0x00000001 在内存中的排列为 01 00 00 00// 则底层使用小端字节序。在大端字节序平台中应该是 00 00 00 01let littleEndian = new Int8Array(new Int32Array([1]).buffer)[0] === 1

目前市面上常见的 CPU 都是小端字节序。而很多网络协议及某些二进制文件格式则要求使用大端字节序。

为了考虑效率,定型数组使用底层硬件的原生字节序。上面提到的 DataView 并不遵守这个约定。对一段内存而言,DataView 是一个中立接口,它会遵循你指定的字节序。DataView 所有 API 方法都以大端字节序为默认值,但可以通过接收一个 true 开启小端字节序。

const buf = new ArrayBuffer(2)const view = new DataView(buf)// 按小端字节序读取 Uint16view.getUint16(0, true)

Stream

Steam API 是为了解决 Web 应用有序消费小信息块而不是大信息块的问题的。这种能力的应用场景如下:

  • 大信息块可能不会一次性都可用:网路请求的响应就是一个典型的例子。网路负载以连续信息包的形式交付,而流式处理可以让应用在数据一到达就能使用,而不必等到所有数据都加载完毕。
  • 大数据块可能需要分小部分处理。例如视频处理、数据压缩等。

Stream API 直接解决的问题是处理 网络请求读写磁盘,它定义了三种流:

  • 可读流:通过某个公共接口读取数据块的流。数据在内部从底层源进入流,然后由消费者(consumer)进行处理;
  • 可写流:通过某个公共接口写入数据块的流。生产者(producer)将数据写入流,数据在内部传入底层数据槽(sink);
  • 转换流:由两种流组成,可写流用于接收数据(可写端),可读流用于输出数据(可读端)。这两个流之间是转换程序(transformer),可以根据需要检查和修改流内容。

流的基本单位是块(chunk)。块可以是任意数据类型,但通常是定型数组。每个块都是离散的流片段,可以作为一个整体来处理。块的大小不固定,也不一定按固定时间间隔到达。

Blob

Blob 和文件读取有关。某些情况下,我们需要读取部分文件而不是整个文件。为此,File 对象提供了名为 slice() 的方法。slice() 方法返回一个 Blob 实例。File 接口基于 Blob,继承了 blob 的功能并将其扩展以支持用户系统上的文件。

blob 表示二进制大对象(binary larget object),是 JavaScript 对不可修改二进制数据的封装类型。包含字符串的数组、ArrayBuffer、ArrayBufferView,甚至其他 Blob 都可以用来创建 blob。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

Blob 有两个属性:

  • Blob.prototype.size:表示 Blob 对象所包含的数据的大小(字节)
  • Blob.prototype.type:一个字符串,表明该 Blob 对象所包含的 MIME 类型。如果类型未知,则该值为空。

Blob 的实例方法如下:

  • Blob.prototype.arrayBuffer():返回一个 promise,resolve 后结果包含 Blob 所有内容的二进制格式的 ArrayBuffer;
  • Blob.prototype.slice():返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据;
  • Blob.prototype.stream():返回一个能读取 Blob 内容的 ReadableStream;
  • Blob.prototype.text():返回一个 promise,resolve 后结果包含 Blob 所有内容的 UTF-8 格式的字符串。

Buffer

最后我们再来聊一下 Buffer,和上面的几个不同的是,Buffer 是 Node.js 中特有的,但是实际上 Buffer 类是 JavaScript 中 Uint8Array 的子类,并且对其进行了扩展。

Buffer 的实例也就是 JavaScript Uint8Array 和 TypedArray 的实例,所有 TypedArray 的方法在 Buffer 中都支持。然而 Buffer API 和 TypedArray API 有些许的不同:

  • TypedArray.prototype.slice() 复制调用数组的一部分并返回一个新数组,而 Buffer.prototype.slice() 在不复制的情况下在现有缓冲区创建视图。TypedArray.prototype.subarray() 可以实现和 Buffer.prototype.slice() 相同的行为,它在 Buffer 和 TypedArray 中没有区别;
  • buf.toString() 与 TypedArray.prototype.toString() 不兼容;
  • Buffer 中的很多方法例如 buf.indexOf() 支持附加参数。

所以我们可以认为 Buffer 和 TypedArray 是为了处理一类问题而存在的,但是在实际使用过程中还是要注意兼容性问题。

总结

以上就是 JS 中和二进制相关的一些概念。最后,用一张图总结一下上面提到的这些概念的关系: