随便写写之js的二进制处理
前言
在JavaScript中，无论是前端还是后端都有很多与二进制相关的概念，例如 Buffer， ArrayBuffer， Blob， Stream 等等。那么这些概念彼此之间的关系是什么？各自的使用场景是什么？
- Blob: 用于前端的一个专门支持文件操作的二进制对象
- ArrayBuffer：前端的一个通用的二进制缓冲区，类似数组
- Buffer：Node.js中提供的一个二进制缓冲区，常用来处理I/O操作
- Stream：在Node.js中用于顺序的数据处理，比如文件读写、网络数据传输、端到端的数据交换等
Blob
Blob是用来支持文件操作的。简单的说：在JS中，有两个构造函数 File 和 Blob, 而File继承了所有Blob的属性。所以在我们看来， File对象可以看作一种特殊的Blob对象。在前端工程中，我们可以通过以下操作获得File对象：
<input/>标签中选择文件- 拖拽生成的
DataTransfer对象
File对象既然是一种特殊的 Blob，那么就可以直接调用Blob对象的方法。Blob具体方法如下：
1. 文件下载
通过window.URL.createObjectURL方法可以把一个blob转化为一个 Blob URL，并且用做文件下载或者图片显示的链接。如下例子中生成了一个 Blob URL 的例子： blob:null/e3eba36d-a3d9-4d10-8cce-c452ae47d58b，可以和冗长的Base64格式的 Data URL 相比， Blob URL 的长度显然不能够存储足够的信息，这也就意味着它只是类似于一个浏览器内部的“引用“,指向了内存中真实缓存的文件。
1<a id="content">点此进行下载</a>
2
3<script>
4 const blob = new Blob(["Hello World"]);
5 const url = window.URL.createObjectURL(blob);
6 console.log(url) // blob:null/e3eba36d-a3d9-4d10-8cce-c452ae47d58b
7 let a = document.getElementById("content");
8 a.download = "helloworld.txt";
9 a.href = url;
10</script>
11
(需要注意的是：download属性不兼容IE, 对IE可通过window.navigator.msSaveBlob方法或其他进行优化)
2. Blob实现图片本地显示
window.URL.createObjectURL生成的 Blob URL 还可以赋给 img.src，从而实现图片的显示:
1<input type="file" id='file' />
2<img id='img' style="width: 200px;height:200px;" />
3
4<script>
5 document.getElementById('file').addEventListener('change', function (e) {
6 const file = this.files[0];
7 const img = document.getElementById('img');
8 const url = window.URL.createObjectURL(file);
9 img.src = url;
10 img.onload = function () {
11 // 释放一个之前通过调用 URL.createObjectURL创建的 URL 对象
12 window.URL.revokeObjectURL(url);
13 }
14 }, false);
15</script>
16
3. Blob实现文件分片上传
- 通过Blob.slice(start,end)可以分割大 Blob 为多个小 Blob
- xhr.send是可以直接发送Blob对象的
如下例子所示，我们本地上传一个文本文件，在前端设置切割限制大小为 20 字节，最后会在 node 端批量打印文本内容。
前端代码如下：
1<input type="file" id='file' />
2
3<script>
4function upload(blob) {
5 const xhr = new XMLHttpRequest();
6 xhr.open('POST', '/ajax', true);
7 xhr.setRequestHeader('Content-Type', 'text/plain')
8 xhr.send(blob);
9}
10
11document.getElementById('file').addEventListener('change', function (e) {
12 cont blob = this.files[0];
13 const CHUNK_SIZE = 20; .
14 const SIZE = blob.size;
15 let start = 0;
16 let end = CHUNK_SIZE;
17 while (start < SIZE) {
18 upload(blob.slice(start, end));
19 start = end;
20 end = start + CHUNK_SIZE;
21 }
22}, false);
23</script>
24
Node端（koa）代码如下：
1app.use(async (ctx, next) => {
2 await next();
3 if (ctx.path === '/ajax') {
4 const req = ctx.req;
5 const body = await parse(req);
6 ctx.status = 200;
7 console.log(body);
8 }
9});
10
4. 本地读取文件内容
如果想要读取 Blob 或者 File 并转化为其他格式的数据，可以借助FileReader对象的API进行操作:
- FileReader.readAsText(Blob) ：将Blob转化为文本字符串
- FileReader.readAsArrayBuffer(Blob) ： 将Blob转为ArrayBuffer格式数据
- FileReader.readAsDataURL() : 将Blob转化为Base64格式的Data URL
下面我们尝试把一个文件的内容通过字符串的方式读取出来
1<input type="file" id='file' />
2<script>
3 document.getElementById('file').addEventListener('change', function (e) {
4 const file = this.files[0];
5 const reader = new FileReader();
6 reader.onload = function () {
7 const content = reader.result;
8 console.log(content);
9 }
10 reader.readAsText(file);
11 }, false);
12</script>
13
ArrayBuffer
Blob是针对文件的，或者可以说它就是一个文件对象。但是Blob欠缺对二进制数据的细节操作能力，如果要具体修改某一部分的二进制数据，Blob显然就不够用了，而这种细粒度的功能则可以由下面介绍的 ArrayBuffer 来完成。
ArrayBuffer的主要功能如下：
- 读取：通过
FileReader方法（FileReader.readAsArrayBuffer(Blob)）将文件转化为ArrayBuffer格式数据： - 写入：通过
TypeArray和DataView对ArrayBuffer 进行写操作
这里需要区分一下 ArrayBuffer 和 Array:
ArrayBuffer初始化后大小是固定的；Array可以自由增减；ArrayBuffer数据在栈中；Array数据在堆中；ArrayBuffer没有push/pop 等数组操作方法的；ArrayBuffer只能读不能写，如果要写只能通过TypeArray和DataView实现。
1. 可以通过ArrayBuffer的格式读取本地数据：
1document.getElementById('file').addEventListener('change', function (e) {
2 const file = this.files[0];
3 const fileReader = new FileReader();
4 fileReader.onload = function () {
5 const result = fileReader.result;
6 console.log(result)
7 }
8 fileReader.readAsArrayBuffer(file);
9}, false);
10
2.可以通过ArrayBuffer的格式读取Ajax请求数据
- 通过xhr.responseType = "arraybuffer" 指定响应数据类型
- 在onload回调里打印 xhr.response
前端
1const xhr = new XMLHttpRequest();
2xhr.open("GET", "ajax", true);
3xhr.responseType = "arraybuffer";
4xhr.onload = function () {
5 console.log(xhr.response)
6}
7xhr.send();
8
Node端
1const app = new Koa();
2app.use(async (ctx) => {
3 if (pathname = '/ajax') {
4 ctx.body = 'hello world';
5 ctx.status = 200;
6 }
7}).listen(3000)
8
3.可以通过TypeArray对ArrayBuffer进行写操作
1const typedArray1 = new Int8Array(8);
2typedArray1[0] = 100;
3
4const typedArray2 = new Int8Array(typedArray1);
5typedArray2[1] = 200;
6
7console.log(typedArray1);
8// output: Int8Array [100, 0, 0, 0, 0, 0, 0, 0]
9
10console.log(typedArray2);
11// output: Int8Array [200, 42, 0, 0, 0, 0, 0, 0]
12
4.可以通过DataView对ArrayBuffer进行写操作
1const buffer = new ArrayBuffer(16);
2const view = new DataView(buffer);
3view.setInt8(2, 100);
4
5console.log(view.getInt8(2));
6// 输出: 100
7
Buffer
Buffer 是Node.js提供的对象，前端是没有的。它一般应用于IO操作，例如接收前端请求数据时候，可以通过Buffer的API对接收到的前端数据进行整合
前端
1const xhr = new XMLHttpRequest();
2xhr.open("POST", "ajax", true);
3xhr.setRequestHeader('Content-Type', 'text/plain')
4xhr.send("hello world");
5
Node端（Koa）
1const app = new Koa();
2app.use(async (ctx, next) => {
3 if (ctx.path === '/ajax') {
4 const chunks = [];
5 const req = ctx.req;
6 req.on('data', buf => {
7 chunks.push(buf);
8 })
9 req.on('end', () => {
10 let buffer = Buffer.concat(chunks);
11 console.log(buffer.toString())
12 })
13 }
14});
15app.listen(3000)
16
运行结果
1// Node端输出
2hello world
3
Stream
流（stream）在 Node.js 中是处理流数据的抽象接口（abstract interface）。 我们需要 Node.js 中的流来处理和操作流数据，例如视频、大文件等。Node.js 中的 stream 模块用于管理所有流。流是一个抽象接口，用于与 Node.js 中的流数据一起工作。Node.js 提供了许多流对象。例如 HTTP请求 和 process.stdout 就都是流的实例。流可以是可读的、可写的，或是可读写的。所有的流都是 EventEmitter 的实例。
流在处理数据时与传统方式有所不同， 它不是把数据作为一个整体进行处理(传统方式)，而是把数据分割成一块一块的进行处理。文件读取时，流并不是把文件的所有内容都读取到内存中，而是只读取一块数据，等待这块数据处理完毕，比如把这块数据写入到另外一个文件中，再读取另一块数据，循环往复，直到文件读取完毕。 读取一块数据，处理一块数据，流不会让数据一直在内存中，因此使用流处理数据，可以高效的使用内存，更有可能来处理大文件。
以网络数据传输（网上看视频）为例，并不是把整个电影都从服务器上下载下来才开始播放，而是一块一块地下载，下载一块，播放一块。服务器一块一块地写数据，浏览器一块一块的读数据。用流处理数据，时间上也比较高效。
Node.js 中有四种基本的流类型：
- Writable：可以写入数据的流（例如，fs.createWriteStream()）
- Readable：可以从中读取数据的流（例如fs.createReadStream()）
- Duplex：既是Writable又是Readable 的流（例如，net.Socket）
- Transform：Duplex可以在写入和读取数据时修改或转换数据的流（例如，zlib.createDeflate()）
1import { createReadStream, createWriteStream } from 'fs'
2const [,, src, dest] = process.argv
3
4// 创建源流
5const srcStream = createReadStream(src)
6
7// 创建目标流
8const destStream = createWriteStream(dest)
9
10// 当源流上有数据时，将其写入目标流
11srcStream.on('data', (chunk) => destStream.write(chunk))
12
本质上，我们用 createReadStream 和 createWriteStream 替换 readFile 和 writeFile。然后使用它们创建两个流实例 srcStream 和 destStream。这些对象分别是一个 ReadableStream（输入） 和一个 WritableStream（输出） 的实例。
他们不会一次性读取所有数据。数据以块、小部分数据的形式读取。一旦块通过 data 事件可用，我们就知道源流中有新的数据块可用，立即将其写入目标流。这样，我们就不必将所有文件内容保存在内存中。
1. 可读流
1const fs = require('fs');
2
3const readableStream = fs.createReadStream('./article.md', {
4 highWaterMark: 10
5});
6
7readableStream.on('readable', () => {
8 process.stdout.write(`[${readableStream.read()}]`);
9});
10
11readableStream.on('end', () => {
12 console.log('DONE');
13});
14
2. 可写流
1const fs = require('fs');
2const file = fs.createWriteStream('file.txt');
3for (let i = 0; i < 10000; i++) {
4 file.write('Hello world ' + i);
5}
6file.end();
7
3. 双工流 —— 该流用于创建同时可读和可写的流
1const server = http.createServer((req, res) => {
2 let body = '';
3 req.setEncoding('utf8');
4 req.on('data', (chunk) => {
5 body += chunk;
6 });
7 req.on('end', () => {
8 console.log(body);
9 try {
10 res.write('Hello World');
11 res.end();
12 } catch (er) {
13 res.statusCode = 400;
14 return res.end(`error: ${er.message}`);
15 }
16 });
17});
18