作为一个前端开发工程师，我们可能因为业务类型的原因，更多的是去操作诸如基本数据类型和Object，Array等等这样类型的数据。不会经常去操作和使用二进制数据，对于很多前端开发而言，二进制数据比较黑盒，但其实二进制在音视频处理，图片，各种文件处理的需求中是不可或缺的。所以作为前端来说是非常有必要了解下的。

Blob与File

前端常见的获取一个文件的方式就是使用file类型的input元素

在这个元素的files属性中可以拿到我们的File对象，这个对象其实就是继承自Blob类型，由此我们就引出了第一个需要了解的类型Blob，在MDN中这样解释：

Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。我们这里获取到的File类型的数据就是继承自Blob。

跟Blob对象一样，File对象也是一个只读对象，所以我们不能直接修改file内容。一方面我们可以直接使用它他，比如通常我们可以使用URL.createObjectURL()生成一个指向文件资源的字符串，在iframe或者img等地方直接引用。

上面说的是直接使用的情况，如果你想要修改他，则需要请出另一个对象FileReader。

FileReader与ArrayBuffer

FileReader用于以安全的方式异步的读取文件内容。这里需要注意两个词，安全和异步。

安全：在浏览器上一说安全就涉及到跨域，所以如果你想测试FileReader，需要起一个server，而不能直接在本地用file协议测试，否则会报跨域。

异步：不是一个同步过程，不多说了。

通过FileReader我们可以将Blob或者File类型对象读取并转换成其他类型，比如：ArrayBuffer，Base64字符串，文本字符串。我们重点关注下ArrayBuffer

其实如果你想要转成ArrayBuffer还有一个更简单的方法，File或者Blob对象上有个ArrayBuffer方法同样可以用来将其转成ArrayBuffer，但FileReader更通用更强大。

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组，通常在其他语言中称为“byte array”。但我们仍然不能操作他，我们需要将ArrayBuffer转换成TypedArray才能真正的操作他。

TypedArray

TypedArray是一个类型化数组对象，他描述了一个底层的二进制数据缓冲区（binary data buffer）的一个类数组视图（view）。说人话就是TypedArray就是ArrayBuffer的一种数组展示形式。事实上，没有名为 TypedArray的全局属性(没有暴露在全局对象window中)，也没有一个名为 TypedArray的构造函数。他只是一个统称，指的所有类型化的数组对象。

TypedArray 指的是以下的其中之一：

- Int8Array();

- Uint8Array();

- Uint8ClampedArray();

- Int16Array();

- Uint16Array();

- Int32Array();

- Uint32Array();

- Float32Array();

- Float64Array();

他们用来满足各种不同存储需求，并且可以相互转换，比如一般在图片操作中，我们使用Uint8Array或者Uint8ClampedArray来存储8位深度的图片像素点信息。Uint16Array存储16位深度的图片。将ArrayBuffer转换成TypedArray非常简单，只需要以ArrayBuffer为参数构造TypedArray对象即可。

我们打印TypedArray（Uint8Array）会发现他下面有很多数组方法，然而需要注意的是这些方法并不是真的数组提供的方法，而且TypedArray也不是继承自Array。他们并没有直接关系。

之后要将ArrayBuffer类型或者修改后的TypedArray再转回成Blob也很简单，直接通过Blob构造函数生成Blob类型实例即可。

具体使用方法可以参考MDN-Blob

总结

至此，我们就了解了在js中如何操作二进制文件，无论是音频视频文本图片，皆为文件，我们都可以用这个方式去进行操作。

Blob(File) --> ArrayBuffer --> TypedArray --> Blob(File)

另外还可以使用URL.createObjectURL()生成一个指向资源的字符串指针。

好了，我是全栈工程师鸡腿，一个战斗在互联网一线的全栈工程师，如果文章对你有所帮助，希望你可以点赞、转发、关注一下，如果你还想了解到哪些其他知识点，欢迎下方留言给我哈。另外我们还有一个技术交流群，加入方式在我的首页置顶的微头条动态里有，欢迎大家加入。我们下次见~ 88~