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, 看来浏览器没有欺骗我们。

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

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

console.log(buffer[0])

输出: undefined。

咦?怎么是 undefined 呢?

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

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

那该如何查看 buffer 内容呢?

数组视图

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

Int8Array:8 位有符号整数,长度 1 个字节。
Uint8Array: 8位无符号整数, 1 个字节长度。
Int16Array:16位有符号整数, 2 个字节长度。
Uint16Array:16位无符号整数,2 个字节长度。
Int32Array:32位有符号整数, 4 个字节长度。
Uint32Array:32位无符号整数, 4 个字节长度。
Float32Array:32位浮点数, 4 个字节长度。
Float64Array:64位浮点数,8 个字节长度。

这八大金刚有什么神通呢?我们无法直接读写 buffer 数据,而这八种数据类型充当了读写 buffer 内容的桥梁。

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

还是上面的 buffer,我们想查看一下 buffer 内容。首先创建一个读写该 buffer 的桥梁:

let int8Array = new Int8Array(buffer);

我们创建了一个读写 buffer 的桥梁,用 8 位有符号整数来读写 buffer。那现在我们看看 buffer 第一位的内容是什么吧?

console.log(int8Array[0]);

输出:0,看来初始化的时候,buffer 的各个字节存储的值默认都是 0 了。

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

我们看看如何使用 Int8Array 给 buffer 赋值:

int8Array[0] = 30; int8Array[1] = 41; int8Array[2] = 52; int8Array[3] = 63; int8Array[4] = 74; int8Array[5] = 85; int8Array[6] = 86; int8Array[7] = 97;

很简单,因为 Int8Array 是一个字节的长度,和 buffer 的单位一致,所以我们可以通过索引的形式对 buffer 指定位置进行赋值操作。

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

很简单吧?就是这么简单。

另外七大金刚和 Int8Array 的用法一样,但是有所不同,我们看下他们之间的区别。

这次我们使用 Int16Array,仍然是刚才的 buffer,我们创建一个新的桥梁,这座桥梁仍然通往 buffer 。

let int16Array = new Int16Array(buffer);

大家试想一下 int16Array[0] 是什么内容?

我们输出一下:

console.log(int16Array[0])

咦,结果怎么是 10526?

不太理解了。好吧,我们分析下 10526 怎么得来的。

我们看下 buffer 中的二进制数据。

由于 Int16Array 占两个字节,所以我们在用它读写数据的时候,一个索引所代表的数据等于 buffer 中两个字节。

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

我们可以看到 int16Array[0] 里面的二进制数据是由30的二进制和41的二进制数据拼接而成:00011110(30)  00101001(41)。

我们按照 30、41的顺序计算一下二进制对应的十进制数。

parseInt(1111000101001, 2) //输出 7721

算出来的值是 7721,这和我们输出的不一致呀?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/a8576e51cdf90c56cbf491fc034e8c45.html