为什么 Blob() 使用 Array 产生的结果与使用 Uint8Array 产生的结果不同？

Question

当所有值都代表原始字节时，为什么

Blob()

在传递 Array 和 Uint8Array 之间会产生不同的结果？

new Blob([[0,60,0,60]])
// Blob {size: 9, type: ''}

new Blob([new Uint8Array([0,60,0,60])])
// Blob {size: 4, type: ''}

Answer 1

第一个 Blob 构造函数参数（W3）（

blobParts

）仅支持三种不同类型：

• BufferSource 元素
• Blob 元素
• USVString 元素

输入细分（数组）

const blob = new Blob([[0, 60, 0, 60]]);
console.log({ size: blob.size, type: blob.type });

• 外部数组

  []

  是

  blobParts

  序列。
• 内部数组

  [0, 60, 0, 60]

  是

  numbers

  的常规 JavaScript 数组。
• 正则数组： 这既不是

  BufferSource

  、

  Blob

  ，也不是

  USVString

  。当构造函数遇到不支持的类型时，它会使用默认的 toString() 方法将其转换为字符串（读取 3 和 4）。
• 序列化：

  [0, 60, 0, 60].toString()

  结果为字符串

  "0,60,0,60"

  。
• 字符串

  "0,60,0,60"

  被视为

  USVString

  ，编码为

  UTF-8

  。
• 大小计算： UTF-8中每个字符（包括逗号）占用1个字节，总共9个字节。

输入细分（Uint8Array）

const blob = new Blob([new Uint8Array([0,60,0,60])])
console.log({ size: blob.size, type: blob.type });

• 数组

  [new Uint8Array([0, 60, 0, 60])]

  是

  blobParts

  序列。

• Uint8Array

  是

  BufferSource

  。
• BufferSource 是一个 ArrayBuffer，其中每个元素对应一个字节。它是“持有指向固定字节数缓冲区的指针（可以为空）的对象”
• 大小计算：

  [0, 60, 0, 60]

  结果为 4 字节。