二进制数据

简介

在计算机中，所有的数据最终都以二进制形式表示和处理，但并不是所有数据都被称为二进制数据。

二进制数据通常指的是直接由二进制位（0 和 1）组成的数据，

有些数据在计算机中以其他形式存在，但最终仍会被转换为二进制形式进行处理。例如，整数、浮点数、字符等数据类型在内存中以特定的格式表示，但在进行计算或存储时会被转换为二进制形式。这些数据不直接称为二进制数据。

前端怎么处理二进制数据？

历史上，JavaScript 无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt()方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理。

这两种方法不仅速度慢，而且容易出错。ECMAScript 5 引入了 Blob 对象，允许直接操作二进制数据。

Blob

Blob 的全称是 Binary Large Object （二进制大型对象）， Blob 对象表示一个二进制文件的数据内容，比如一个图片文件的内容就可以通过 Blob 对象读写。它通常用来读写文件。

它与 ArrayBuffer 的区别在于，它用于操作二进制文件，而 ArrayBuffer 用于操作内存。

浏览器原生提供 Blob()构造函数，用来生成实例对象。

const blob = new Blob(array [, options])

blob.size
blob.type // 'text/plain', 'text/html', 'application/json', ...

一般来说，有这么几个处理 Blob 的上下文: FileReader, URL.createObjectURL()

1️⃣ URL.createObjectURL

使用 URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL，这个 URL 以 blob:// 开头，以便于某些 API 使用。

Blob URL 可以当作普通 URL，作为 img.src = url 的属性，也可以通过 window.open(url) 打开。

浏览器在 document 卸载的时候，会自动释放它们；如果为了获得最佳性能和内存使用状况，可以使用 URL.revokeObjectURL() 主动释放掉它们。

2️⃣ FileReader

FileReader 对象，通过异步的方式读取 Blob 对象的内容，即文件内容。

FileReader 对象提供四个方法。Blob 对象作为参数传入这些方法，然后以指定的格式返回。

FileReader.readAsText()：返回文本，需要指定文本编码，默认为 UTF-8。
FileReader.readAsArrayBuffer()：返回 ArrayBuffer 对象。
FileReader.readAsDataURL()：返回 Data URL。
FileReader.readAsBinaryString()：返回原始的二进制字符串。

一段 readAsText 的示例

function readfile(f) {
  const reader = new FileReader()
  reader.readAsText(f)

  reader.onload = function () {
    var text = reader.result
    var out = document.getElementById('output')
    out.innerHTML = ''
    out.appendChild(document.createTextNode(text))
  }

  reader.onerror = function (e) {
    console.log('Error', e)
  }
}

3️⃣ FileReader 与 window.URL.createObjectURL 区别

createObjectURL 是同步的；FileReader 是异步的。
createObjectURL 返回带哈希的 url，并将对象存储在内存中，直到 document 卸载或执行 revokeObjectURL； FileReader 返回 base64 格式字符串，能发送到其他地方，如 localStorage，而 createObjectURL 不行。

File

File 实例对象是一个特殊的 Blob 实例，增加了 name 和 lastModifiedDate 属性。

可以用在任意的 Blob 类型的上下文中，如 FileReader, URL.createObjectURL()

// <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/>

function fileinfo(files) {
  for (var i = 0; i < files.length; i++) {
    var f = files[i]
    console.log(
      f.name, // 文件名，不含路径
      f.size, // 文件大小，Blob 实例属性
      f.type, // 文件类型，Blob 实例属性
      f.lastModifiedDate, // 文件的最后修改时间
    )
  }
}

ArrayBuffer

ArrayBuffer 对象表示一段二进制数据，用来模拟内存里面的数据。通过这个对象，JavaScript 可以读写二进制数据。

一般来说，前端开发用不到这个属性。

简介​

Blob​

1️⃣ URL.createObjectURL​

2️⃣ FileReader​

3️⃣ FileReader 与 window.URL.createObjectURL 区别​

File​

ArrayBuffer​

来源​

简介