17370845950

TypedArray是JavaScript中用于操作ArrayBuffer上特定类型数值的视图统称，包含Int8Array、Uint8Array等多种类型，常用于高性能场景如音视频处理。通过new关键字可创建指定长度或基于ArrayBuffer的实例，支持索引读写、遍历及set/slice等操作，但长度固定且不支持push/pop。多个TypedArray可共享同一buffer，需注意数据重叠影响。选择合适类型能提升性能，如Uint8ClampedArray用于像素，Float32Array用于音频。字节序由平台决定，跨平台建议用DataView。掌握其与ArrayBuffer协作机制对处理二进制数据至关重要。

JavaScript中的TypedArray不是单一对象，而是一组视图类型的统称，用于在底层二进制数据缓冲区（ArrayBuffer）上操作特定类型的数值数组。它们在处理音频、视频、图像或网络协议等高性能场景中非常有用。本文将带你了解TypedArray的核心概念和常见操作方法。

理解TypedArray与ArrayBuffer的关系

TypedArray本身并不是一个构造函数，而是包括Int8Array、Uint8Array、Int16Array、Float32Array等多种具体类型的总称。这些类型都基于一个共享的内存块——ArrayBuffer。

ArrayBuffer代表一块固定的连续内存空间，不能直接读写，必须通过TypedArray或DataView来访问。

• 创建一个8字节的缓冲区：const buffer = new ArrayBuffer(8);
• 用Float32Array映射前4字节：const floatView = new Float32Array(buffer, 0, 1);
• 用Int16Array映射后4字节：const intView = new Int16Array(buffer, 4, 2);

多个TypedArray可以共享同一块buffer，但数据解释方式不同，需注意重叠带来的副作用。

常用TypedArray类型及取值范围

每种TypedArray对应一种基本数值类型，具有固定字节长度和符号性。

• Int8Array：8位有符号整数，范围 -128 到 127
• Uint8Array：8位无符号整数，范围 0 到 255
• Int16Array：16位有符号整数，范围 -32768 到 32767
• Uint16Array：16位无符号整数，范围 0 到 65535
• Int32Array：32位有符号整数，范围 -2^31 到 2^31-1
• Uint32Array：32位无符号整数
• Float32Array：32位浮点数（单精度）
• Float64Array：64位浮点数（双精度）

选择合适类型可节省内存并提升性能，比如像素数据常用Uint8ClampedArray（Canvas专用），音频样本常用Float32Array。

创建与初始化TypedArray的方法

TypedArray支持多种构造方式，使用new关键字调用。

• 指定长度：new Uint8Array(10) 创建包含10个0的数组
• 从普通数组初始化：new Int16Array([1, 2, 3])
• 从另一个TypedArray创建：new Float32Array(float64Array)（会做类型转换）
• 基于ArrayBuffer创建：new Uint8Array(buffer, byteOffset, length)
• 从可迭代对象创建：new Uint8Array(new Set([1, 2, 3]))

注意：传入非整数值时会被自动截断或转换，如Float转Int会舍去小数部分。

常见操作与注意事项

TypedArray的API设计类似普通数组，但功能有限，不支持push/pop等动态方法。

• 读写元素：像数组一样使用索引，arr[0] = 255;
• 遍历：可用for循环、for...of、map、forEach等
• 复制与切片：
  • slice() 返回新的TypedArray副本
  • set() 将数据写入指定位置，如 target.set(source, offset)
• 视图重叠问题：多个TypedArray引用同一buffer时，修改一处会影响其他视图
• 字节序控制：TypedArray默认使用平台原生字节序，跨平台交换数据建议用DataView进行精细控制

如果需要改变数组长度，应手动创建新实例，因为TypedArray长度固定不可变。

基本上就这些。掌握TypedArray有助于高效处理二进制数据，特别是在WebAssembly、Canvas、WebSocket或File API中。关键是理解其与ArrayBuffer的协作机制，并根据数据特征选择合适的类型。不复杂但容易忽略细节。