Mastering JavaScript ArrayBuffer A Comprehensive Guide -- 知识铺

文章目录

描述

ArrayBuffer 是 JavaScript 低级二进制数据操作功能的核心部分。它表示固定长度的原始二进制数据缓冲区。然后可以使用 TypedArray 或 DataView 等视图来操作该缓冲区，以处理不同类型的数据。

为什么使用ArrayBuffer？

性能：直接处理二进制数据比处理字符串或其他高级对象更有效。
互操作性：促进与其他需要二进制格式的 API 和系统的通信。
文件处理：对于涉及文件 I/O 的操作至关重要，例如读取和写入二进制文件。
网络操作：对于 WebSocket 和其他处理二进制数据的网络协议很有用。

哪里使用ArrayBuffer

WebAssembly： ArrayBuffer 用于与 WebAssembly 模块交互，这些模块通常需要二进制数据来执行性能关键型任务。
图像处理：操作图像的像素数据，例如应用滤镜或变换。
音频处理：处理原始音频数据以进行播放、分析或操作。
数据存储：存储和处理二进制数据，例如在数据库中或用于缓存目的。
密码学：管理加密和解密过程的二进制数据。
科学计算：处理需要高效二进制数据处理的大型数据集和复杂的数值计算。

构造函数

ArrayBuffer 构造函数创建一个新的 ArrayBuffer 对象。

<span>let</span> <span>buffer</span> <span>=</span> <span>new</span> <span>ArrayBuffer</span><span>(</span><span>8</span><span>);</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>buffer</span><span>.</span><span>byteLength</span><span>);</span> <span>// 8</span>

语法： new ArrayBuffer(length)
参数：
- length ：缓冲区的大小（以字节为单位）。

静态属性

ArrayBuffer.length：始终为 1（构造函数接受的参数数量）。

<span>console</span><span>.</span><span>log</span><span>(</span><span>ArrayBuffer</span><span>.</span><span>length</span><span>);</span> <span>// 1</span>

静态方法

ArrayBuffer.isView(arg)：如果 arg 是 TypedArray 或 DataView 对象之一，则返回 true 。

<span>let</span> <span>buffer</span> <span>=</span> <span>new</span> <span>ArrayBuffer</span><span>(</span><span>8</span><span>);</span>
<span>let</span> <span>view</span> <span>=</span> <span>new</span> <span>Uint8Array</span><span>(</span><span>buffer</span><span>);</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>ArrayBuffer</span><span>.</span><span>isView</span><span>(</span><span>view</span><span>));</span> <span>// true</span>

ArrayBuffer.transfer(oldBuffer, newByteLength)：创建一个具有指定大小的新 ArrayBuffer 并将内容从旧缓冲区复制到新缓冲区（实验）。

<span>let</span> <span>buffer1</span> <span>=</span> <span>new</span> <span>ArrayBuffer</span><span>(</span><span>8</span><span>);</span>
<span>let</span> <span>buffer2</span> <span>=</span> <span>ArrayBuffer</span><span>.</span><span>transfer</span><span>(</span><span>buffer1</span><span>,</span> <span>16</span><span>);</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>buffer2</span><span>.</span><span>byteLength</span><span>);</span> <span>// 16</span>

实例属性

ArrayBuffer.prototype.byteLength：返回 ArrayBuffer 的长度（以字节为单位）。

<span>let</span> <span>buffer</span> <span>=</span> <span>new</span> <span>ArrayBuffer</span><span>(</span><span>8</span><span>);</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>buffer</span><span>.</span><span>byteLength</span><span>);</span> <span>// 8</span>

实例方法

ArrayBuffer.prototype.slice(begin, end)：返回一个新的 ArrayBuffer ，它是此缓冲区从 begin 到 end 的副本。

<span>let</span> <span>buffer</span> <span>=</span> <span>new</span> <span>ArrayBuffer</span><span>(</span><span>8</span><span>);</span>
<span>let</span> <span>slicedBuffer</span> <span>=</span> <span>buffer</span><span>.</span><span>slice</span><span>(</span><span>2</span><span>,</span> <span>6</span><span>);</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>slicedBuffer</span><span>.</span><span>byteLength</span><span>);</span> <span>// 4</span>

参数：
- begin ：切片的开始索引。
- end ：切片的结束索引（不包括在内）。

例子

示例 1：创建 ArrayBuffer 和 TypedArray 视图

<span>let</span> <span>buffer</span> <span>=</span> <span>new</span> <span>ArrayBuffer</span><span>(</span><span>8</span><span>);</span>
<span>let</span> <span>view</span> <span>=</span> <span>new</span> <span>Uint8Array</span><span>(</span><span>buffer</span><span>);</span>
<span>view</span><span>[</span><span>0</span><span>]</span> <span>=</span> <span>255</span><span>;</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>view</span><span>[</span><span>0</span><span>]);</span> <span>// 255</span>

示例2：使用DataView操作数据

<span>let</span> <span>buffer</span> <span>=</span> <span>new</span> <span>ArrayBuffer</span><span>(</span><span>16</span><span>);</span>
<span>let</span> <span>view</span> <span>=</span> <span>new</span> <span>DataView</span><span>(</span><span>buffer</span><span>);</span>
<span>view</span><span>.</span><span>setUint8</span><span>(</span><span>0</span><span>,</span> <span>255</span><span>);</span>
<span>view</span><span>.</span><span>setFloat32</span><span>(</span><span>4</span><span>,</span> <span>42.42</span><span>,</span> <span>true</span><span>);</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>view</span><span>.</span><span>getUint8</span><span>(</span><span>0</span><span>));</span> <span>// 255</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>view</span><span>.</span><span>getFloat32</span><span>(</span><span>4</span><span>,</span> <span>true</span><span>));</span> <span>// 42.42</span>

规格

ArrayBuffer 在 ECMAScript (ECMA-262) 规范中定义，确保不同 JavaScript 引擎之间的标准一致。

浏览器兼容性

ArrayBuffer 得到所有现代浏览器的广泛支持，包括：

铬合金
火狐浏览器
苹果浏览器
边缘
Internet Explorer（从版本 10 开始）
Node.js

结论

理解和利用 ArrayBuffer 对于 JavaScript 中高效的二进制数据操作至关重要。无论您是处理文件 I/O、网络通信还是性能关键型应用程序， ArrayBuffer 都提供了用于处理原始二进制数据的强大工具集。