聊一聊JS中的二进制

　　在JavaScript中，有很多跟二进制相关的概念，例如Buffer，TypedArray，ArrayBuffer，Blob，Stream等等。那么这些概念彼此之间的关系是什么？各自的使用场景是什么？这将是本文内容的重点。定型数组（TypedArray）
　　首先介绍下定型数组。定型数组是一种用于处理数值类型（注意不是所有类型）数据的专用数组，ArrayBuffer（数组缓冲区）只是其中的一个概念。定型数组的历史
　　定型数组最早是在WebGL中使用的，WebGL是OpenGLES2。0的移植版，在WebGL早期的版本中，因为JavaScript数组与原生数组之间不匹配，所以出现了性能问题。
　　JavaScript数组在内存中的格式是双精度浮点格式（IEEE75464位），但图形驱动程序API通常不需要以JavaScript默认的双精度浮点格式传递给它们的数值。所以每次WebGL与JavaScript运行时之间传递数组时，WebGL都需要在目标环境重新分配数组，以其当前格式迭代数组，然后将数值转换成新数组中的适当格式，这需要花费很多时间。
　　为了解决上面的问题，Mozilla实现了CanvasFloatArray。它提供了JavaScript接口的、C语言风格的浮点值数组。最终该类型成为了Float32Array，即定型数组的其中一个类型。数组缓冲区（ArrayBuffer）
　　ArrayBuffer是所有定型数组的基础，它是一段可以包含特定数量字节的内存地址，这在其他语言中被称为ByteArray。创建ArrayBuffer的过程类似于在C中调用malloc（）来分配内存，只不过不需要指明内存块所包含的数据类型。letbuffernewArrayBuffer（10）；在内存中分配10字节
　　需要注意一点：ArrayBuffer一旦创建就不能改变大小。
　　当然，仅创建存储单元没什么用，我们需要将数据写入到存储单元中，所以还需要创建一个视图来实现写入功能。
　　数组缓冲区是内存中的一段地址，视图是用来操作内存中的接口。视图可以操作数组缓冲区或缓冲区的子集，并按照其中一种数值型数据类型来读取和写入数据。DataView
　　第一种允许读写ArrayBuffer的视图是DataView，它是一种通用的数组缓冲区视图。该视图专为文件IO和网络IO设计，其API支持对缓冲数据的高度控制，但相比于其他类型的视图性能要差一些。
　　使用示例如下：letbuffernewArrayBuffer（10）letviewnewDataView（buffer）
　　DataView有以下几个属性：buffer：视图绑定的数组缓冲区；byteOffset：DataView构造函数的第二个参数，默认是0，只有传入参数时才有值；byteLength：DataView构造函数的第三个参数，默认是缓冲区的长度的bytelength。
　　DataView对存储在缓冲内的数据类型没有预设值，它的API强制开发者在读、写时指定一个ElementType，然后DataView就会按照指定的类型做相应转换。DataView支持的ElementType有如下8种：
　　类型
　　字节
　　说明
　　Int8
　　1hr8位有符号整数
　　Uint8
　　1hr8位无符号整数
　　Int16
　　2hr16位有符号整数
　　Uint16
　　2hr16位无符号整数
　　Int32
　　4hr32位有符号整数
　　Uint32
　　4hr32位无符号整数
　　Float32
　　4hr32位IEEE754浮点数
　　Float64
　　8hr64位IEEE754浮点数
　　以上每种类型都暴露了get和set方法，例如getInt8（byteOffset，littleEndian），setFloat32（byteOffset，value，littleEndian）。更详细的介绍查看：DataView。定型数组
　　定型数组是另一种形式的ArrayBuffer视图，它是用于数组缓冲区的特定类型的视图，可以直接强制使用特定的数据类型而不是通用的DataView对象来操作数组的缓冲区，定型数组遵循原生的字节序。
　　定型数组的类型有如下几种：
　　构造函数名
　　字节
　　说明
　　Int8Array
　　1hr8位有符号整数
　　Uint8Array
　　1hr8位无符号整数
　　Uint8ClampedArray
　　1hr8位无符号整数（强制转换）
　　Int16Array
　　2hr16位有符号整数
　　Uint16Array
　　2hr16位无符号整数
　　Int32Array
　　4hr32位有符号整数
　　Uint32Array
　　4hr32位无符号整数
　　Float32Array
　　4hr32位IEEE浮点数
　　Float64Array
　　8hr64位IEEE浮点数
　　上面的Uint8ClampedArray和Uint8Array大致相同，唯一的区别在于数组缓冲区中的值如果小于0或大于255，Uint8ClampedArray会将其分别转换成0或者255。例如，1会变成0，300会变成255。
　　按照JavaScript之父BrendanEich的说法：Uint8ClampedArray完全是HTML5canvas元素的历史遗留。除非真的做跟canvas相关的开发，否则不要使用它。字节序
　　使用定型数组可以查看相同字节序列的8、16、32或64位视图。这里就涉及到字节序的问题。所谓字节序指的是计算机系统维护的一种字节顺序的约定。它分为两种：大端字节序（bigendian）和小端字节序（littleendian）：大端字节序：高位字节在前，低位字节在后，这是人类读写数值的方法。小端字节序：低位字节在前，高位字节在后。例如数值0x2211使用两个字节储存：高位字节是0x22，低位字节是0x11，所以对应的小端字节序为0x1122。
　　可以使用以下代码确定底层平台的字节序：如果整数0x00000001在内存中的排列为01000000则底层使用小端字节序。在大端字节序平台中应该是00000001letlittleEndiannewInt8Array（newInt32Array（〔1〕）。buffer）〔0〕1
　　目前市面上常见的CPU都是小端字节序。而很多网络协议及某些二进制文件格式则要求使用大端字节序。
　　为了考虑效率，定型数组使用底层硬件的原生字节序。上面提到的DataView并不遵守这个约定。对一段内存而言，DataView是一个中立接口，它会遵循你指定的字节序。DataView所有API方法都以大端字节序为默认值，但可以通过接收一个true开启小端字节序。constbufnewArrayBuffer（2）constviewnewDataView（buf）按小端字节序读取Uint16view。getUint16（0，true）Stream
　　SteamAPI是为了解决Web应用有序消费小信息块而不是大信息块的问题的。这种能力的应用场景如下：大信息块可能不会一次性都可用：网路请求的响应就是一个典型的例子。网路负载以连续信息包的形式交付，而流式处理可以让应用在数据一到达就能使用，而不必等到所有数据都加载完毕。大数据块可能需要分小部分处理。例如视频处理、数据压缩等。
　　StreamAPI直接解决的问题是处理网络请求和读写磁盘，它定义了三种流：可读流：通过某个公共接口读取数据块的流。数据在内部从底层源进入流，然后由消费者（consumer）进行处理；可写流：通过某个公共接口写入数据块的流。生产者（producer）将数据写入流，数据在内部传入底层数据槽（sink）；转换流：由两种流组成，可写流用于接收数据（可写端），可读流用于输出数据（可读端）。这两个流之间是转换程序（transformer），可以根据需要检查和修改流内容。
　　流的基本单位是块（chunk）。块可以是任意数据类型，但通常是定型数组。每个块都是离散的流片段，可以作为一个整体来处理。块的大小不固定，也不一定按固定时间间隔到达。Blob
　　Blob和文件读取有关。某些情况下，我们需要读取部分文件而不是整个文件。为此，File对象提供了名为slice（）的方法。slice（）方法返回一个Blob实例。File接口基于Blob，继承了blob的功能并将其扩展以支持用户系统上的文件。
　　blob表示二进制大对象（binarylargetobject），是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所有内容的UTF8格式的字符串。Buffer
　　最后我们再来聊一下Buffer，和上面的几个不同的是，Buffer是Node。js中特有的，但是实际上Buffer类是JavaScript中Uint8Array的子类，并且对其进行了扩展。
　　Buffer的实例也就是JavaScriptUint8Array和TypedArray的实例，所有TypedArray的方法在Buffer中都支持。然而BufferAPI和TypedArrayAPI有些许的不同：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中和二进制相关的一些概念。最后，用一张图总结一下上面提到的这些概念的关系：