A-A+

我们来谈谈JS中的两种类型:ArrayBuffer和Blob

2020年02月19日 javascript, 前端基础 暂无评论

在几个月前,开发码味的时候,遇到一个需求:

点击一个按钮,发送参数请求到后端,后端拿参数去微信服务器请求回二维码,然后再转给前端,前端根据后端的返回把二维码下载下来

在开发过程中遇到了一个问题,就是后端返回的是readableStream数据流,前端需要把数据流处理了才能下载下来。特此记录一下。

一、什么是ArrayBuffer

ArrayBuffer对象表示内存中一段原始的二进制数据容器(缓冲区),具体介绍我们看看阮一峰老师怎么说

  1. 数组里面可以放数字、字符串、布尔值以及对象和数组等,ArrayBuffer放0和1组成的二进制数据;
  2. 数组放在堆中,ArrayBuffer则把数据放在栈中(所以取数据时后者快);
  3. ArrayBuffer初始化后固定大小,数组则可以自由增减。(准确的说,视图才应该跟数组来比较这个特点)

二、什么Blob

Blob(binary large object),二进制类文件大对象,是一个可以存储二进制文件的“容器”,HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型。File接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

Blob可以通过构造函数来创造出来:

Blob构造函数接受两个参数,第一个参数是一个包含实际数据的数组,第二个参数是数据的MIME类型。

  • Blob.size blob对象的数据大小
  • Blob.type 表示blob对象所包含数据的MIME类型。如果实例化时未指明类型,则该值为空字符串。

三、两者有什么异同?

  1. Blob和ArrayBuffer都能存储二进制数据。Blob相对而言储存的二进制数据大(如File文件对象)。
  2. ArrayBuffer对象表示原始的二进制数据缓冲区,即在内存中分配指定大小的二进制缓冲区(容器),用于存储各种类型化数组的数据,是最基础的原始数据容器,无法直接读取或写入, 需要通过具体视图来读取或写入,即TypedArray对象或DataView对象对内存大小进行读取或写入;Blob对象表示一个不可变、原始数据的类文件对象。
  3. ArrayBuffer是原始的二进制数据缓冲区,不能设置MIME类型;Blob可以储存大量的二进制编码格式的数据,可以设置对象的MIME类型。
  4. 两者可以互换

四、两者间的互换

  1. Blob==>ArrayBuffer

  1. ArrayBuffer==>Blob

实际问题解决

回到我们的需求中来。由于后端返回的是一个数据流,那么我们前端就要对这个数据流进行处理。我们有几个关键点要处理:

  1. 请求头里加上:responseType: 'arryBuffer';
  2. 不能确保拿到arryBuffer,转换一下:.then(response => response.arrayBuffer())
  3. 再转blob来保存。

保存函数如下:

至此,就解决了点击按钮下载数据流二维码的问题。

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录