![[二进制数据.excalidraw]]

`ArrayBuffer`

ArrayBuffer 是用来表示通用的原始二进制数据缓冲区，本质是一个字节数组

const buffer = new ArrayBuffer(16) // 创建一个长度为 16 Byte 的 buffer
console.log(buffer.byteLength) // 16

注意：创建后长度固定，不可调整

它会分配一个 16 字节的连续内存空间，并用 0 进行预填充

ArrayBuffer 不是 Array

ArrayBuffer 是对固定长度的连续内存空间的引用，不同与 Array：

它的长度是固定的，无法增加或减少它的长度
它正好占用了内存中的那么多空间
要访问单个字节，需要另一个“视图”对象，而不是 buffer[index]
没有 Array.prototype 上 push、pop 等方法

ArrayBuffer 本身不能直接读写，需要借助数据视图：

TypedArray 视图：如 Uint8Array、Float32Array
DataView 视图：更灵活，支持任意偏移和字节长度

类型化数组（TypedArray）

ArrayBuffer 是一个内存区域，它里面存储了什么无从判断，只是一个原始的字节序列。想要操作 ArrayBuffer，需要使用“视图”对象。视图对象本身并不存储任何东西，它是一副“眼镜”，透过它来解释存储在 ArrayBuffer 中的字节

![[Pasted image 20240817183421.png]]

类型化数组	每个元素所占字节数	描述（C 语言中的数据类型）
`Int8Array`	1	8 位整型数（`signed char`）
`UInt8Array`	1	8 位无符号整型数（`unsigned char`）
`Uint8ClampedArray`	1	8 位无符号整型数，溢出时有特殊处理
`Int16Array`	2	16 位整型数（`signed short`）
`UInt16Array`	2	16 位无符号整型数（`unsigned short`）
`Int32Array`	4	32 位整型数（`signed int`）
`UInt32Array`	4	32 位无符号整型数（`unsigned int`）
`BigInt64Array`	8	64 位整型数（`signed long / long long`）
`BigUint64Array`	8	64 位整型数（`unsigned long / long long`）
`Float32Array`	4	单精度 32 位浮点数（`float`）
`Float64Array`	8	双精度 64 位浮点数（`double`）

构造器

书写 TypedArray 的说明

没有名为 TypedArray 的构造器，它只是表示 ArrayBuffer 上的视图之一的通用总称术语

当你看到 new TypedArray 之类的内容时，它表示 new Int8Array、new Uint8Array 及其他中之一

new TypedArray(buffer, byteOffset?, length?)
- buffer：ArrayBuffer 或 SharedArrayBuffer
- byteOffset：视图的起始字节位置（即：跳过几个字节长度的数据），默认为 0
- length：视图的字节长度，默认至 buffer 的末尾
new TypedArray(object)
- 给定的是 Array，或类数组对象，或可迭代对象，则会创建一个相同长度的类型化数组，并复制其内容
- 如：new Uint8Array([0, 1, 2, 3])
new TypedArray(typedArray)
- 创建一个相同长度的类型化数组，并复制其内容（复制底层 ArrayBuffer）
new TypedArray(length?)
- 创建类型化数组以包含这么多元素，默认为 0
- 它的字节长度将是 length 乘以单个 TypedArray.BYTES_PER_ELEMENT 中的字节数

可以直接创建一个 TypedArray，而无需提及 ArrayBuffer。但是，视图离不开底层的 ArrayBuffer，因此，除第一种情况（已提供 ArrayBuffer）外，其他所有情况都会自动创建底层 ArrayBuffer

属性

如要访问底层的 ArrayBuffer，在 TypedArray 中有如下的属性：

buffer：引用底层 ArrayBuffer
byteLength：底层 ArrayBuffer 的长度（即：数据占用字节数）
byteOffset：当前视图相对底层 ArrayBuffer 的偏移值

其他属性：

length：包含多少元素
BYTES_PER_ELEMENT：每个元素占用的字节数

方法 ^1

TypedArray 具有和 Array 相同的方法设计，可以设置获取元素（arr[i]、set、get）、查找（indexOf、lastIndexOf）、填充（fill）、切片（slice）、反转（reverse）、排序（sort）、拼接字符串（join）、遍历（forEach、map、find、reduce ）等

但没有 push、pop、shift、unshift、splice、concat 等会改变数组长度的方法

还有两种 Array 没有的方法：

arr.set(fromArr, offset?)：从 offset（默认为 0）开始，将 fromArr 中的所有元素复制到 arr
arr.subarray(begin?, end?)：创建一个从 begin 到 end（包头不包尾）相同类型的新视图。这类似于 slice 方法，但不复制任何内容（只是创建一个新视图，以对给定片段的数据进行操作）

溢出处理

如果尝试将越界值写入类型化数组，多余的高位数据将会被忽略

如尝试将 256 放入 Uint8Array，则超出的最高位的 1 会被忽略，因此结果是 0：

![[Pasted image 20240817175322.png]]

Uint8ClampedArray 在这方面比较特殊，它的表现不太一样。对于大于 255 的任何数字，它将保存为 255，对于任何负数，它将保存为 0。此行为对于图像或颜色处理很有用

数据视图（DataView）

类型化数组限制了数据每个元素的字节大小，而 DataView 是在 ArrayBuffer 上的一种超灵活的“未类型化”视图，它允许以任何格式访问任何偏移量（offset）的数据

类型化的数组：构造器决定了其格式，整个数组是统一的，第 i 个元素是 arr[i]
DataView：可以使用 .getUint8(offset) 或 .getUint16(offset) 之类的方法访问数据。在调用方法时选择格式，而不是在构造的时候

构造器

new DataView(buffer, byteOffset?, byteLength?)
- buffer：ArrayBuffer 或 SharedArrayBuffer
- byteOffset：视图的起始字节位置（即：跳过几个字节长度的数据），默认为 0
- length：视图的字节长度，默认至 buffer 的末尾

DataView 与类型化数组不同，只有这一个构造器，即 DataView 不会自行创建缓冲区，需要事先准备好

属性

buffer：引用底层 ArrayBuffer
byteLength：底层 ArrayBuffer 的长度（即：数据占用字节数）
byteOffset：当前视图相对底层 ArrayBuffer 的偏移值

方法

没有与 Array 或 TypedArray [[#^1|相类型的方法]]，只有对不同偏移量读写的方法：

getXxx(byteOffset, littleEndian?)：获取指定字节偏移量处的数据
setXxx(byteOffset, value, littleEndian?)：设置指定字节偏移量处的数据
- Xxx：Int8|Uint8|Int16|Uint16|Int32|Uint32|BigInt64|BigUint64|Float32|Float64 之一
- littleEndian：采用何种[[#字节序|字节序]]
  - false 或者未指定（undefined）：大端序
  - true：小端序

字节序

字节序或字节顺序描述了计算机如何组织构成数字的字节

小端序：从最低有效位到最高有效位的顺序存储字节（即：低位字节排放在内存的低地址端，高位字节排放在内存的高地址端）
- 形象类比：31 December 2050
- 现代电脑大部分使用小端序，所有的英特尔处理器都使用小端序
大端序：从最高有效位到最低有效位的顺序存储字节（即：高位字节排放在内存的低地址端，低位字节排放在内存的高地址端）
- 形象类比：2050-12-31
- 互联网标准，从标准 Unix 套接字层开始，一直到标准化网络的二进制数据结构，通常要求数据使用大端序存储。此外，老式 Mac 计算机的 68000 系列和 PowerPC 微处理器曾使用大端序

例如，用不同字节序存储数字 0x12345678：

小端序：0x78 0x56 0x34 0x12
大端序：0x12 0x34 0x56 0x78
混合序（曾经的做法，非常罕见）：0x34 0x12 0x78 0x56

Blob

Blob 全称 Binary Large Object，表示一个不可变的原始数据块，支持文本和二进制数据

特点：

不可变性：一旦创建，内容不能修改
可封装任意类型的数据：字符串、ArrayBuffer、TypedArray 等
支持 MIME 类型描述，方便浏览器识别用途

创建方式：

const blob = new Blob(
  ["Hello World"],
  { type: "text/plain" }
);

切片操作：

const slicedBlob = blob.slice(0, 5, "text/plain");

核心功能与应用场景

功能	说明
分片上传	`.slice(start, end)` 方法可用于大文件切片上传
本地预览	`canvas.toBlob()` 导出图像，配合 `URL.createObjectURL` 预览
文件下载	使用 a 标签 + createObjectURL 实现无刷新下载
缓存资源	Service Worker 中缓存 Blob 数据提升性能
处理用户上传	结合 FileReader 和 File API 操作用户文件

File

[[004.浏览器离线存储#File API|File API]]

File 对象继承自 Blob，额外包含：文件名 name ，最后修改时间 lastModified ，可以理解为：带有元数据的 Blob

创建方式：

const file = new File(
  ["Hello World"],
  "example.txt",
  { type: "text/plain" }
);

获取方式

一般通过用户上传的文件获取

示例：

// <input type="file">

const input = document.getElementById("input");
input.onchange = (event) => {
  const files = event.target.files;
  console.log("Files:", files); // FileList
};

FileReader

FileReader 是一个用于异步读取 Blob 或 File 内容的接口

常用实例方法

方法	说明
`readAsArrayBuffer()`	读取为 ArrayBuffer，适合二进制
`readAsText()`	读取为字符串
`readAsDataURL()`	读取为 Base64 编码

常用属性

readyState: 当前读取状态
result: 读取完成后的数据（异步获取）

示例：读取 Blob 并输出文本

let blob = new Blob(["Hello World!"], { type: "text/plain" });
blob = blob.slice(0, 5, "text/plain");

const fileReader = new FileReader();
fileReader.readAsText(blob);
fileReader.onload = function() {
  console.log(fileReader.result); // Hello
};

ObjectURL

ObjectURL 用于为 Blob 或 File 对象生成一个临时 URL，可直接在 <img>、<a>、iframe 等标签中使用

示例：文件选择并预览

const input = document.getElementById("input");
const image = document.getElementById("image");

input.onchange = (event) => {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  image.src = url;
};