js中arraybuffer与blob的区别

2019年04月17日Web前端0

当接触过前端中二进制后，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相比更为底层，他可以去操作去修改这些二进制值，这两者之间也是可以互转的。

前端二进制

目录