TypedArray 与普通数组内存差异解析

本文深入剖析了 JavaScript 中普通数组与 TypedArray 在内存布局和 Blob 构造行为上的本质差异，揭示了一个常见却极易被忽视的陷阱：将嵌套 Uint8Array 的普通数组传入 Blob 构造函数时，因 Blob 仅原生支持 ArrayBuffer/TypedArray 和字符串输入，普通数组会被隐式 toString() 转换为冗长的逗号分隔数字字符串（如 "200,200,..."），导致 Blob.size 远超预期二进制大小；文章不仅清晰解释了这一现象背后的规范逻辑和 UTF-16 编码开销，更提供了切实可行的优化方案——优先使用单一 TypedArray 或扁平 ArrayBuffer 配合偏移计算，实现零拷贝、连续内存与精准字节控制，帮助开发者避开性能雷区，真正掌握 JavaScript 二进制数据处理的核心要义。

本文揭示 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() 方法转换。

这就是谜题的答案：

• 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 是唯一可靠选择。

到这里，我们也就讲完了《TypedArray 与普通数组内存差异解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！