怎么理解 JavaScript 中的 ArrayBuffer

JavaScript中的ArrayBuffer是一个通用的、固定长度的二进制数据缓冲区，它被用来表示一个通用的、固定长度的原始二进制数据缓冲区。你可以通过"视图"来操作这些数据，这些视图代表了类型化的数组。 ArrayBuffer是为了处理二进制数据而设计的，最初目的是为了提升网络性能，通过允许开发者发送和接收二进制数据而非仅限于字符串形式，进而减少数据大小和编码解码的复杂度。展开详细描述而言，ArrayBuffer不能直接被读取或修改，要交互数据，需要通过所谓的“视图”来完成，在JavaScript中，视图分为两大类：Typed Arrays（类型化数组）和DataView。这些视图是作为ArrayBuffer上的接口，能够按照特定格式来读取和写入数据。

一、ARRAYBUFFER 和 TYPED ARRAYS

ArrayBuffer对象是一个用于表示通用的、固定长度的原始二进制数据缓冲区的底层类型。而Typed Arrays（类型化数组）是建立在ArrayBuffer基础上的高级接口，它们为二进制数据提供了数组类型的上下文。

什么是Typed Arrays

Typed Arrays是一些类数组的对象，它们提供了一种读写原始二进制数据的机制。与普通的JavaScript数组不同的是，它们是为了高性能的数据处理和计算设计的。目前，有以下几种类型化数组：

• Int8Array: 8位二进制补码整数的数组。
• Uint8Array: 8位无符号整数的数组。
• Uint8ClampedArray: 8位无符号整数的数组（当超出范围时，截断到其最接近的数值）。
• Int16Array: 16位二进制补码整数的数组。
• Uint16Array: 16位无符号整数的数组。
• Int32Array: 32位二进制补码整数的数组。
• Uint32Array: 32位无符号整数的数组。
• Float32Array: 32位IEEE浮点数的数组。
• Float64Array: 64位IEEE浮点数的数组。

每一种类型化数组都继承自 %TypedArray%.prototype，它们直接表示内存中的固定长度的连续区域，而类型化数组的种类决定了数据如何被解释。例如，Uint8Array中的每一项都表示一个8位无符号整数，相应的，数组中的每个元素对应着内存中的8位（即一个字节）。

Typed Arrays的用法

当创建了一个新的类型化数组时，你需要传递一个 ArrayBuffer 或者一个数字来指示数组中有多少个元素。例如，如果要创建具有1024个字节的Uint8Array，可以这样做：

let buffer = new ArrayBuffer(1024);

let uint8Array = new Uint8Array(buffer);

同样地，你也可以只指定需要的元素个数而不是传入一个ArrayBuffer：

let uint8Array = new Uint8Array(1024);

二、ARRAYBUFFER 和 DATAVIEW

除了类型化数组，JavaScript 提供了DataView这个更灵活的接口，以不同的数字类型从ArrayBuffer对象读取和写入数据。

什意是DataView

DataView是一个可以从二进制ArrayBuffer对象读写多种数值类型的低级接口，而不用考虑平台的字节序问题。使用DataView，开发者可以从同一缓冲区读取或写入不同的、复杂的数据结构。这在需要操作不同种类的二进制数据的应用中非常有用，例如：读取文件格式、网络协议交换数据等场合。

DataView的使用

创建一个DataView时，你可以指定要操作的ArrayBuffer、字节偏移量以及字节长度。如果不指定偏移量和长度，则默认为整个ArrayBuffer的范围。下面是一个简单的用法示例：

let buffer = new ArrayBuffer(16);

let dataView = new DataView(buffer, 0, 16);

使用DataView后，可以通过如下方法读写不同类型的数据：

• getInt8()
• getUint8()
• getInt16()
• getUint16()
• getInt32()
• getUint32()
• getFloat32()
• getFloat64()
• setInt8()
• setUint8()
• setInt16()
• setUint16()
• setInt32()
• setUint32()
• setFloat32()
• setFloat64()

DataView提供了大量set和get方法，以便你可以从ArrayBuffer中读写不同的数据类型。

三、ARRAYBUFFER 的实际应用场景

ArrayBuffer和相关的视图(Typed Arrays和DataView)是处理大量二进制数据的强大工具。下面是一些实际应用场景：

网络通信

在进行网络请求或响应时，通常需要处理二进制数据流。使用ArrayBuffer，这些数据可以直接发送和接收而无需转换成字符串格式，节省了编码和解码的时间，降低了传输数据的体积。

文件操作

读取或者写入文件时，特别是图片、视频和音频文件，这些文件本质上都是以二进制形式存储的。你可以使用File API读取文件为ArrayBuffer，然后通过Typed Arrays或DataView进行进一步的操作或解析。

WebGL编程

WebGL用于在网页上进行3D渲染，这通常涉及到大量的二进制数据处理，特别是纹理、顶点等。ArrayBuffer在这里被广泛使用来高效地传输和操作这些数据。

音频处理

Web Audio API使开发者能够处理和分析音频数据，ArrayBuffer被用于表示音频缓冲区中的原始PCM数据，开发者可以直接对这些数据进行低级操作。

四、ARRAYBUFFER 的限制和考量

虽然ArrayBuffer提供了更底层的数据处理能力，但它也带来了一些限制和需要考虑的问题。

浏览器兼容性

尽管现代浏览器普遍支持ArrayBuffer和视图，但是在旧的浏览器或某些移动设备上可能仍存在兼容性问题。在使用这些特性前需要检查目标平台的支持情况。

内存管理

ArrayBuffer被分配的内存是固定的，并且不能像普通的JavaScript数组那样动态扩展。如果需要处理大小不确定的数据，可能需要更复杂的内存管理策略。另外，大的ArrayBuffer可能会对系统内存产生压力，所以需要注意避免内存泄漏。

性能考虑

虽然ArrayBuffer设计用来提高性能，但是不当的使用也可能拖慢程序的速度。比如频繁创建和销毁大的ArrayBuffer对象，或者错误的选择Typed Arrays视图类型可能会引起性能问题。

总的来说，ArrayBuffer是JavaScript中操作二进制数据的基石，它不仅为开发者提供了更直接、更有效的数据处理方式，而且支配着一些Web中最先进的特性和应用。然而，与任何强大的工具一样，合理、高效的使用是达成目的的关键。

相关问答FAQs：

1. JavaScript 中的 ArrayBuffer 是什么？
ArrayBuffer 是一种用于在 JavaScript 中处理二进制数据的对象。它提供了一种在内存中分配固定大小的连续存储空间的方式，可以用来存储、操作和传输二进制数据，如图像、音频、视频等。ArrayBuffer 实际上只是一个占据内存空间的缓冲区，不能直接访问和操作其中的数据。

2. 如何使用 JavaScript 中的 ArrayBuffer？
要使用 ArrayBuffer 对象，首先必须创建一个指定大小的 ArrayBuffer 实例。可以通过其构造函数来创建，例如：let buffer = new ArrayBuffer(size); 其中 size 表示希望分配的内存大小。一旦创建了 ArrayBuffer 对象，我们可以使用其他视图（如 TypedArray 和 DataView）来对其进行操作和访问其中的数据。

3. ArrayBuffer 和普通数组有什么区别？
ArrayBuffer 和普通数组有一些关键区别。普通数组是 JavaScript 中的高级对象，可以存储各种类型的数据。而 ArrayBuffer 专门用于处理二进制数据，只能存储数字类型的数据。此外，ArrayBuffer 在内存中分配的空间是固定的，而普通数组可以动态增长或收缩。另外，普通数组可以直接访问和修改其中的元素，而 ArrayBuffer 只能通过视图来操作其中的数据。总的来说，ArrayBuffer 适用于需要高效处理大量二进制数据的场景，而普通数组更适用于通用的数据存储和操作。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。