誰(shuí)說(shuō)前端不需要懂二進(jìn)制
作為一名前端，在工作中也會(huì)遇到很多有關(guān)二進(jìn)制處理的需求，如 EXCEL 表格的導(dǎo)出，PDF 的生成，多個(gè)文件的打包，音頻的處理。
從前后端整體上來(lái)說(shuō)前端代表 UI 層，它的外在表現(xiàn)是 human readable 的，而服務(wù)端代表數(shù)據(jù)層，所表現(xiàn)出來(lái)的是 machine readable。如果 EXCEL 以及 PDF 的處理交由服務(wù)端處理，服務(wù)端免不了要做一層格式化的邏輯處理，以便與前端保持一致。一來(lái)增加了復(fù)雜度，二來(lái)容易造成前端與服務(wù)器端的數(shù)據(jù)不一致。此時(shí)為了減少?gòu)?fù)雜度，工作量有可能都盡可能在瀏覽器端完成。
本篇文章總結(jié)了瀏覽器端的二進(jìn)制以及有關(guān)數(shù)據(jù)之間的轉(zhuǎn)化，如 ArrayBuffer，TypedArray，Blob，DataURL，ObjectURL，Text 之間的互相轉(zhuǎn)換。為了更好的理解與方便以后的查詢(xún)，特意做了一張圖做總結(jié)。
二進(jìn)制相互轉(zhuǎn)換圖
二進(jìn)制相關(guān)數(shù)據(jù)類(lèi)型
在介紹常見(jiàn)的二進(jìn)制數(shù)據(jù)處理之前，先簡(jiǎn)單介紹下幾種二進(jìn)制相關(guān)的數(shù)據(jù)類(lèi)型
ArrayBuffer && TypedArray
TypedArray 是 ES6+ 新增的描述二進(jìn)制數(shù)據(jù)的類(lèi)數(shù)組數(shù)據(jù)結(jié)構(gòu)。但它本身不可以被實(shí)例化，甚至無(wú)法訪(fǎng)問(wèn)，你可以把它理解為 Abstract Class 或者 Interface。而基于 TypedArray，有如下數(shù)據(jù)類(lèi)型：
- Uint8ArrayUint 及 Unsigned Int 代表數(shù)組的每一項(xiàng)是無(wú)符號(hào)整型8 代表數(shù)據(jù)的每一項(xiàng)占 8 個(gè)比特位，即一個(gè)字節(jié)
- Int8Array
- Uint16Array
- Int16Array
- ...
通過(guò) Uint8Array，即可知道 Uint16Array，Int8Array 所代表的意義。
- const array = new Int32Array([1, 2, 3])
- // .length 代表數(shù)組的大小
- // 3
- array.length
- // .btyeLength 代表數(shù)據(jù)所占字節(jié)大小
- // 12
- array.byteLength
ArrayBuffer 代表二進(jìn)制數(shù)據(jù)結(jié)構(gòu)，「并且只讀」，需要轉(zhuǎn)化為 TypedArray 進(jìn)行寫(xiě)操作。
- const array = new Int16Array([1, 2, 3])
- // TypedArray -> ArrayBuffer
- array.buffer
- // ArrayBuffer -> TypedArray
- new Int16Array(array.buffer)
- // buffer.length 代表數(shù)據(jù)所占用字節(jié)大小
- array.buffer.length === array.byteLength
連接多個(gè) TypedArray
TypedArray 沒(méi)有像數(shù)組那樣的 Array.prototype.concat 方法用來(lái)連接多個(gè) TypedArray。不過(guò)它提供了 TypedArray.prototype.set 可以用來(lái)間接連接字符串
❝ 可以參考 MDN 文檔：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set ❞
- // 在位移 offset 位置放置 typedarray
- typedarray.set(typedarray, offset)
原理就是先分配一塊空間足以容納需要連接的 TypedArray，然后逐一在對(duì)應(yīng)位置疊加
- function concatenate(constructor, ...arrays) {
- let length = 0;
- for (let arr of arrays) {
- length += arr.length;
- }
- let result = new constructor(length);
- let offset = 0;
- for (let arr of arrays) {
- result.set(arr, offset);
- offset += arr.length;
- }
- return result;
- }
- concatenate(Uint8Array, new Uint8Array([1, 2, 3]), new Uint8Array([4, 5, 6]))
同時(shí)您還需要對(duì)資源的獲取有大致的了解，如 XHR，fetch，通過(guò)文件上傳。
Blob
Blob 是瀏覽器端的類(lèi)文件對(duì)象。操作 Blob 需要使用數(shù)據(jù)類(lèi)型 FileReader。
FileReader 有以下方法，可以把 Blob 轉(zhuǎn)化為其它數(shù)據(jù)
- FileReader.prototype.readAsArrayBuffer
- FileReader.prototype.readAsText
- FileReader.prototype.readAsDataURL
- FileReader.prototype.readAsBinaryString
- const blob = new Blob('hello'.split(''))
- // 表示文件的大小
- blob.size
- const array = new Uint8Array([128, 128, 128])
- const blob2 = new Blob([array])
- function readBlob (blob, type) {
- return new Promise(resolve => {
- const reader = new FileReader()
- reader.onload = function (e) {
- resolve(e.target.result)
- }
- reader.readAsArrayBuffer(blob)
- })
- }
- readBlob(blob, 'DataURL').then(url => console.log(url))
數(shù)據(jù)輸入
數(shù)據(jù)輸入或者叫資源的請(qǐng)求可以分為以下兩種途徑
- 通過(guò) url 地址請(qǐng)求網(wǎng)絡(luò)資源
- 通過(guò)文件上傳請(qǐng)求本地資源
fetch
fetch 應(yīng)該是大家比較熟悉的，但大多使用環(huán)境比較單一，一般用來(lái)請(qǐng)求 json 數(shù)據(jù)。其實(shí)， 「它也可以設(shè)置返回?cái)?shù)據(jù)格式為 Blob 或者 ArrayBuffer?！?/p>
fetch 返回一個(gè)包含 Response 對(duì)象的 Promise，Response 有以下方法
- Response.prototype.arrayBuffer
- Response.prototype.blob
- Response.prototype.text
- Response.prototype.json
❝ 詳情可以查看 MDN 文檔 https://developer.mozilla.org/en-US/docs/Web/API/Response ❞
- fetch('/api/ping').then(res => {
- // true
- console.log(res instanceof Response)
- // 最常見(jiàn)的使用
- return res.json()
- // 返回 Blob
- // return res.blob()
- // 返回 ArrayBuffer
- // return res.arrayBuffer()
- })
另外，萬(wàn)能的 Response API 既可以可以使用 TypedArray，Blob，Text 作為輸入，又可以使用它們作為輸出。
「這意味著關(guān)于這三種數(shù)據(jù)類(lèi)型的轉(zhuǎn)換完全可以通過(guò) Response」
xhr
「xhr 可以設(shè)置 responseType 接收合適的數(shù)據(jù)類(lèi)型」
- const request = new XMLHttpRequest()
- request.responseType = 'arraybuffer'
- request.responseType = 'blob'
File
本地文件可以通過(guò) input[type=file] 來(lái)上傳文件。
- <input type="file" id="input">
當(dāng)上傳成功后，可以通過(guò) document.getElementById('input').files[0] 獲取到上傳的文件，即一個(gè) File 對(duì)象，它是 Blob 的子類(lèi)，可以通過(guò) FileReader 或者 Response 獲取文件內(nèi)容。
數(shù)據(jù)輸出
或者叫數(shù)據(jù)展示或者下載，數(shù)據(jù)經(jīng)二進(jìn)制處理后可以由 url 表示，然后通過(guò) image, video 等元素引用或者直接下載。
Data URL
Data URL 即 Data As URL。所以， 「如果資源過(guò)大，地址便會(huì)很長(zhǎng)?！?使用以下形式表示。
- data:[<mediatype>][;base64],<data>
先來(lái)一個(gè) hello, world。把以下地址粘入地址欄，會(huì)訪(fǎng)問(wèn)到 hello, world
- data:text/html,<h1>Hello%2C%20World!</h1>
Base64 編碼與解碼
Base64 使用大小寫(xiě)字母，數(shù)字，+ 和 / 64 個(gè)字符來(lái)編碼數(shù)據(jù)，所以稱(chēng)為 Base64。經(jīng)編碼后，文本體積會(huì)變大 1/3
在瀏覽器中，可以使用 atob 和 btoa 編碼解碼數(shù)據(jù)。
- // aGVsbG8=
- btoa('hello')
Object URL
可以使用瀏覽器新的 API URL 對(duì)象生成一個(gè)地址來(lái)表示 Blob 數(shù)據(jù)。
- // 粘貼生成的地址，可以訪(fǎng)問(wèn)到 hello, world
- // blob:http://host/27254c37-db7a-4f2f-8861-0cf9aec89a64
- URL.createObjectURL(new Blob('hello, world'.split('')))
下載
data:application/octet-stream;base64,5bGx5pyI
資源的下載可以利用 FileSaver[1] 。
這里也簡(jiǎn)單寫(xiě)一個(gè)函數(shù)，用來(lái)下載一個(gè)鏈接
- function download (url, name) {
- const a = document.createElement('a')
- a.download = name
- a.rel = 'noopener'
- a.href = url
- // 觸發(fā)模擬點(diǎn)擊
- a.dispatchEvent(new MouseEvent('click'))
- // 或者 a.click(
- }
二進(jìn)制數(shù)據(jù)轉(zhuǎn)換
二進(jìn)制數(shù)據(jù)轉(zhuǎn)換
以上是二進(jìn)制數(shù)據(jù)間的轉(zhuǎn)換圖，有一些轉(zhuǎn)換可以直接通過(guò) API，有些則需要代碼，以下貼幾種常見(jiàn)轉(zhuǎn)換的代碼
String to TypedArray
根據(jù)上圖，由字符串到 TypedArray 的轉(zhuǎn)換，可以通過(guò) 「String -> Blob -> ArrayBuffer -> TypedArray」 的途徑。
關(guān)于代碼中的函數(shù) readBlob 可以回翻環(huán)節(jié) 數(shù)據(jù)類(lèi)型 - Blob[2]
- const name = '山月'
- const blob = new Blob(name.split(''))
- readBlob(blob, 'ArrayBuffer').then(buffer => new Uint8Array(buffer))
也可以通過(guò) Response API 直接轉(zhuǎn)換 「String -> ArrayBuffer -> TypedArray」
- const name = '山月'
- new Response(name).arrayBuffer(buffer => new Uint8Array(buffer))
這上邊兩種方法都是直接通過(guò) API 來(lái)轉(zhuǎn)化，如果你更像了解如何手動(dòng)轉(zhuǎn)換一個(gè)字符串和二進(jìn)制的 TypedArray
String to TypedArray 2
使用 enodeURIComponent 把字符串轉(zhuǎn)化為 utf8，再進(jìn)行構(gòu)造 TypedArray。
- function stringToTypedArray(s) {
- const str = encodeURIComponent(s)
- const binstr = str.replace(/%([0-9A-F]{2})/g, (_, p1) => {
- return String.fromCharCode('0x' + p1)
- })
- return new Uint8Array(binstr.split('').map(x => x.charCodeAt(0)))
- }
實(shí)踐
1. 如何上傳本地圖片并在網(wǎng)頁(yè)上展示
由以上整理的轉(zhuǎn)換圖得出途徑
本地上傳圖片 -> Blob -> Object URL
2. 如何拼接兩個(gè)音頻文件
由以上整理的轉(zhuǎn)換圖得出途徑
fetch請(qǐng)求音頻資源 -> ArrayBuffer -> TypedArray -> 拼接成一個(gè) TypedArray -> ArrayBuffer -> Blob -> Object URL
3. 如何把 json 數(shù)據(jù)轉(zhuǎn)化為 demo.json 并下載文件
json 視為字符串，由以上整理的轉(zhuǎn)換圖得出途徑
Text -> DataURL
除了使用 DataURL，還可以轉(zhuǎn)化為 Object URL 進(jìn)行下載。關(guān)于下載的函數(shù) download，可以參考以上環(huán)節(jié) 數(shù)據(jù)輸出-下載[3]
Text -> Blob -> Object URL
可以把以下代碼直接粘貼到控制臺(tái)下載文件
- const json = {
- a: 3,
- b: 4,
- c: 5
- }
- const str = JSON.stringify(json, null, 2)
- // 方案一：Text -> DataURL
- const dataUrl = `data:,${str}`
- download(dataUrl, 'demo.json')
- // 方案二：Text -> Blob -> ObjectURL
- const url = URL.createObjectURL(new Blob(str.split('')))
- download(url, 'demo1.json')
