作為一名前端，在工作中也會遇到很多有關(guān)二進制處理的需求，如 EXCEL 表格的導(dǎo)出，PDF 的生成，多個文件的打包，音頻的處理。

從前后端整體上來說前端代表 UI 層，它的外在表現(xiàn)是?human readable?的，而服務(wù)端代表數(shù)據(jù)層，所表現(xiàn)出來的是?machine readable。如果 EXCEL 以及 PDF 的處理交由服務(wù)端處理，服務(wù)端免不了要做一層格式化的邏輯處理，以便與前端保持一致。一來增加了復(fù)雜度，二來容易造成前端與服務(wù)器端的數(shù)據(jù)不一致。此時為了減少復(fù)雜度，工作量有可能都盡可能在瀏覽器端完成。

本篇文章總結(jié)了瀏覽器端的二進制以及有關(guān)數(shù)據(jù)之間的轉(zhuǎn)化，如?ArrayBuffer，TypedArray，Blob，DataURL，ObjectURL，Text?之間的互相轉(zhuǎn)換。為了更好的理解與方便以后的查詢，特意做了一張圖做總結(jié)。

二進制相關(guān)數(shù)據(jù)類型

在介紹常見的二進制數(shù)據(jù)處理之前，先簡單介紹下幾種二進制相關(guān)的數(shù)據(jù)類型

ArrayBuffer && TypedArray

TypedArray?是 ES6+ 新增的描述二進制數(shù)據(jù)的類數(shù)組數(shù)據(jù)結(jié)構(gòu)。但它本身不可以被實例化，甚至無法訪問，你可以把它理解為?Abstract Class?或者?Interface。而基于?TypedArray，有如下數(shù)據(jù)類型：

• Uint8ArrayUint?及?Unsigned Int?代表數(shù)組的每一項是無符號整型8?代表數(shù)據(jù)的每一項占 8 個比特位，即一個字節(jié)
• Int8Array
• Uint16Array
• Int16Array
• ...

通過?Uint8Array，即可知道?Uint16Array，Int8Array?所代表的意義。

const?array?=?new?Int32Array([1,?2,?3])

//?.length?代表數(shù)組的大小
//?3
array.length

//?.btyeLength?代表數(shù)據(jù)所占字節(jié)大小
//?12
array.byteLength

ArrayBuffer?代表二進制數(shù)據(jù)結(jié)構(gòu)，「并且只讀」，需要轉(zhuǎn)化為?TypedArray?進行寫操作。

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

連接多個 TypedArray

TypedArray?沒有像數(shù)組那樣的?Array.prototype.concat?方法用來連接多個?TypedArray。不過它提供了?TypedArray.prototype.set?可以用來間接連接字符串

?

可以參考 MDN 文檔：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set

?

//?在位移?offset?位置放置?typedarray
typedarray.set(typedarray,?offset)

原理就是先分配一塊空間足以容納需要連接的?TypedArray，然后逐一在對應(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]))

同時您還需要對資源的獲取有大致的了解，如 XHR，fetch，通過文件上傳。

Blob

Blob?是瀏覽器端的類文件對象。操作?Blob?需要使用數(shù)據(jù)類型?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ù)輸入或者叫資源的請求可以分為以下兩種途徑

• 通過 url 地址請求網(wǎng)絡(luò)資源
• 通過文件上傳請求本地資源

fetch

fetch?應(yīng)該是大家比較熟悉的，但大多使用環(huán)境比較單一，一般用來請求 json 數(shù)據(jù)。其實，?「它也可以設(shè)置返回數(shù)據(jù)格式為?Blob?或者?ArrayBuffer。」

fetch?返回一個包含?Response?對象的 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)
??//?最常見的使用
??return?res.json()

??//?返回?Blob
??//?return?res.blob()

??//?返回?ArrayBuffer
??//?return?res.arrayBuffer()
})

另外，萬能的?Response API?既可以可以使用?TypedArray，Blob，Text?作為輸入，又可以使用它們作為輸出。

「這意味著關(guān)于這三種數(shù)據(jù)類型的轉(zhuǎn)換完全可以通過 Response」

xhr

「xhr 可以設(shè)置 responseType 接收合適的數(shù)據(jù)類型」

const?request?=?new?XMLHttpRequest()
request.responseType?=?'arraybuffer'
request.responseType?=?'blob'

File

本地文件可以通過?input[type=file]?來上傳文件。

<input?type="file"?id="input">

當上傳成功后，可以通過?document.getElementById('input').files[0]?獲取到上傳的文件，即一個 File 對象，它是 Blob 的子類，可以通過?FileReader?或者?Response?獲取文件內(nèi)容。

數(shù)據(jù)輸出

或者叫數(shù)據(jù)展示或者下載，數(shù)據(jù)經(jīng)二進制處理后可以由 url 表示，然后通過 image, video 等元素引用或者直接下載。

Data URL

Data URL 即 Data As URL。所以，?「如果資源過大，地址便會很長?！?/strong>?使用以下形式表示。

data:[][;base64],

先來一個 hello, world。把以下地址粘入地址欄，會訪問到 hello, world

data:text/html,
Hello%2C%20World!

Base64 編碼與解碼

Base64 使用大小寫字母，數(shù)字，+ 和 / 64 個字符來編碼數(shù)據(jù)，所以稱為 Base64。經(jīng)編碼后，文本體積會變大 1/3

在瀏覽器中，可以使用?atob?和?btoa?編碼解碼數(shù)據(jù)。

//?aGVsbG8=
btoa('hello')

Object URL

可以使用瀏覽器新的 API?URL?對象生成一個地址來表示?Blob?數(shù)據(jù)。

//?粘貼生成的地址，可以訪問到?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]?。

這里也簡單寫一個函數(shù)，用來下載一個鏈接

function?download?(url,?name)?{
??const?a?=?document.createElement('a')
??a.download?=?name
??a.rel?=?'noopener'
??a.href?=?url
??//?觸發(fā)模擬點擊
??a.dispatchEvent(new?MouseEvent('click'))
??//?或者?a.click(
}

二進制數(shù)據(jù)轉(zhuǎn)換

以上是二進制數(shù)據(jù)間的轉(zhuǎn)換圖，有一些轉(zhuǎn)換可以直接通過 API，有些則需要代碼，以下貼幾種常見轉(zhuǎn)換的代碼

String to TypedArray

根據(jù)上圖，由字符串到 TypedArray 的轉(zhuǎn)換，可以通過?「String -> Blob -> ArrayBuffer -> TypedArray」?的途徑。

關(guān)于代碼中的函數(shù)?readBlob?可以回翻環(huán)節(jié) 數(shù)據(jù)類型 - Blob^[2]

const?name?=?'山月'
const?blob?=?new?Blob(name.split(''))

readBlob(blob,?'ArrayBuffer').then(buffer?=>?new?Uint8Array(buffer))

也可以通過 Response API 直接轉(zhuǎn)換?「String -> ArrayBuffer -> TypedArray」

const?name?=?'山月'

new?Response(name).arrayBuffer(buffer?=>?new?Uint8Array(buffer))

這上邊兩種方法都是直接通過 API 來轉(zhuǎn)化，如果你更像了解如何手動轉(zhuǎn)換一個字符串和二進制的 TypedArray

String to TypedArray 2

使用 enodeURIComponent 把字符串轉(zhuǎn)化為 utf8，再進行構(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)))
}

實踐

1. 如何上傳本地圖片并在網(wǎng)頁上展示

由以上整理的轉(zhuǎn)換圖得出途徑

本地上傳圖片 -> Blob -> Object URL

2. 如何拼接兩個音頻文件

由以上整理的轉(zhuǎn)換圖得出途徑

fetch請求音頻資源 -> ArrayBuffer -> TypedArray -> 拼接成一個 TypedArray -> ArrayBuffer -> Blob -> Object URL

3. 如何把 json 數(shù)據(jù)轉(zhuǎn)化為 demo.json 并下載文件

json 視為字符串，由以上整理的轉(zhuǎn)換圖得出途徑

Text -> DataURL

除了使用 DataURL，還可以轉(zhuǎn)化為 Object URL 進行下載。關(guān)于下載的函數(shù)?download，可以參考以上環(huán)節(jié) 數(shù)據(jù)輸出-下載^[3]

Text -> Blob -> Object URL

可以把以下代碼直接粘貼到控制臺下載文件

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')

??看完三件事

如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個小忙：

1. 點贊，讓更多的人也能看到介紹內(nèi)容（收藏不點贊，都是耍流氓-_-）
2. 關(guān)注公眾號“前端勸退師”，不定期分享原創(chuàng)知識。
3. 也看看其他文章

勸退師個人微信：huab119

也可以來我的GitHub博客里拿所有文章的源文件：

前端勸退指南：https：//github.com/roger-hiro/BlogFN一起玩耍呀

Reference