深入理解JavaScript字节二进制知识以及相关API.docx

第

深入理解JavaScript字节二进制知识以及相关API

目录字节字节序BlobFile对Blob和File的读取ArrayBufferTypeArrayDataViewBlob和ArrayBuffer当前，前端对二进制数据有许多的API可以使用，这丰富了前端对文件数据的处理能力，有了这些能力，就能够对图片等文件的数据进行各种处理。

本文将着重介绍一些前端二进制数据处理相关的API知识，如Blob、File、FileReader、ArrayBuffer、TypeArray、DataView等等。

字节

在介绍各种API之前，我们需要先了解下和字节有关的知识。

我们知道，计算机是二进制的世界，而字节(byte)是计算机技术中关于二进制数据的一种基本单位，1字节有8个二进制位，即8比特(bit)。

比特又叫位，一位二进制数据要么是0、要么是1，只有两种状态，所以1比特有2种状态。

1字节有8比特，即8个二进制位，那就能表示2**8=256种状态，取值从到

字节作为基本单位，在很多地方都被使用，如字符编码知识，见前文前端需要搞懂的字符编码：ASCII、Unicode、UTF8、UTF16等。

二进制数据在存储的时候，以字节为单位，这里还涉及到一个关于字节序的知识。

字节序

字节序描述的是计算机如何存储字节。

因为我们知道，内存存储都有索引地址，每个字节对应一个索引地址。一个字节存储8位二进制，即0到255之间，但需要存储大于255的数值的时候，就需要多个字节，多个字节就涉及到排序问题。

所以字节序就是：当需要多个字节表示一个值的时候，这多个字节使用什么样的排序方式在内存中进行存储。

而排序方式主要是两种：大端存储(big-endian)和小端存储(little-endian)。

大端存储和小端存储

大端存储又称大字节序、高字节序，方式是低位字节排在内存中的高地址端，高字节位排放在内存中的低地址端。图片文件png、jpg都是这种方式。

小端存储又称为小字节序、低字节序，方式是低位字节排在内存中的低地址端，高位字节排在内存中的高地址端。图片文件gif是小端序。

示例

当我们使用不同的字节序存储数字0(这里是16进制表示，对应的十进制：305419896。进制相关知识可见前文Javascript中的进制和进制转换)：

大端存储在内存中的存储地址：

小端存储在内存中的存储地址：

这里数字字节的高-低位是从左到右，最高位是12，最低位是78；而内存中存储时从左到右是低地址高地址。

所以在大端序中高位字节的12在内存最左边的低地址位，而低字节位78则在内存最右边的高地址位；而小端序则正好相反。

从视觉习惯上，大端存储似乎更顺眼，但无论哪种方式，计算的结果都是一样的，只是在计算的时候需要处理这个排序方式，下文会涉及到。

Blob

Blob，即BinarylargeObject，本质上是一个二进制对象，该对象表示的是一个不可变、原始数据的类文件对象。

它的不可变，代表它是只读的，不可被改变。

Blob对象的构造函数语法：newBlob(array,options)。

参数array：是一个数据数组，可以是多种对象的数据，包含ArrayBuffer、Blob、String等等。

参数options：可选对象，指定两个属性：

type表示Blob对象数据的MIME类型；endings指定包含行结束符\n的字符串如何写入。

我们可以使用构造函数直接创建一个新的Blob对象：

constblob=newBlob([123456789],{type:text/plain});

新创建的对象实例，结构如下：

从以上示例，我们就可以看到Blob对象的方法和属性：

实例属性

size：Blob对象中数据的字节大小type：字符串，表示Blob对象数据的MIME类型

示例方法

1.arrayBuffer()：返回包含Blob所有内容的二进制格式的ArrayBuffer的一个promise对象

2.stream()：返回能读取Blob的ReadableStream对象

3.text()：返回包含Blob所有内容的字符串(UTF-8编码)的一个promise对象

4.slice([start[,end[