JavaScript中的二进制数组：ArrayBuffer与TypedArray解析

96 浏览量更新于2024-08-30 收藏 140KB PDF 举报

"这篇文章除了介绍二进制数组在ES6中的应用，还强调了它们在WebGL等高性能图形处理中的重要性。二进制数组由ArrayBuffer对象、TypedArray视图和DataView视图组成，提供了一种直接操作内存、处理二进制数据的高效方式。ArrayBuffer是原始的二进制数据容器，而TypedArray视图和DataView视图则提供了不同类型的接口来读写这些数据。" 在JavaScript中，二进制数组是一个强大的工具，特别是在需要处理大量二进制数据的场景，如WebGL图形渲染。ArrayBuffer对象是二进制数据的基础，它不直接与数据交互，而是作为一个内存缓冲区，通过视图来访问和修改其中的数据。视图主要有两种类型：TypedArray视图和DataView视图。 TypedArray视图提供了一种简单的方式来操作特定类型的数据，包括Int8、Uint8、Uint8C、Int16、Uint16、Int32、Uint32、Float32和Float64，这些数据类型对应于C语言中的基本数据类型。每个类型都有固定的字节长度，使得数据处理更加高效。例如，Uint8C类型特别用于表示无符号8位整数，其值会自动处理溢出，确保结果始终在0到255之间。 DataView视图则更为灵活，它可以自定义数据的排列和类型，允许开发者在内存中混合读写不同类型的数据，如一个字节是Uint8，接下来的两个字节是Int16，再后面的四个字节是Float32等。这使得DataView成为处理复合结构数据的理想选择。在WebGL中，由于需要JavaScript与显卡进行高速的数据交换，二进制数组的引入极大地提高了性能。传统的文本格式在传递数据时需要进行格式转换，增加了额外的计算开销。而二进制数组可以直接将数据以原始的二进制形式传递，减少了不必要的转化步骤，提高了实时渲染的效率。 ES6中的二进制数组是JavaScript对低级内存操作的重要支持，它们不仅方便了与硬件接口的交互，还为开发高性能的应用程序提供了可能。无论是处理WebGL的图形数据，还是进行其他类型的二进制通信，二进制数组都是不可或缺的一部分。通过熟练掌握ArrayBuffer、TypedArray和DataView，开发者可以更好地利用JavaScript进行高效的二进制数据处理。

view ）。

ArrayBuffer有两种视图，一种是 TypedArray 视图视图，另一种是DataView视图视图。前者的数组成员都是同一个数据类型，后者的

数组成员可以是不同的数据类型。

目前， TypedArray 视图一共包括 9 种类型，每一种视图都是一种构造函数。

Int8Array： 8 位有符号整数，长度 1 个字节。

Uint8Array： 8 位无符号整数，长度 1 个字节。

Uint8ClampedArray： 8 位无符号整数，长度 1 个字节，溢出处理不同。

Int16Array： 16 位有符号整数，长度 2 个字节。

Uint16Array： 16 位无符号整数，长度 2 个字节。

Int32Array： 32 位有符号整数，长度 4 个字节。

Uint32Array： 32 位无符号整数，长度 4 个字节。

Float32Array： 32 位浮点数，长度 4 个字节。

Float64Array： 64 位浮点数，长度 8 个字节。

这 9 个构造函数生成的数组，统称为 TypedArray 视图。它们很像普通数组，都有length属性，都能用方括号运算符（[]）获

取单个元素，所有数组的方法，在它们上面都能使用。

普通数组与 TypedArray 数组的差异主要在以下方面。

TypedArray 数组的所有成员，都是同一种类型。

TypedArray 数组的成员是连续的，不会有空位。

TypedArray 数组成员的默认值为 0 。比如，new Array(10)返回一个普通数组，里面没有任何成员，只是 10 个空位；new

Uint8Array(10)返回一个

TypedArray 数组，里面 10 个成员都是 0 。

TypedArray 数组只是一层视图，本身不储存数据，它的数据都储存在底层的ArrayBuffer对象之中，要获取底层对象必须使用

buffer属性。

构造函数构造函数

TypedArray 数组提供 9 种构造函数，用来生成相应类型的数组实例。

构造函数有多种用法。

（（ 1 ）） TypedArray(buffer, byteOffset=0, length?)

同一个ArrayBuffer对象之上，可以根据不同的数据类型，建立多个视图。

// 创建一个 8 字节的 ArrayBuffer

var b = new ArrayBuffer(8);

// 创建一个指向 b 的 Int32 视图，开始于字节 0 ，直到缓冲区的末尾

var v1 = new Int32Array(b);

// 创建一个指向 b 的 Uint8 视图，开始于字节 2 ，直到缓冲区的末尾

var v2 = new Uint8Array(b, 2);

// 创建一个指向 b 的 Int16 视图，开始于字节 2 ，长度为 2

var v3 = new Int16Array(b, 2, 2);

上面代码在一段长度为 8 个字节的内存（b）之上，生成了三个视图：v1、v2和v3。

视图的构造函数可以接受三个参数：

第一个参数（必需）：视图对应的底层ArrayBuffer对象。

第二个参数（可选）：视图开始的字节序号，默认从 0 开始。

第三个参数（可选）：视图包含的数据个数，默认直到本段内存区域结束。

因此，v1、v2和v3是重叠的：v1[0]是一个 32 位整数，指向字节 0 ～字节 3 ；v2[0]是一个 8 位无符号整数，指向字节 2 ；

v3[0]是一个 16 位整数，指向字节 2 ～字节 3 。只要任何一个视图对内存有所修改，就会在另外两个视图上反应出来。

注意，注意，

byteOffset

必须与所要建立的数据类型一致，否则会报错。必须与所要建立的数据类型一致，否则会报错。

var buffer = new ArrayBuffer(8);

var i16 = new Int16Array(buffer, 1);

// Uncaught RangeError: start offset of Int16Array should be a multiple of 2

上面代码中，新生成一个 8 个字节的ArrayBuffer对象，然后在这个对象的第一个字节，建立带符号的 16 位整数视图，结果报

错。因为，带符号的 16 位整数需要两个字节，所以byteOffset参数必须能够被 2 整除。

如果想从任意字节开始解读ArrayBuffer对象，必须使用DataView视图，因为 TypedArray 视图只提供 9 种固定的解读格式。

（（ 2 ）） TypedArray(length)

视图还可以不通过ArrayBuffer对象，直接分配内存而生成。

剩余11页未读，继续阅读

weixin_38692100

粉丝: 3

JavaScript中的二进制数组：ArrayBuffer与TypedArray解析

ES6类型化数组与ArrayBuffer详解及其用途

ES6新特征数字、数组、字符串

详解nodeJS之二进制buffer对象

uniapp中将字符串转为二进制数据

怎么做表格导出，页面开发里

fromCharCode数组

buffer.array方法

解读一下这段代码options: [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1), })),

string转multipartfile

最新资源