本文深入剖析 JavaScript 中普通数组与 TypedArray 在内存分配上的本质差异，揭示 Blob 构造函数对不同类型数组的处理逻辑，并通过代码实证说明为何嵌套 Uint8Array 的普通数组会导致意外的字节大小——根本原因在于自动字符串化而非二进制拼接。
本文深入剖析 javascript 中普通数组与 typedarray 在内存分配上的本质差异，揭示 `blob` 构造函数对不同类型数组的处理逻辑，并通过代码实证说明为何嵌套 `uint8array` 的普通数组会导致意外的字节大小——根本原因在于自动字符串化而非二进制拼接。
在 JavaScript 中，“数组”一词常被泛化使用，但其底层内存模型存在根本性分野：普通数组（Array）是动态、异构、引用型的对象容器；而 TypedArray（如 Uint8Array、Uint16Array）是连续、同构、底层内存映射的视图。二者在内存占用、序列化行为及性能特征上截然不同——这正是你观察到 Blob(changes).size 输出远超预期（如 159800 而非 40000）的核心原因。
问题根源：Blob 构造函数的规范行为
根据 WHATWG Blob 规范，Blob 构造函数接受一个“parts”参数（即你的 changes 数组），并仅明确定义了对以下三类值的处理方式：
- Blob 实例 → 直接按原始二进制内容追加；
- BufferSource（如 Uint8Array, ArrayBuffer, DataView）→ 按字节序列直接写入；
- 字符串 → 按 UTF-8 编码后写入字节。
⚠️ 关键点：Array（即使其元素全是 Uint8Array）不属于上述任一合法类型。此时引擎会执行隐式类型转换：将整个数组调用 .toString() 方法，再将结果字符串作为 UTF-8 写入 Blob。
验证这一行为非常简单：
立即学习“Java免费学习笔记（深入）”；
const arr = [ new Uint8Array([200]), new Uint8Array([10]), new Uint8Array([1]) ]; console.log(arr.toString()); // "200,10,1" console.log(new Blob([arr]).size); // 7 —— 即 "200,10,1".length === 7 (UTF-8 字节数相同)
回到你的原始代码：
subArray[j] = new Uint8Array(1); subArray[j][0] = 200; // → Uint8Array[200] // ... console.log(new Blob(changes).size); // ≈ 159800
每个 Uint8Array(1) 被 .toString() 后生成字符串 "200"（3 字节），200×200=40,000 个元素 → 理论字符串长度为 40000 × 3 + 39999 × 1（逗号分隔符）≈ 159999 字节，与你观测到的 159800 高度吻合（微小差异源于内部实现细节，如换行/空格等）。
同理：
- 设 subArray[j][0] = 10 → 字符串 "10"（2 字节）→ 总长 ≈ 40000×2 + 39999 ≈ 119999 → 匹配 119800；
- 设 subArray[j][0] = 1 → 字符串 "1"（1 字节）→ 总长 ≈ 40000×1 + 39999 ≈ 79999 → 匹配 79800。
这也解释了为何换成 Uint16Array(1) 结果不变：.toString() 只关心数值的十进制字符串表示，与底层位宽无关。
正确做法：使用扁平化的 TypedArray
若目标是构建精确的二进制数据块（如图像像素、协议帧），必须避免中间层普通数组，直接使用单层 TypedArray：
const x = 200;
const y = 200;
// ✅ 正确：2D 数据展平为单层 Uint8Array（200×200 = 40000 字节）
const changes = new Uint8Array(x * y);
for (let i = 0; i < y; i++) {
for (let j = 0; j < x; j++) {
changes[i * x + j] = 200; // 行优先索引
}
}
console.log(new Blob([changes]).size); // 40000 —— 精确符合预期或使用二维结构但保持 Blob 输入为 TypedArray 列表（注意：需确保每个元素是 BufferSource）：
const changes = [];
for (let i = 0; i < y; i++) {
const row = new Uint8Array(x).fill(200); // 直接创建并填充
changes.push(row); // ✅ row 是 Uint8Array → BufferSource
}
console.log(new Blob(changes).size); // 40000注意事项与最佳实践
- 永远不要依赖普通数组存储二进制数据：Array 的灵活性以牺牲内存效率和可预测性为代价；
- Blob 不是通用序列化工具：它专为 I/O 场景设计，对非标准输入的行为由引擎实现决定，不具备跨平台一致性；
- 需要动态结构？用 ArrayBuffer + DataView：手动管理偏移与类型，完全掌控内存布局；
- 调试技巧：对可疑对象使用 Object.prototype.toString.call(obj) 辨别真实类型（如 [object Uint8Array] vs [object Array]）。
理解 JavaScript 中“数组”的双重身份——语义容器 vs 物理内存——是编写高效、可预测二进制操作代码的第一步。真正的内存控制权，始终掌握在 TypedArray 与 ArrayBuffer 手中。
