js TypedArray

TypedArray 是 JavaScript 中用于处理二进制数据的类数组对象，它提供了一种高效的方式来操作原始二进制数据缓冲区（ArrayBuffer）。

• TypedArray 的基本概念

  类型化视图：TypedArray 名称中的“type”指的是看待一组位序列的视图，即如何将这些位序列映射为特定类型的数据（如 8 位有符号整型、16 位无符号整型等）。

  缓冲区（ArrayBuffer）：TypedArray 操作的是 ArrayBuffer 对象，它表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作，需要通过 TypedArray 或 DataView 对象来操作。

• ArrayBuffer 的创建与使用

  创建 ArrayBuffer：通过 new ArrayBuffer(length) 构造器来创建指定长度的二进制缓冲区。

  查看属性：可以通过 byteLength 属性查看 ArrayBuffer 的长度。

  操作限制：ArrayBuffer 本身不支持直接交互，需要通过 TypedArray 或 DataView 来读写内容。

• TypedArray 的构建

  在 ArrayBuffer 上放置视图：通过 TypedArray 构造函数（如 new Uint16Array(buffer)）在 ArrayBuffer 上创建特定类型的视图。

  示例：在一个 32 字节（256 位）的 ArrayBuffer 上创建 16 位无符号整型的类型数组，将得到 16 个元素。

• 大端小端（Endianness）

  字节序：在处理多字节数据时，需要考虑字节序（大端或小端），这会影响数据的读写方式。

• Node.js 中 ArrayBuffer 与 Buffer 的互相转换

  Buffer 转 ArrayBuffer：通过创建一个新的 ArrayBuffer 和 Uint8Array 视图，将 Buffer 的内容逐个复制到 ArrayBuffer 中。

  ArrayBuffer 转 Buffer：类似地，通过创建一个新的 Buffer 和 Uint8Array 视图，将 ArrayBuffer 的内容逐个复制到 Buffer 中。

• Node.js 通过 Buffer 传递数据到前端，前端通过 ArrayBuffer 接收数据

  后端处理：使用 Buffer 分配内存并写入数据（如 Three.js 中的点阵数组），然后通过 HTTP 响应发送。

  前端处理：使用 XMLHttpRequest 接收数据，设置 responseType 为 'arraybuffer'，然后通过 TypedArray（如 Float32Array）处理接收到的二进制数据。

• 前端接收图片 Buffer

  处理方式：与接收点阵数据类似，前端通过 XMLHttpRequest 接收图片的二进制数据，并使用 Uint8Array 来处理。

• 参考书籍与资源

  《你不知道的 JavaScript 下卷》：提供了关于 JavaScript 中二进制数据处理的深入讲解。

  Using files from web applications：介绍了如何在 Web 应用程序中使用文件，包括二进制数据的处理。

• 示例代码与图片

  代码示例：提供了 Node.js 和前端 JavaScript 中处理二进制数据的具体代码示例。

  相关图片：展示了与二进制数据处理相关的概念和流程图，有助于更直观地理解。

TypedArray 是 JavaScript 中处理二进制数据的重要工具，它通过 ArrayBuffer 提供底层存储，并通过各种类型的视图来高效地操作这些数据。在 Node.js 和前端开发中，TypedArray 都发挥着重要作用，特别是在处理大量二进制数据（如图像、音频、三维模型等）时。