前言

在前端的日常开发中很少用到，碰上是基本上google一下 然后ctrl+c，ctrl+v. 一直缺少一个比较体系的了解，这篇文章打算从头开始理一下这几个是什么，彼此的关系

Blob

总结一句就是一个用来储存类大文件的的对象

const blob = new Blob(['xxxxxx'], { type: 'text/plian' })

Arraybuffer

用来获取一段固定大小的内存，但是对这段内存的操作就需要类型数组对象或者DataView

const buffer = new ArrayBuffer(2);
const view = new Uint8Array(buffer);
view[0] = 104;
view[1] = 105;
// hi
String.fromCharCode(...view);

File

file 接口基于Blob的， 主要是<input type="file"/> 获取这个对象 一般我们对它的子类FileReder使用的比较多，还有就是 通过URL.createObjectURL(file)来获取一段blob url (blob:[http://domain]:uuid)

URL.createObjectURL(new Blob(['xx']))
"blob:https://juejin.im/2a178305-8b40-497d-b7a2-2499a6c40560"

之间的转换

Blob ---> ArrayBuffer

const blob= new Blob(['hi']);
blob.arrayBffer().then((buffer)=> {
	console.log(buffer);
})

ArrayBuffer ---> Blob

const str = 'hello';
const buffer = new ArrayBuffer(str.length);
const view = new Unit8Array(buffer);
[...str].forEach((s, idnex)=> {
    view[index] = s.charCodeAt(0);
})

const blob = new Blob([view], { type: 'text/palin' })

File ---> ArrayBuffer

const reader = new FileReader();
reader.onload = (e) => {
	// e.target.result
}
reader.readAsArrayBuffer();

待补充....