本文揭示 JavaScript 中 Blob 构造函数对不同类型数组（普通数组 vs. TypedArray）的处理机制差异，解释为何嵌套 Uint8Array 的普通数组会导致意外的 Blob 大小，并提供高效内存使用的正确实践。
本文揭示 javascript 中 `blob` 构造函数对不同类型数组（普通数组 vs. typedarray）的处理机制差异，解释为何嵌套 `uint8array` 的普通数组会导致意外的 blob 大小，并提供高效内存使用的正确实践。
在 JavaScript 中，数组本身并不直接等同于连续内存块——这一关键认知常被初学者忽略。你代码中看似“创建了 200×200 个单字节单元”的结构：
const subArray = [];
for (let j = 0; j < x; j++) {
subArray[j] = new Uint8Array(1); // 每个是独立的 Uint8Array 实例
subArray[j][0] = 200;
}
changes[i] = subArray; // subArray 是普通 Array，元素是对象引用实际构建的是一个 长度为 200 的普通 Array，其每个元素都是一个独立的 Uint8Array 对象（含元数据、缓冲区指针、长度字段等开销），而非一块连续的 200 字节内存。当该普通数组传入 new Blob(changes) 时，浏览器不将其视为二进制数据源，而是依据 Blob 规范 将其降级为字符串处理：
Blob 构造函数仅明确定义了三类合法输入：Blob、ArrayBuffer/TypedArray（统称 buffer source）、或 string。普通 Array 不在此列，因此会被隐式调用 toString() 方法转换。
这就是谜题的答案：
立即学习“Java免费学习笔记（深入）”；
- new Uint8Array([200]).toString() → "200"（3 字符，UTF-16 编码下占 6 字节）
- new Uint8Array([10]).toString() → "10"（2 字符 → 4 字节）
- new Uint8Array([1]).toString() → "1"（1 字符 → 2 字节）
而你的 changes 是一个 200×200 的二维普通数组结构，changes.toString() 会生成形如 "200,200,200,...,200" 的超长字符串（含大量逗号分隔符），最终 Blob.size 返回的是该字符串的 UTF-16 字节长度（非原始二进制意图），故出现 159800 等非预期值。
✅ 正确做法：用单一 TypedArray 替代嵌套对象结构
let x = 200;
let y = 200;
const changes = [];
for (let i = 0; i < y; i++) {
// ✅ 创建单块连续内存：200 字节的 Uint8Array
const subArray = new Uint8Array(x);
subArray.fill(200); // 批量赋值更高效
changes.push(subArray);
}
console.log(new Blob(changes).size); // 输出 40000 —— 符合 200 × 200 × 1 字节预期进一步优化：若需二维逻辑访问，可配合 DataView 或计算偏移量，避免内存碎片：
// 单一扁平缓冲区：40000 字节
const buffer = new ArrayBuffer(x * y);
const view = new Uint8Array(buffer);
// 模拟 changes[i][j] = value
const setAt = (i, j, value) => {
view[i * x + j] = value;
};
setAt(0, 0, 200);
setAt(199, 199, 1);
console.log(new Blob([view]).size); // 仍为 40000，零拷贝⚠️ 注意事项：
- Uint16Array(1) 与 Uint8Array(1) 在 Blob 中表现一致，正是因为它们都被 toString() 转换为数字字符串（如 "200"），与底层位宽无关；
- Blob 构造函数对非标准输入（如普通数组、Set、自定义类）的行为属于实现细节，不可依赖且无跨浏览器保证；
- 内存效率关键在于：优先使用 TypedArray 直接操作底层 ArrayBuffer，避免多层对象包装；
- 调试技巧：用 console.log(Object.getOwnPropertyDescriptors(Uint8Array.prototype)) 查看 TypedArray 原型方法，理解其不可枚举性与底层绑定特性。
总结：JavaScript 的“数组”是高度抽象的数据结构，Array 提供动态语义，TypedArray 提供内存控制。混淆二者将导致性能陷阱与语义错误。始终根据数据本质选择类型——追求二进制精确性时，TypedArray 是唯一可靠选择。
