原生js:Array 和 TypedArray 对比

概述

• Array 适合普通的动态和混合数据存储
• TypedArray 适合高性能应用，比如图像处理、音视频解码、科学计算和游戏开发
• 根据存储范围和精度需求选择合适的 TypedArray 类型，比如 Uint8Array 用于像素，Float32Array 用于 3D 图形(如经纬度)，BigInt64Array 用于超大整数计算

Array

let data = [1, "name", true, { key: "value" }];
data.push(100); // 动态扩展数组

作用

• 普通的数组操作，比如存储不同类型的元素
• 动态添加或删除元素的场景
• 对性能或内存要求不高的场景

TypedArray

- 有符号整数
- Int8Array  -> [-1*2**7, 2**7-1] => [-128,127]
- Int16Array  -> [-1*2**15, 2**15-1] => [-32768,32767]
- Int32Array  -> [-1*2**31, 2**31-1]
- 无符号整数(不能为负数，可为0)
- Uint8Array  -> [0, 2**8 - 1] => [0,255]
- Uint16Array  -> [0, 2**16 - 1] => [0,65535]
- Uint32Array  -> [0, 2**32 - 1]
- 无符号整数 + 自动截断(不能为负数，可为0)
- Uint8ClampedArray  -> [0, 2**8 - 1] => [0,255]
- 浮点数
- Float32Array  -> 精度约 7 位
- Float64Array  -> 精度约 15 位
- 有符号大整数
- BigInt64Array  -> -2^63 ~ 2^63-1
- 无符号大整数(不能为负数，可为0)
- BigUint64Array  -> 0 ~ 2^64-1

作用

• 提供连续的内存块，用于存储单一类型的值
• 支持高效的数值计算操作，直接操作底层内存
• 比普通数组更快、更高效，特别适合处理大量相同类型的数据

全面对比

特性	Array	Int8Array	Uint8Array	Uint8ClampedArray	Int16Array	Uint16Array	Int32Array	Uint32Array	Float32Array	Float64Array	BigInt64Array	BigUint64Array
存储类型	任意类型	8 位有符号整数	8 位无符号整数	8 位无符号整数（取整）	16 位有符号整数	16 位无符号整数	32 位有符号整数	32 位无符号整数	32 位浮点数	64 位浮点数	64 位有符号大整数	64 位无符号大整数
范围	任意	-128 ~ 127	0 ~ 255	0 ~ 255（截断）	-32,768 ~ 32,767	0 ~ 65,535	-2^31 ~ 2^31-1	0 ~ 2^32-1	精度约 7 位	精度约 15 位	-2^63 ~ 2^63-1	0 ~ 2^64-1
动态长度	是	否	否	否	否	否	否	否	否	否	否	否
存储精度	动态类型	整数	整数	整数（截断范围）	整数	整数	整数	整数	浮点数	双精度浮点数	大整数	大整数
内存模型	不连续	连续	连续	连续	连续	连续	连续	连续	连续	连续	连续	连续
性能	较慢	高性能	高性能	高性能	高性能	高性能	高性能	高性能	高性能	高性能	较高性能	较高性能
超出范围处理	任意存储	截断	截断	截断为 0~255	截断	截断	截断	截断	超范围为 Infinity	超范围为 Infinity	截断	截断
是否支持浮点数	是	否	否	否	否	否	否	否	是	是	否	否
是否支持负数	是	是	否	否	是	否	是	否	是	是	是	否
支持的方法	多种操作灵活	基本数组操作	基本数组操作	基本数组操作	基本数组操作	基本数组操作	基本数组操作	基本数组操作	基本数组操作	基本数组操作	基本数组操作	基本数组操作

TypedArray的单个解析

Int8Array

场景：用于二进制数据处理或处理需要小范围整数的应用程序，如图像处理中的灰度值(-128 到 127 表示灰度变化）

let int8 = new Int8Array(100); // 分配 100 个字节，初始化为 0
int8[0] = 120; // 存储一个小范围整数

Uint8Array

场景：适合存储非负小范围整数，节省内存，如图像像素数据处理：存储 RGB 值（0-255）

let uint8 = new Uint8Array([255, 128, 64]); // RGB 值
console.log(uint8[0]); // 输出：255

Uint8ClampedArray

场景：与 Uint8Array 类似，但值超出范围时会自动截断（0-255），如图像数据的颜色处理，避免颜色值超出范围

let clamped = new Uint8ClampedArray(3);
clamped[0] = 300; // 超出范围自动截断为 255
console.log(clamped[0]); // 输出：255

Int16Array

场景：适合存储中等范围的整数，如传感器数据：如陀螺仪、加速度计输出的整数值

let int16 = new Int16Array(5);
int16[0] = 32000; // 存储中等范围整数

Uint16Array

场景：适合存储非负中等范围的整数，如音频和视频编码：存储帧索引或采样数据

let uint16 = new Uint16Array(3);
uint16[0] = 60000; // 存储较大的无符号整数

Int32Array

场景：适合存储大范围整数，如存储对象 ID，或需要高精度整数的应用场景

let int32 = new Int32Array([2147483647, -2147483648]); // 32 位整数
console.log(int32[0]); // 输出：2147483647

Uint32Array

场景：适合存储非负大范围整数，如存储大文件的偏移值或索引，处理需要超大非负整数的高性能应用

let uint32 = new Uint32Array(3);
uint32[0] = 4294967295; // 最大值
console.log(uint32[0]); // 输出：4294967295

Float32Array

场景：存储 32 位浮点数，提供高效的浮点数存储和计算，如3D 图形计算：如存储顶点坐标、法线向量

let float32 = new Float32Array([0.1, 0.2, 0.3]);
console.log(float32[0]); // 输出：0.1

Float64Array

场景：存储 64 位双精度浮点数，支持更高精度的小数，如地理信息系统(GIS)：存储经纬度坐标

let float64 = new Float64Array([0.123456789123456]);
console.log(float64[0]); // 输出高精度值

BigInt64Array

场景：适合需要处理超过普通整数范围的数据，如大数据应用，如存储文件偏移值或计数器

let bigInt64 = new BigInt64Array([BigInt(-9223372036854775808)]);
console.log(bigInt64[0]); // 输出：-9223372036854775808n

BigUint64Array

场景：用于存储大范围非负整数，如高性能服务器应用，大文件索引，区块链中的超大数值处理

let bigUint64 = new BigUint64Array([BigInt(18446744073709551615)]);
console.log(bigUint64[0]); // 输出：18446744073709551615n