认识Js中的二进制数据

Blob

在项目中涉及到要对html原生的audio组件进行样式复写，所以须要从新实现audio的一些功能，好比下载。实现一个下载大体的思路是服务端返回一段音频的二进制数据，客户端将其存放在Blob中，再经过URL.createObjectURL将其转换成blob url，最后动态建立a标签，添加download属性，模拟点击事件来实现下载。代码比较简单，咱们重点来看看Blob是何方神圣。

const saveExcelFile = (blob, filename) => {
    if (window.navigator.msSaveOrOpenBlob) {
      // iE下使用msSaveBlob进行导出
      navigator.msSaveBlob(blob, filename)
    } else {
      var href = window.URL.createObjectURL(blob)

      var save_link = document.createElementNS(
        'http://www.w3.org/1999/xhtml',
        'a'
      )
      save_link.href = href
      save_link.download = filename

      // 解决火狐兼容问题
      document.body.appendChild(save_link)

      var event = document.createEvent('MouseEvents')
      event.initMouseEvent(
        'click',
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      )
      save_link.dispatchEvent(event)

      document.body.removeChild(save_link)
      // 释放blob url，可被GC回收
      window.URL.revokeObjectURL(href)
    }
}

根据MDN的介绍，咱们能够知道Blob类型的对象是相似文件对象的二进制数据，它是immutable的，即数据不可变。而HTML5的File对象继承于Blob对象，并在其基础上作了些扩展，从而具有了在操做系统上操做文件的能力。咱们能够利用Blob去作一些下载文件、分片上传等功能。熟悉ES6的小伙伴应该知道，ES6中有一个ArrayBuffer对象，也是用来存储二进制数据的，那它和Blob有什么区别呢？

ArrayBuffer

根据一些资料，ArrayBuffer设计的目的与WebGL项目有关，为了知足JS与显卡或声卡等操做系统原生接口大量的、实时的数据交换。传统的文本格式是传递一个32位的整数，这致使JS与原生接口须要频繁的转换数据格式，效率较低，所以设计了ArrayBuffer用于存储、操做二进制数据。
ArrayBuffer并非真正的Array，而是个类数组对象。咱们经过new ArrayBuffer(length)建立的ArrayBuffer的实例，仅仅表明开辟了一段连续的内存空间，length表明内存所占的字节大小。若须要对内存中的字节进行操做，则须要建立“视图”。视图分为两种：TypedArray和DataView，用于以指定的格式来读写二进制的数据。它们的区别在于：

• TypedArray以指定的格式读写内存，例如：const v1 = new Int32Array(buffer)就是以32位有符号整型来建立视图，此时经过v1[0]去读或是去写都是以该格式进行的
• 如果想以不一样数据格式去读取内存的话，须要使用DataView。当咱们执行const dv = new DataView(buffer)后，能够经过相似dv.getUint8(0)这样的方式，以8位无符号整型读取第一个字节；或是以dv.setInt32(1, 25)这种方式，在第二个字节写入值为25的32位有符号整型数据

注意：对于同一段内存建立的视图都是共享该内存的，在一个视图上进行的操做会影响另外一个视图的读写。具体的可参考阮老师的教程

区别

• ArrayBuffer能够对字节进行读写，而Blob是immutable的
• ArrayBuffer存储在内存当中，Blob能够存储在磁盘或者内存中。例如文件，咱们平时是存在磁盘中的。而像咱们上面下载的例子中，咱们的blob是在内存中的，所以在createObjectURL以后须要手动调用revokeObjectURL解除对内存的引用，使得blob能够被GC回收，释放内存。
• ArrayBuffer能够经过“视图”来进行读写，而Blob能够经过FileReader去读，可是不能写
• Blob和ArrayBuffer能够互相转换。Blob转ArrayBuffer能够经过：
  javascript const reader = new FileReader() reader.onload = function() { console.log(reader.result) } reader.readAsArrayBuffer(blob)
  ArrayBuffer转Blob能够经过：
  javascript const blob = new Blob([ArrayBuffer]) 所以，当咱们须要对字节进行操做的时候，咱们应该选用ArrayBuffer，不然，咱们用Blob会更加容易。