html5 二进制数据解析,JavaScript读写二进制数据的方法详解

前言

二进制是计算技术中广泛采用的一种数制。二进制数据是用0和1两个数码来表示的数，如果想要在前端中处理音频和视频。那你必须要对二进制数据有很好地掌握和操作能力。下面话不多说了，来一起看看详细介绍的吧

类型化数组的出现

类型化数组是 HTML5 中引入的API，它能够让开发者使用 JavaScript 直接操作二进制数据。在类型化数组出现之前，我们是无法直接通过 JavaScript 操作二进制数据，通常都是操作 JavaScript 中的数据类型，由运行时转化成二进制。这就多了一个转化的过程，尽管 JavaScript 对数据类型做了很多优化以提高效率，但相比直接操作二进制来说，仍然有效率上的差异。于是类型化数组就顺势推出了。

用途

那么，类型化数组的应用场景都有哪些呢？

canvas 图像处理。

WebGL 与显卡通信。

文件操作

Ajax响应

如何使用

那么，既然类型化数组这么重要，那还等什么，赶紧来掌握它们吧。

既然我们要直接操作二进制数据，二进制数据又是存放在一段连续的内存区域中，所以我们首先要有这么一段内存区域。

我们可以创建一个内存区域：

let buffer = new ArrayBuffer()

ArrayBuffer 是一个构造函数，允许我们实例化数组缓冲区，数组缓冲区可以理解为是一段连续的内存区域。

由于我们构造函数传入的参数是空，所以生成的 buffer 指向的内存长度是 0 字节，没有意义。

嗯，那我们就创建一个有意义的内存区域。

buffer = new ArrayBuffer(8)

我们给ArrayBuffer 传入参数 8，意思是让浏览器帮我们创建一段 8 个字节长度的内存区域。

我们看下这段内存区域的长度是否是 8 个字节

console.log(buffer.byteLength);

输出是 8， 看来浏览器没有欺骗我们。

我们猜想这 8 个字节里面的值应该都是 0 ，因为我们并没有给 buffer 赋值。让我们确认一下吧，先看第一个字节：

console.log(buffer[0])

输出： undefined。

咦？怎么是 undefined 呢？

哦，原来 buffer[0] 的意思是查看 buffer 这个对象 的属性为 0 的值，因为 buffer 没有 0 这个属性，所以是 undefined。

好吧，看来我们查看 buffer 内容的姿势不对。

那该如何查看 buffer 内容呢？

数组视图

珰珰珰珰，八大金刚闪亮登场~

Int8Array：8 位有符号整数，长度 1