# Blob
Blob 的全称为：binary larget object（二进制大对象），blob 的本质是一个 js 对象，里面可以存储大量的二进制编码的数据。
# 特点：
- 不可修改
- 只能使用 FileReader 读取内容
- 存储大量二进制数据的 js 对象
# 使用：
new Blob(array,options)
array 是由 ArrayBuffer、ArrayBufferView、Blob 和 DOMString 对象构成的，将对被放进 blob 中
options 配置项有：
type：默认值为：” “，表示将会被放入到 blob 中的数组内容的 MIME 类型。
endings：默认值为：”transparent“，用于指定包含行结束符 \n 的字符串如何被写入，不常用。
MIME 类型 描述 text/plain 纯文本文档 text/html HTML 文档 text/javascript JavaScript 文档 text/css CSS 文件 application/json JSON 文件 application/pdf pdf 文件 application/xml XML 文件 image/jpeg JPEG 文件 image/png PNG 文件 image/gif GIF 文件 image/svg+xml SVG+XML 文件 audio/mpeg MP3 文件 video/mpeg MP4 文件
let blob = new Blob(['hello world'],{type:"text/plain"}); |
# 分片：
Blob 对象内置了 slice () 方法用来将 blob 对象分片
其有三个参数：
start：设置切片的起点，即切片开始位置。默认值为 0，这意味着切片应该从第一个字节开始；
end：设置切片的结束点，会对该位置之前的数据进行切片。默认值为 blob.size；
contentType：设置新 blob 的 MIME 类型。如果省略 type，则默认为 blob 的原始值。
let blob = new Blob(['hello world'],{type:"text/plain"}); | |
let blob1 = blob.slice(0,2,"text/plain"); |
# 读取：
blob 对象只能通过 FileReader 读取内容。
let blob = new Blob(['hello world'],{type:"text/plain"}); | |
let reader = new fileReader(); | |
reader.readAsText(blob); | |
console.log(reader.result); |
# File
# 介绍：
File 对象是特殊的 Blob 对象。是基于 Blob 对象的进一步封装，js 中主要有两种方式获得 FIle 对象：
- input 元素选择后返回的 FileList 对象（通过 change 事件的 event.target.files 获取）
- 文件拖放操作生成的 DataTransfer 对象（通过 ondrop 事件的 event.dataTransfer.files 获取）
# FileReader
# 介绍：
FileReader 用于读取 Blob 对象（包含 File 对象）内容的方法，通过 result 属性获取。
readAsArrayBuffer 方法：读取为 ArrayBuffer
readAsDataURL 方法：读取为 data:URL 的 Base64 字符串表示文件内容
readAsText 方法：读取为原始 text 文件内容
readAsBinaryString 方法：读取为原始二进制数据
但是直接使用此方法还是会得到原始的文本内容，因为二进制数据需要使用 ArrayBuffer 对象来进行处理。
# ArrayBuffer
# 介绍：
ArrayBuffer 可以理解为一个特殊的数组，其本身是一个黑盒，不能直接读写所存储的数据，需要借助视图对象来读写。它只是一个用于存储二进制数据的缓冲区，创建时只能传一个空间大小 biteLength。
读写 ArrayBuffer 的方式：
- TypedArray
- DataView
- TextDecoder
- 用 Blob 存储，然后用 FileReader 读写
# 方法：
ArrayBuffer 提供了一个 slice 方法用于切片。参数为：开始位置，结束位置和解析类型。
# 使用：
const buffer = new ArrayBuffer(32); | |
buffer.slice(0,4,'text/plain'); |
# TypedArray
TypedArray 只是一个概念，提供了一种机制来解读 ArrayBuffer 中的数据（相当于一个视图，将 ArrayBuffer 中的数据进行展示和操作），实际上是那九个类型对象（每个类型对应一个特定的数据类型和大小）：
Int8Array：8 位有符号整数Uint8Array：8 位无符号整数Int16Array：16 位有符号整数Uint16Array：16 位无符号整数Int32Array：32 位有符号整数Uint32Array：32 位无符号整数Float32Array：32 位浮点数Float64Array：64 位浮点数
# 使用：
const buffer = new ArrayBuffer(32); | |
const slice = buffer.slice(0,4,'text/plain'); | |
const sliceView = new Int8Array(slice); | |
sliceView.set([10,20,30]); | |
sliceView.forEach((value,index)=>{ | |
console.log(value,index); | |
}) |
# DataView
# 读取：
DataView 数据视图可以用于读写 buffer,DataView 实例提供了许多方法来读取内存，他们呢的参数都是一个字节序号。表示开始读取的字节位置：
- getInt8：读取 1 个字节，返回一个 8 位整数
- getUint8：读取 1 个字节，返回一个无符号 8 位整数
- getInt16：读取 2 个字节，返回一个 16 位整数
- getUnit16：读取 2 个字节，返回一个无符号 16 位整数
- getInt32：读取 4 个字节，返回一个 32 位整数
- getUnit32：读取 4 个字节，返回一个无符号 32 位整数
- getFloat32：读取 4 个字节，返回一个 32 位浮点数
- getUnit64：读取 8 个字节，返回一个 64 位浮点数
# 写入：
DataView 实例提供以下方法写入内存，他们都接受两个参数，第一个参数表示开始写入数据的字节序号，第二个参数为写入的数据：
- setInt8：写入 1 个字节的 8 位整数
- setUint8：写入 1 个字节的 8 位无符号整数
- setInt16：写入 2 个字节的 16 位整数
- setUint16：写入 2 个字节的 16 位无符号整数
- setInt32：写入 4 个字节的 32 位整数
- setUnit32：写入 4 个字节的 32 位无符号整数
- setFloat32：写入 4 个字节的 32 位浮点数
- setFloat64：写入 8 个自己的 64 位浮点数
# Object URL
Object URL 是一个用于表示 File Object 或者 Blob Object 的 URL，可以将 **Blob 对象（包括 File 对象）** 变为一个 URL 地址。
# 使用：
使用 URL.createObjectURL 来创建。
const blob = new Blob(['你好世界'],{type:'text/plain'}); | |
const newUrl = URL.createObjectURL(blob); |
# base64 编码
# 介绍：
base64 是一个保存二进制数据的工具，将多种形式的二进制数据或其构成的文件以 ASCII 的形式保存，因为很多地方不支持直接的二进制文件保存或呈现，比如可以将图片直接转换成 base64 码嵌入 HTML 文档中，而避免使用网络 http 加载图片。另外，将数据编码为 base64 进行传输，然后解码获得数据，可以一定程度上保证数据的完整并且不用在传输过程中修改这些数据，避免在传输过程中可能出现的问题；
# 组成：
A-Z a-z 0-9 + / 共 64 个字符组成；
# 使用：
JS 中有两个函数用于 base64 格式（ASCII 码）的转换:
btoa ()：编码（Binary To ASCII 二进制转 ASCII）
该函数用于将二进制转为 Base64 字符串（ASCII 码）
atob ()：解码（ASCII To Binary ASCII 码转二进制）
该函数用于将 Base64 字符串（ASCII 码）解码为二进制
# 注意：
btoa 和 atob 方法有个弊端就是只能处理拉丁字符集内的字符，其不包括中文或非西欧语言的字符（只能处理单字节字符）。要处理多字节字符需要使用 TextEncoder API 将字符串转为 Uint8Array，然后手动将这些字节转为一个字符串（String.fromCharCode）。
# TextEncoder
# 介绍：
TextEncoder 构造函数创建一个编码器，encode 方法用于将字符串编码为一个 UTF-8 编码文本的 Uint8Array 视图。
# 使用：
const encoder = new TextEncoder(); | |
const view = encoder.encode("$"); | |
console.log(view) |
