DAY14 - 档案类的物件关系厘清(3) - ArrayBuffer

ArrayBuffer

ArrayBuffer (又称byte-array) 就是一段固定大小的记忆体区块，储存二进位制资料的一段记忆体，是一个个 0/1 组成的串，表示原始二进位制资料缓冲区。所有javaScript引擎内部皆会产生ArrayBuffer。
Ex. buff = new ArrayBuffer(1024) 表示建立的一块1KB的记忆空间。

和Blob一样，是用来储存二进位资料的一种资料格式，可以用来储存各种档案内容，例如 jpg,txt...等，任何你想得到的，都可以用 ArrayBuffer存。那你可能会想，既然和Blob一样，又为什麽要转换成ArrayBuffer呢？後面会再跟大家分享～

特性

ArrayBuffer物件不能直接读写(不能直接操作这个记忆体)，只能通过检视(view):TypedArray 和 DataView 来读写。

TypedArray

TypedArray就是为了操作binary data而生。所谓Type指的是「特定的型别」EX: Int8Array, Float32Array

DataView

能用多种不同的型别对 ArrayBuffer 进行修改、解读。Ex:可以指定要从哪个字节开始以及长度

const buffer = new ArrayBuffer(32)
const view = new DataView(buffer, 8, 10) //从8开始，10个长度

DataView 是视图，并不会存放资料，所有的资料皆实际存於ArrayBuffer 物件当中

为什麽有ArrayBuffer

在js中，有些时候会有取得或需处理档案资料的时候，Ex.从XHR拿到一个blob的档案资料、从File API上传一个图档取得file Object、或是从Canvas取得。但档案转换的blob通常会是一大串byte stream。如果用js中的array存取，浪费资源又效率低，因此为了提升js对於二进位的处理能力，便有了arrayBuffer

Blob vs ArrayBuffer

除非需要编辑或读写，不然在档案处理时使用Blob是最佳解

• 编辑读写请使用 ArrayBuffer

参考资料

• https://www.zhihu.com/question/30401979
• https://stackoverflow.com/questions/11821096/what-is-the-difference-between-an-arraybuffer-and-a-blob/39951543
• https://yahone-chow.medium.com/arraybuffer-279733d7aa51
• https://www.puritys.me/docs-blog/article-294-Javascript-%E8%99%95%E7%90%86-Binary-%E8%B3%87%E6%96%99---ArrayBuffer.html
• https://codertw.com/%e5%89%8d%e7%ab%af%e9%96%8b%e7%99%bc/282041/ (JavaScript中的ArrayBuffer详细介绍)