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相比更为底层,他可以去操作去修改这些二进制值,这两者之间也是可以互转的。