TypedArray 使用指南「10 分钟掌握 GIS开发的高性能利器」

🚀 个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、优快云优质创作者
💟 作 者：柳晓黑胡椒❣️
📝 专 栏：js基础
🌈 若有帮助，还请关注 ➕ 点赞➕收藏，不行的话我再努努力💪💪💪

概述

在 JavaScript 中，数据结构的选择 往往决定了性能表现和代码质量。

Array 👉 就像一个“万能收纳盒”📦，可以随心所欲地放入数字、字符串、对象、布尔值等各种元素，还能动态扩展，非常灵活。

TypedArray 👉 则是一把“高性能武器⚡”，它直接操作底层内存，存储类型单一但效率极高，常被用于 图像处理🖼️、音视频解码🎵、科学计算🔬、3D 图形与 GIS 渲染🌍 等对性能要求极高的场景。

怎么选？🤔

对性能要求不高，只是常规数据存储 ➡️ 用 Array 就好。

需要批量处理大量同类型数据 ➡️ 果断上 TypedArray！

Array

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

作用

• 普通的数组操作，比如存储不同类型的元素
• 动态添加或删除元素的场景
• 对性能或内存要求不高的场景
  💡 典型使用场景：普通业务逻辑的数据存储（如表单数据、配置项等）

TypedArray

JavaScript 为了满足高性能场景，提供了多种 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

优势

• 提供连续的内存块，用于存储单一类型的值
• 支持高效的数值计算操作，直接操作底层内存
• 比普通数组更快、更高效，特别适合处理大量相同类型的数据
  💡 典型使用场景：图像像素处理、视频解码、科学计算、3D 模型坐标存储、GIS 经纬度数据存储

全面对比

特性	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