欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-13 08:20:52
前言 二进制是计算技术中广泛采用的一种数制。二进制数据是用0和1两个数码来表示的数,如果想要在前端中处理音频和视频。那你必须要对二进制数据有很好地掌握和操作能力。下面话不...

前言

二进制是计算技术中广泛采用的一种数制。二进制数据是用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,这和我们输出的不一致呀?

这就涉及到字节顺序的概念。在我们的个人笔记本上一般都是小端字节序。小端字节序体现在我们这个示例中即是 41、30的二进制顺序,我们刚才的计算顺序有问题,那按照 41、30 的二进制顺序计算一下

parseint(10100100011110, 2) //输出 10526

可以看到输出结果是 10526,和我们直接使用 int16array[0]

得出的结果一致。

上面这个例子,告诉我们在换数据结构解析 buffer 的时候,数据会变得不容易理解,我们一定要谨慎处理。

属性和方法

类型化数组实例化的对象包含一些很有用的属性和方法:

length

length属性返回类型化数组的数据成员个数。

bytelength

返回类型化数组的字节长度。注意与length的区别。通长 bytelength = length * 每个数据占用字节数

byteoffset

返回该类型化数组的数据从所处 buffer 中的哪个字节开始。

buffer

类型化数组对应的 buffer。

set

复制数组,将某段内存中的数据完整地复制到另一段内存。

let a = new uint8array(12);
a[0] = 31;
a[1] = 32;
let b = new uint8array(12);
b.set(a);

上面这段代码的意思是将 a 这段buffer中的内容,完整地拷贝到 b 这段 buffer 中,这种方式比按索引赋值要快速地多。
当然,set 支持从某个索引开始复制数据

let a = new uint8array(12);
a[0] = 31;
a[1] = 32;
let b = new uint8array(10);
b.set(a, 2);

上面这段代码意思是从b的第三个索引位置开始复制 a 中的数据。

subarray

subarray的意思是对一个类型化数组,取其子数组的内容,返回一个新的类型化数组。

let a = new uint8array(8);
a[2] = 1;
let b = a.subarray(2,3);
console.log(b.length);
console.log(b.bytelength);

subarray 的第一个参数,代表从源数组的第几个索引开始截取,第二个参数代表截取到第几个索引。

混合视图

有一点需要注意,我们的类型数组初始化的时候,可以指定 buffer的某一段,这就意味着,我们可以对一段 buffer 内存区域指定多个类型数,我们称之为 混合视图。

let buffer = new buffer(8);
let idarray = new int8array(buffer, 0,2);
let namearray = new int8array(buffer, 2, 4);
let agearray = new int8array(buffer, 6, 2);

我们用一段内存区域表示一个人的 id、name、age。这种结构类似于 c 语言中的 struct 。

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

我们将一段 8 个字节的内存分成三个部分:

  • 字节 0 ~ 字节 1 代表 id。
  • 字节 2 ~ 字节 5 代表 username。
  • 字节 6 ~ 字节 7 代表 age。

dataview

javascript 还引入了另外种视图dataview,也能达到操作 buffer 的目的,但相比之下,dataview 操作粒度更细一些,而且还能够设置字节序为大端还是小端。

dataview 的构造函数:

dataview(arraybuffer对象 buffer, 从 buffer 的第几个字节开始读取, 读取的长度);

举个例子来说:

let buffer = new arraybuffer(10);
let view = new dataview(buffer);

如何读取?

我们创建好了视图 view, 那该如何读取呢?

  • getint8(index, order):从第 index 个字节读取一个 8 位整数。
  • getuint8(index, order):从第 index 个字节开始读取一个无符号的 8 位整数。
  • getint16(index, order):从第 index 个字节开始读取 2 个字节,返回一个 16 位整数。
  • getuint16(index, order):从第 index 个字节开始读取 2 个字节,返回一个无符号的 16 位整数。
  • getint32(index, order):从第 index 个字节开始读取 4 个字节,返回一个32位的整数。
  • getuint32(index, order):从第 index 个字节开始读取 4 个字节,返回一个无符号的 32 位整数。
  • getfloat32(index, order):从第 index 个字节开始读取 4 个字节,返回一个 32 位 浮点数。
  • getfloat64(index, order):从第 index 个字节开始读取 8 个字节,返回一个 64 位的浮点数。

javascript 提供了 8 种读取方式,功能很简单,也很容易理解,这里就不一一做示例了,大家可以自己试一下。

刚刚我们也说了,dataview 也支持设置字节序,在上面 8 中读取方式中,第一个字节是索引,第二个字节允许我们设置字节序,true 代表 小端字节序读取,false 代表大端字节序读取,默认为 false。

如何写入?

dataview 不仅能支持细粒度的读取操作,也支持细粒度的写入操作:

  • setint8(index, value, order):从第 index 个字节开始,写入 1 个字节的值为 value 的 8 位整数。
  • setuint8(index, value, order):从第 index 个字节开始,写入 1 个字节的值为 value 的无符号 8 位整数。
  • setint16(index, value, order):从第 index 个字节开始,写入 2 个字节的值为 value 的 16 位整数。
  • setuint16(index, value, order):从第 index 个字节开始,写入 2 个字节的值为 value 的无符号的 16 位整数。
  • setint32(index, value, order):从第 index 个字节开始,写入 4 个字节的值为 value 的 32 位整数。
  • setuint32(index, value, order):从第 index 个字节开始,写入 4 个字节的值为 value 的无符号 32 位整数。
  • setfloat32(index, value, order):从第 index 个字节开始,写入 4  个字节的值为 value 的 32 位浮点数。
  • setfloat64(index, value, order):从第 index 个字节开始,写入 8  个字节的值为 value 的 64 位浮点数。

order 的意思仍然是设置写入时的字节序, true 为小端字节序,false 为大端字节序,默认为 false。
用法也很简单,大家可以练习一下。

至此,关于 javascript 操作二进制的方式就介绍完了,大家以后碰到需要直接操作内存的场景时,不妨用用这两种方式。

未来的你会感谢今天努力的你。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。