ArrayBuffer 与 Blob 对象

ArrayBuffer 对象

ArrayBuffer 这个构造函数，虽然名字上带有一个Array，但是它创建的对象并不是数组，不是数组，不是数组。ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区，用来模拟内存里的数据。

通用的、固定长度的原始二进制数据缓冲区
通用的、固定长度的原始二进制数据缓冲区
通用的、固定长度的原始二进制数据缓冲区

注意两个关键词：通用的，固定长度的。
固定长度，是初始化之后，这个对象的长度就不可变了，不像数组一样，还可以 push、 pop 等，从这一点看，ArrayBuffer 对象也不是数组。
另一方面，通用的则和 ArrayBuffer 对象自身的一个重要特点相关，即 ArrayBuffer 对象只能被读取的，也就是说它没有读和写的操作能力。如果要对其进行读写操作，则需要借助视图对象：TypedArray 和 Data View。

// 初始化一个 ArrayBuffer 对象, 固定长度为 8 个字节
var buffer = new ArrayBuffer(8);
console.log(buffer.byteLength); 

// 创建一个无符号8位视图，每 8 位长度视作一个固定整数
const view = new Uint8Array(buffer);
// 创建一个无符号16位视图，每 16 位长度视作一个固定整数
new Uint16Array(buffer);
/* 注意：Uint8Array 和 Uint16Array 的区别 */

// 通过视图赋值
view[0] = 1;
view[1] = 2; 

关于 TypedArray 和 Data View ，也有不少的事情要说，所以以后单独聊。

Blob 对象

Blob 对象，blob(binary large object)，它表示一个不可变、原始数据的类文件对象。是二进制的容器，它所代表的是二进制文件的数据内容，如：图片、音频、视频等
Blob 对象的常见作用
1.生成一个临时的 Blob URL,供给浏览器使用（如：下载或展示）
2.分片资源
3.本地读取文件

// 生成一个临时的 Blob URl
const url = window.URL.createObjectURL(file);
// 释放前一个通过调用 URL.createObjectURL创建的 URL 对象
URL.revokeObjectURL(url);

// 拷贝一段文件内容，实现资源分片
let start=0;let end=1024;
var blob = this.files[0].slice(start, end));


/*
如果想要读取 Blob 或者文件对象并转化为其他格式的数据，可以借助FileReader对象的API进行操作
// 本地读取文件内容
FileReader.readAsText(Blob)：将Blob转化为文本字符串
FileReader.readAsArrayBuffer(Blob)： 将Blob转为ArrayBuffer格式数据
FileReader.readAsDataURL(): 将Blob转化为Base64格式的Data URL
*/

ArrayBuffer 与 Blob

ArrayBuffer 转 Blob 示例

var buffer = new ArrayBuffer(16);
var blob = new Blob([buffer]);

Blob 转 ArrayBuffer 示例
Blob 转 ArrayBuffer 需借助 FileReader 对象，或者 Blob 实例的 arrayBuffer() 方法

var blob = new Blob([1,2,3,4,5]);

// 1. 借助 FileReader 对象
var reader = new FileReader();
reader.readAsArrayBuffer(blob);

reader.onload = function() {
    console.log(this.result);
}

// 2.借助 Blob 实例的 arrayBuffer() 方法
var bf = awati blob.arrayBuffer()