js中arraybuffer与blob的区别

2019年04月17日Web前端

当接触过前端中二进制后,arraybuffer和blob是经常会遇到的,而且经常会搞混,那么这两者之间有啥区别,又有啥联系呢?

ArrayBuffer

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer是不可以直接操作的,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容,详细的可以查看这篇文章:前端二进制学习(三)

var buffer = new ArrayBuffer(8);
console.log(buffer.byteLength);   // 输出字节

new ArrayBuffer时,传入的参数表示要创建的字节数。

blob

blob(binary large object),他表示一个不可变、原始数据的类文件对象,在我的这篇前端二进制学习(一)文章中有详细的介绍。

blob和arraybuffer一样,是二进制的容器,直接new Blob就可以创建了:

new Blob([123]);

blob类型只有slice方法,用于返回一个新的 Blob对象,包含了源 Blob对象中指定范围内的数据。 对比发现,ArrayBuffer的数据,是可以按照字节去操作的,而Blob的只能作为一个整的对象去处理。所以说,ArrayBuffer相比Blob更接近真实的二进制,更底层。

ArrayBuffer与Blob互转

ArrayBuffer转Blob

arraybuffer转blob很方便,作为参数传入就行了。

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

Blob转ArrayBuffer

此处需要借助fileReader对象了,

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

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

控制台输出的则是ArrayBuffer的数据了。

ajax获取

很多时候,往往需要前端向后端请求二进制数据,我们来对比下这两者在ajax获取中会有区别么?

先弄张图片作为二进制来源,使用node的fs模块就行了,

let file = fs.readFileSync('test.jpg');

获取arraybuffer的发送/arraybuffer请求,获取blob的发送/blob请求,

if ('/arraybuffer' === req.url || '/blob' === req.url) {
    res.write(file);
    res.end();
}

前端方面,利用原生的XMLHttpRequest发送请求,并设置responseType就行了,

xhr.responseType = 'arraybuffer';
xhr.responseType = 'blob';

详细的demo见:js中arraybuffer与blob的区别

后端都是返回的二进制信息,而到了前端由于设置了type,浏览器自动转化了类型,打印除了不同的结果。

总结

ArrayBuffer和Blob一样,都是二进制数据的容器,而ArrayBuffer相比更为底层,他可以去操作去修改这些二进制值,这两者之间也是可以互转的。