深入理解JavaScript字節(jié)二進(jìn)制知識(shí)以及相關(guān)API
目錄
- 字節(jié)
- 字節(jié)序
- Blob
- File
- 對(duì)Blob和File的讀取
- ArrayBuffer
- TypeArray
- DataView
- Blob和ArrayBuffer
當(dāng)前，前端對(duì)二進(jìn)制數(shù)據(jù)有許多的API可以使用，這豐富了前端對(duì)文件數(shù)據(jù)的處理能力，有了這些能力，就能夠?qū)D片等文件的數(shù)據(jù)進(jìn)行各種處理。
本文將著重介紹一些前端二進(jìn)制數(shù)據(jù)處理相關(guān)的API知識(shí)，如Blob、File、FileReader、ArrayBuffer、TypeArray、DataView等等。
字節(jié)
在介紹各種API之前，我們需要先了解下和字節(jié)有關(guān)的知識(shí)。
我們知道，計(jì)算機(jī)是二進(jìn)制的世界，而字節(jié)(byte)是計(jì)算機(jī)技術(shù)中關(guān)于二進(jìn)制數(shù)據(jù)的一種基本單位，1字節(jié)有8個(gè)二進(jìn)制位，即8比特(bit)。
比特又叫位，一位二進(jìn)制數(shù)據(jù)要么是0、要么是1，只有兩種狀態(tài)，所以1比特有2種狀態(tài)。
1字節(jié)有8比特，即8個(gè)二進(jìn)制位，那就能表示 2**8 = 256 種狀態(tài)，取值從 00000000 到 11111111。
字節(jié)作為基本單位，在很多地方都被使用，如字符編碼知識(shí)，見(jiàn)前文前端需要搞懂的字符編碼：ASCII、Unicode、UTF8、UTF16等。
二進(jìn)制數(shù)據(jù)在存儲(chǔ)的時(shí)候，以字節(jié)為單位，這里還涉及到一個(gè)關(guān)于字節(jié)序的知識(shí)。
字節(jié)序
字節(jié)序描述的是計(jì)算機(jī)如何存儲(chǔ)字節(jié)。
因?yàn)槲覀冎溃瑑?nèi)存存儲(chǔ)都有索引地址，每個(gè)字節(jié)對(duì)應(yīng)一個(gè)索引地址。一個(gè)字節(jié)存儲(chǔ)8位二進(jìn)制，即0到255之間，但需要存儲(chǔ)大于255的數(shù)值的時(shí)候，就需要多個(gè)字節(jié)，多個(gè)字節(jié)就涉及到排序問(wèn)題。
所以字節(jié)序就是：當(dāng)需要多個(gè)字節(jié)表示一個(gè)值的時(shí)候，這多個(gè)字節(jié)使用什么樣的排序方式在內(nèi)存中進(jìn)行存儲(chǔ)。
而排序方式主要是兩種：大端存儲(chǔ)(big-endian)和小端存儲(chǔ)(little-endian)。
大端存儲(chǔ)和小端存儲(chǔ)
大端存儲(chǔ)又稱(chēng)大字節(jié)序、高字節(jié)序，方式是低位字節(jié)排在內(nèi)存中的高地址端，高字節(jié)位排放在內(nèi)存中的低地址端。圖片文件 png、jpg都是這種方式。
小端存儲(chǔ)又稱(chēng)為小字節(jié)序、低字節(jié)序，方式是低位字節(jié)排在內(nèi)存中的低地址端，高位字節(jié)排在內(nèi)存中的高地址端。圖片文件gif是小端序。
示例
當(dāng)我們使用不同的字節(jié)序存儲(chǔ)數(shù)字 0x12345678 (這里是16進(jìn)制表示，對(duì)應(yīng)的十進(jìn)制：305419896。進(jìn)制相關(guān)知識(shí)可見(jiàn)前文Javascript中的進(jìn)制和進(jìn)制轉(zhuǎn)換)：
大端存儲(chǔ)在內(nèi)存中的存儲(chǔ)地址：
小端存儲(chǔ)在內(nèi)存中的存儲(chǔ)地址：
這里數(shù)字字節(jié)的高-低位是從左到右，最高位是 12，最低位是 78；而內(nèi)存中存儲(chǔ)時(shí)從左到右是低地址——高地址。
所以在大端序中高位字節(jié)的 12 在內(nèi)存最左邊的低地址位，而低字節(jié)位 78 則在內(nèi)存最右邊的高地址位；而小端序則正好相反。
從視覺(jué)習(xí)慣上，大端存儲(chǔ)似乎更順眼，但無(wú)論哪種方式，計(jì)算的結(jié)果都是一樣的，只是在計(jì)算的時(shí)候需要處理這個(gè)排序方式，下文會(huì)涉及到。
Blob
Blob，即 Binary large Object，本質(zhì)上是一個(gè)二進(jìn)制對(duì)象，該對(duì)象表示的是一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象。
它的不可變，代表它是只讀的，不可被改變。
Blob對(duì)象的構(gòu)造函數(shù)語(yǔ)法：new Blob(array, options)。
參數(shù)array：是一個(gè)數(shù)據(jù)數(shù)組，可以是多種對(duì)象的數(shù)據(jù)，包含 ArrayBuffer、Blob、String 等等。
參數(shù)options：可選對(duì)象，指定兩個(gè)屬性：
type表示Blob對(duì)象數(shù)據(jù)的MIME類(lèi)型；endings指定包含行結(jié)束符\n的字符串如何寫(xiě)入。
我們可以使用構(gòu)造函數(shù)直接創(chuàng)建一個(gè)新的 Blob 對(duì)象：
const blob = new Blob(["123456789"], {type : "text/plain"});新創(chuàng)建的對(duì)象實(shí)例，結(jié)構(gòu)如下：
從以上示例，我們就可以看到Blob對(duì)象的方法和屬性：
實(shí)例屬性
- size：Blob對(duì)象中數(shù)據(jù)的字節(jié)大小
- type：字符串，表示Blob對(duì)象數(shù)據(jù)的MIME類(lèi)型
示例方法
1.arrayBuffer()：返回包含Blob所有內(nèi)容的二進(jìn)制格式的ArrayBuffer的一個(gè)promise對(duì)象
2.stream()：返回能讀取Blob的ReadableStream對(duì)象
3.text()：返回包含Blob所有內(nèi)容的字符串(UTF-8編碼)的一個(gè)promise對(duì)象
4.slice([start [, end [, contentType]]])：
- 該方法有三個(gè)可選參數(shù)，可用于分割Blob數(shù)據(jù)
- 它根據(jù)指定的起始和結(jié)束位置，返回原Blob在該范圍的數(shù)據(jù)，得到一個(gè)新的Blob對(duì)象
- 第三個(gè)參數(shù)
contentType可以為新Blob對(duì)象指定自己的MIME類(lèi)型
可以針對(duì)上面的 blob 實(shí)例進(jìn)行操作：
blob.slice(0, 3).text().then(res => { console.log(res)})// 結(jié)果：123以上代碼，使用slice()方法獲取原blob的前三位的數(shù)據(jù)，生成新的Blob實(shí)例后，通過(guò)text()方法打印出文本內(nèi)容。
下面可以看看Blob在接口請(qǐng)求中的應(yīng)用，F(xiàn)etch API中的 Response 對(duì)象，擁有一個(gè)blob方法，能夠得到Blob對(duì)象。
const imgRequst = new Request("11.jpg")fetch(imgRequst).then((response) => { return response.blob()}).then((mBlob) => { console.log(mBlob)})通過(guò)以上代碼，請(qǐng)求一個(gè)jpg圖片文件，響應(yīng)對(duì)象通過(guò) blob() 方法轉(zhuǎn)為Blob對(duì)象：
File
File對(duì)象繼承了Blob對(duì)象，是一種特殊類(lèi)型的Blob，它擴(kuò)展了對(duì)系統(tǒng)文件的支持能力。
File提供文件信息，并能夠在javascript中進(jìn)行訪問(wèn)，一般在使用 <input> 標(biāo)簽選擇文件時(shí)返回，因?yàn)?<input> 標(biāo)簽允許選擇多個(gè)文件，這里返回的是文件列表 files。
除了 <input> 標(biāo)簽以外，還有兩種方式返回File對(duì)象：
- 自由拖放操作生成的
DataTransfer對(duì)象。 - 文件系統(tǒng)訪問(wèn)API中的
FileSystemFileHandle對(duì)象的getFile()方法。
File的構(gòu)造函數(shù)：new File(bits, name[, options])。 有三個(gè)參數(shù)：
bits：是一個(gè)數(shù)據(jù)數(shù)組，可以是多種對(duì)象的數(shù)據(jù)，與Blob對(duì)象類(lèi)似
name：文件名稱(chēng)
options：可選屬性對(duì)象，包含兩個(gè)選項(xiàng)
- type：MIME類(lèi)型字符串
- lastModified：時(shí)間戳，表示文件的最后修改時(shí)間
下面代碼，通過(guò) <input> 標(biāo)簽讀取文件：
<input id="input-file" type="file" accept="image/*" />
document.getElementById("input-file").onchange = (e) => { const file = e.target.files[0] console.log(file) // ...}這是一個(gè)簡(jiǎn)單的圖片上傳，獲取到的file實(shí)例，控制臺(tái)打印出來(lái)：
通過(guò)上圖(chrome瀏覽器下)，可以看到File繼承了Blob的素有屬性和方法：
屬性除了size和type以外，F(xiàn)ile還有自己的幾個(gè)屬性
- lastModified：只讀，時(shí)間戳，文件最后修改時(shí)間
- name：只讀，文件名 lastModifiedDate：只讀，文件最后修改時(shí)間的 Date 對(duì)象，該對(duì)象已廢棄
- webkitRelativePath：非標(biāo)準(zhǔn)屬性，返回path或URL
File沒(méi)有自己的實(shí)例方法，都繼承自Blob
對(duì)Blob和File的讀取
File繼承自Blob，都是只讀對(duì)象，除了使用slice分片以外，并沒(méi)有其他操作能力，所以如果對(duì)它們進(jìn)行處理需要借助其他的API。
主要用于操作Blob的API有：FileReader、URL.createObjectURL()、createImageBitmap()和XMLHttpRequest.send()。下面將介紹這幾種方式。
Blob和File都是 WebAPI，是由瀏覽器環(huán)境提供的，而上面提到這四種對(duì)象也同樣是WebAPI。
FileReader
FileReader是用于異步讀取文件類(lèi)型（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，指定Blob或File對(duì)象為需要讀取的文件數(shù)據(jù)。
FileReader 不能在文件系統(tǒng)中用路徑名的方式讀取文件。
構(gòu)造函數(shù)：new FileReader()。
如果對(duì)文件處理功能開(kāi)發(fā)較多，對(duì)FileReader對(duì)象應(yīng)該較熟，我們先看一個(gè)示例：
document.getElementById("input-file").onchange = (e) => { const file = e.target.files[0] const reader = new FileReader() reader.onload = async (event) => { const img = new Image() img.src = event.target.result } reader.readAsDataURL(file)}以上代碼，就是很常用的，使用FileReader讀取一個(gè)圖片文件的Base64數(shù)據(jù)，然后使用圖片對(duì)象加載。Base64知識(shí)，可參考前文深入理解Base64編碼字符串。
這段代碼也涉及到FileReader對(duì)像的屬性、事件、方法。
FileReader的屬性 事件和方法
屬性(皆只讀)
error：在讀取文件時(shí)發(fā)生的錯(cuò)誤
readyState：表示當(dāng)前讀取狀態(tài)
result：文件內(nèi)容，讀取狀態(tài)完成時(shí)才有效
方法
- abort()：中止讀取操作。在返回時(shí)，readyState屬性為DONE
- readAsArrayBuffer()：以ArrayBuffer類(lèi)型讀取Blob中的內(nèi)容
- readAsBinaryString()：以原始二進(jìn)制數(shù)據(jù)類(lèi)型讀取Blob中的內(nèi)容
- readAsDataURL()：以Base64字符串類(lèi)型讀取Blob中的內(nèi)容
- readAsText()：以文本字符串類(lèi)型讀取Blob中的內(nèi)容
事件
- onabort：讀取操作被中斷時(shí)觸發(fā)
- onerror：讀取操作發(fā)生錯(cuò)誤時(shí)觸發(fā)
- onload：讀取操作完成時(shí)觸發(fā)
- onloadstart：讀取操作開(kāi)始時(shí)觸發(fā)
- onloadend：讀取操作結(jié)束時(shí)觸發(fā)
- onprogress：讀取Blob時(shí)觸發(fā)
URL.createObjectURL()
URL是瀏覽器環(huán)境提供的，用于處理url鏈接的一個(gè)接口對(duì)象。可以通過(guò)它，解析、構(gòu)造、規(guī)范和編碼各種url鏈接。
而URL提供的一個(gè)靜態(tài)方法 createObjectURL()，可以用來(lái)處理Blob和File文件對(duì)象。
先看一個(gè)例子：
document.getElementById("input-file").onchange = (e) => { const file = e.target.files[0] const url = URL.createObjectURL(file) const img = new Image() img.onload = () => { document.body.append(img) } img.src = url}頁(yè)面展示：
這段代碼就實(shí)現(xiàn)了上傳圖片，通過(guò) URL.createObjectURL 讀取后生成一個(gè)本地映射的url，再使用Image對(duì)象加載圖片。
通過(guò)查看頁(yè)面元素，可以看到新添加的圖片元素，它的src是一個(gè)類(lèi)似鏈接的字符串：blob:http://localhost:8088/29c8f4a5-9b47-436f-8983-03643c917f1c，通過(guò)這個(gè)字符串，圖片就能加載顯示出來(lái)。
再來(lái)看 createObjectURL()，它返回一個(gè)包含給定的Blob或File對(duì)象的url，就可以當(dāng)做文件資源被加載。而這個(gè)url的生命周期和它的窗口同步，窗口關(guān)閉這個(gè)url就自動(dòng)釋放了。
這個(gè)url就是被稱(chēng)為偽協(xié)議的Objct URL。
Object URL
Object URL 又被稱(chēng)為Blob URL，一般使用Blob或File對(duì)象生成，通過(guò) URL.createObjectURL() 方法創(chuàng)建一個(gè)唯一的URL。
Object URL的格式為：blob:origin/唯一標(biāo)識(shí)(uuid)。
上面生成的URL字符串就符合這個(gè)格式：blob:http://localhost:8088/29c8f4a5-9b47-436f-8983-03643c917f1c。
- origin 對(duì)應(yīng)的
http://localhost:8088/，如果直接打開(kāi)本地html文件，則origin為null。 - uuid 對(duì)應(yīng)
29c8f4a5-9b47-436f-8983-03643c917f1c。
瀏覽器內(nèi)部會(huì)為生成Object URL保持一個(gè) URL 到 Blob 的映射，Blob是留存在內(nèi)存中，瀏覽器只有在卸載當(dāng)前窗口文檔時(shí)才會(huì)釋放。
如果要手動(dòng)釋放，則需要URL的另外一個(gè)靜態(tài)方法：URL.revokeObjectURL()，它用于銷(xiāo)毀之前創(chuàng)建的URL實(shí)例，在合適的時(shí)機(jī)調(diào)用即可銷(xiāo)毀Object URL。
URL.revokeObjectURL(url)
XMLHttpRequest.send()
XMLHttpRequest.send(body)：用于在XHR的HTTP請(qǐng)求中，發(fā)送數(shù)據(jù)體。
這里的body參數(shù)，可以是多種數(shù)據(jù)類(lèi)型，包括Blob對(duì)象。
const xhr = new XMLHttpRequest()xhr.send(new Blob())
createImageBitmap()
createImageBitmap(): 主要處理圖片資源，接受不同的圖片資源對(duì)象為參數(shù)，并生成一個(gè)ImageBitmap對(duì)象。
這些參數(shù)就就可以是Blob和File對(duì)象。
ImageBitmap表示可以繪制在canvas上的位圖圖像。
createImageBitmap(file).then(imageBitmap => { const canvas = document.createElement("canvas") canvas.width = imageBitmap.width canvas.height = imageBitmap.height const ctx = canvas.getContext("2d") ctx.drawImage(imageBitmap, 0, 0) document.body.append(canvas)})如上代碼，即可讀取圖片文件，使用canvas繪制。
ArrayBuffer
ArrayBuffer 對(duì)象表示通用的、固定長(zhǎng)度的原始二進(jìn)制緩沖區(qū)，它是一個(gè)字節(jié)數(shù)組，但不能直接操作它的內(nèi)容，而需要通過(guò)其他方式(如TypeArray或DataView等)進(jìn)行處理。
構(gòu)造函數(shù)：new ArrayBuffer(length)，返回一個(gè)指定大小的ArrayBuffer對(duì)象。
參數(shù)length：要?jiǎng)?chuàng)建的 ArrayBuffer 的字節(jié)大小。大于Number.MAX_SAFE_INTEGER（>= 2 ** 53）或?yàn)樨?fù)數(shù)，則拋出一個(gè)RangeError異常。
下面我們先使用前面介紹的 FileReader 讀取一個(gè)文件的ArrayBuffer內(nèi)容：
document.getElementById("input-file").onchange = (e) => { const file = e.target.files[0] const reader = new FileReader() reader.onload = async (event) => { console.log(event.target.result) } reader.readAsArrayBuffer(file)}控制臺(tái)日志打印輸出：
從上圖，可以看到ArrayBuffer的實(shí)例屬性和方法：
- byteLength：表示字節(jié)大小，不可改變
- slice(begin[, end])：根據(jù)指定位置范圍返回一個(gè)新的ArrayBuffer，可以分割A(yù)rrayBuffer。
ArrayBuffer還有靜態(tài)屬性和方法：
- ArrayBuffer.length：構(gòu)造函數(shù)的length屬性，值為1
- ArrayBuffer.isView(arg)：如果參數(shù)是ArrayBuffer的視圖實(shí)例則返回true。
由于我們無(wú)法直接操作ArrayBuffer，所以需要使用其他對(duì)象來(lái)處理，下面將介紹其中兩種。
TypeArray
TypeArray，即類(lèi)型化數(shù)組，它描述了二進(jìn)制數(shù)據(jù)緩沖區(qū)的一個(gè)類(lèi)數(shù)組。TypeArray本身不是一個(gè)可用的對(duì)象，只是一個(gè)輔助的數(shù)據(jù)類(lèi)型，作為所有類(lèi)型數(shù)組的構(gòu)造原型，真正可用的類(lèi)型數(shù)組包含了多種，如Int8Array、Uint8Array等。
常用的類(lèi)型數(shù)組如下表所示：
類(lèi)型化數(shù)組與普通數(shù)據(jù)也較相似，同樣擁有一系列的方法和屬性，但不支持 push、pop、shift、unshift、splice 等可以改變?cè)瓟?shù)組的增刪改方法。
類(lèi)型化數(shù)組由于定義了數(shù)據(jù)類(lèi)型，則各元素必須是同類(lèi)型的數(shù)據(jù)，不能像普通數(shù)據(jù)那樣元素可以是不同類(lèi)型；當(dāng)元素?cái)?shù)據(jù)類(lèi)型固定統(tǒng)一時(shí)，處理效率更優(yōu)。
各類(lèi)型數(shù)組在構(gòu)造函數(shù)、屬性、方法等語(yǔ)法上相同，本節(jié)就以 Uint8Array 為例。
語(yǔ)法
Uint8Array構(gòu)造函數(shù)：
new Uint8Array()new Uint8Array(length)new Uint8Array(typedArray)new Uint8Array(object)new Uint8Array(buffer [, byteOffset [, length]])
靜態(tài)屬性和方法：
- BYTES_PER_ELEMENT：返回?cái)?shù)組元素所占字節(jié)數(shù)，Uint8Array中的值是1，Uint32Array中的值是4，見(jiàn)上表
- length：固定長(zhǎng)度，Uint8Array中的值是1，Uint32Array中的值是3，基本沒(méi)用
- name：類(lèi)型數(shù)組返回自己的構(gòu)造名，Uint8Array類(lèi)型返回
Uint8Array，Uint32Array類(lèi)型返回Uint32Array等等 - from(source[, mapFn[, thisArg]])：從源類(lèi)型數(shù)組中返回一個(gè)新的數(shù)組
- of(element0[, element1[, ...[, elementN]]])：創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新類(lèi)型數(shù)組
實(shí)例屬性和方法
介紹完靜態(tài)屬性和方法，下面通過(guò)一個(gè)示例，來(lái)查看下Uint8Array的實(shí)例屬性和方法，代碼如下。
const reader = new FileReader()reader.onload = async (event) => { const aBuffer = event.target.result const uint8Array = new Uint8Array(aBuffer) console.log(uint8Array)}reader.readAsArrayBuffer(file)以上代碼，直接讀取文件的ArrayBuffer數(shù)據(jù)，然后通過(guò) Uint8Array 構(gòu)造函數(shù)，得到Uint8Array實(shí)例，控制臺(tái)查看：
通過(guò)加載一張png圖片，得到它的Uint8Array數(shù)組數(shù)據(jù)，可以看到類(lèi)型數(shù)組大部分的屬性和方法都和普通數(shù)組類(lèi)似，除了前文提到的增刪改數(shù)組的方法以外。因此，對(duì)類(lèi)型數(shù)組使用下標(biāo)、循環(huán)等等方式進(jìn)行讀取，和普通函數(shù)沒(méi)什么兩樣。
而類(lèi)型數(shù)組也自己的特殊屬性(都只讀)和方法，如下：
- buffer：返回類(lèi)型數(shù)組引用的ArrayBuffer
- byteLength：字節(jié)數(shù)長(zhǎng)度
- byteOffset：相對(duì)源ArrayBuffer的偏移字節(jié)數(shù)
- length：數(shù)組長(zhǎng)度
- set(array[, offset])：從給定數(shù)組中讀取元素值，并存儲(chǔ)在類(lèi)型數(shù)組中
- subarray(begin, end)：給定開(kāi)始和結(jié)尾索引，返回一個(gè)新的類(lèi)型數(shù)組
類(lèi)型數(shù)組間的關(guān)系
要了解常見(jiàn)類(lèi)型數(shù)組間的關(guān)系，我們先看下面這張圖：
圖上所示，是一張png圖片的ArrayBuffer數(shù)據(jù)，可以看到，ArrayBuffer的字節(jié)長(zhǎng)度屬性默認(rèn)取8位整型數(shù)組的長(zhǎng)度，即與Int8Array和Uint8Array的長(zhǎng)度一致。
而Int8Array的長(zhǎng)度29848，正好是Int16Array的長(zhǎng)度14924的兩倍，是Int32Array的長(zhǎng)度7462的四倍，可知，這里就是對(duì)字節(jié)的合并計(jì)算：
- Int8Array(Uint8Array) 轉(zhuǎn) Int16Array(Uint16Array)，需要依序合并兩個(gè)字節(jié)后計(jì)算數(shù)值。
- Int8Array(Uint8Array) 轉(zhuǎn) Int32Array(Uint32Array)，需要依序合并四個(gè)字節(jié)后計(jì)算數(shù)值。
- Int16Array(Uint16Array) 轉(zhuǎn) Int32Array(Uint32Array)，需要依序合并兩個(gè)字節(jié)后計(jì)算數(shù)值。
讀取GIF文件示例
類(lèi)型數(shù)組通過(guò)數(shù)組的方式對(duì)ArrayBuffer的內(nèi)容進(jìn)行讀取操作，可以方便我們處理文件的二進(jìn)制數(shù)據(jù)。 但使用類(lèi)型數(shù)組的時(shí)候，碰到多字節(jié)的數(shù)據(jù)時(shí)，需要考慮字節(jié)序的問(wèn)題。
下面，我們以讀取小端存儲(chǔ)的GIF圖片為例。
GIF圖片的Uint8Array數(shù)組數(shù)據(jù)中，寬高數(shù)據(jù)的存儲(chǔ)就是使用了兩個(gè)字節(jié)，第7-8位存儲(chǔ)圖片的寬度，9-10位存儲(chǔ)圖片的高度。
我們加載的GIF圖片寬高皆為600，需要處理字節(jié)序，代碼如下：
const uint8Array = new Uint8Array(aBuffer)let bufferIndex = 6// 獲取GIF寬度的兩個(gè)字節(jié)的值const width1 = uint8Array[bufferIndex]// width1 結(jié)果：88const width2 = uint8Array[bufferIndex + 1]// width2 結(jié)果：2// 得到各自的16進(jìn)制數(shù)據(jù)const width1hex = width1.toString(16)const width2hex = width2.toString(16)// 轉(zhuǎn)換成實(shí)際的寬度大小，注意這里把兩個(gè)字節(jié)的順序做了調(diào)整，符合小端序const width = parseInt(width2hex + width1hex, 16)// width 結(jié)果：600
使用小端序處理后，寬度結(jié)果等于600，符合圖片實(shí)際寬度。
自己手動(dòng)處理字節(jié)序會(huì)稍顯麻煩，如果不想手動(dòng)去處理字節(jié)序的問(wèn)題，可以使用另外一個(gè)對(duì)象：DataView。
DataView
DataView 是一個(gè)從 ArrayBuffer 中讀取多種類(lèi)型數(shù)值并且不用考慮字節(jié)序的接口對(duì)象。它的使用簡(jiǎn)單方便，擁有一系列的 get- 和 set- 實(shí)例方法操作數(shù)據(jù)。
DataView的構(gòu)造函數(shù)：new DataView(buffer [, byteOffset [, byteLength]])。 參數(shù)：
- buffer：源ArrayBuffer
- byteOffset：buffer中的字節(jié)偏移量
- byteLength：字節(jié)長(zhǎng)度
DataView不用考慮字節(jié)序，同樣是讀取GIF的寬度時(shí)，代碼可簡(jiǎn)化：
const fileDataView = new DataView(arrBuffer)let bufferIndex = 6const width = fileDataView.getUint16(bufferIndex, true)// 結(jié)果：600bufferIndex += 2const height = fileDataView.getUint16(bufferIndex, true)// 結(jié)果：600
以上代碼，很方便就得到GIF圖片的寬高數(shù)據(jù)(600)，因?yàn)槭褂昧?DataView 和它的 getUint16 方法，不需要手動(dòng)處理字節(jié)序。
getUint16方法有兩個(gè)參數(shù)：第一個(gè)參數(shù)代表字節(jié)索引；第二參數(shù)表示字節(jié)序，默認(rèn)大端序，為true則是小端序，GIF是小端，所以上面代碼為true。
除了getUint16以外，DataView 還有十多個(gè)類(lèi)似的實(shí)例方法。
DataView的get和set系列方法
get系列方法通過(guò)字節(jié)偏移索引獲取對(duì)應(yīng)的數(shù)值，其中多字節(jié)的數(shù)據(jù)，需要兩個(gè)參數(shù)：
- byteOffset：讀取時(shí)的字節(jié)偏移量
- littleEndian：字節(jié)序，默認(rèn)大端，設(shè)為true則是小端
set系列方法是和get方法對(duì)應(yīng)的，處理相應(yīng)字節(jié)偏移索引位置的數(shù)值，參數(shù)如下：
- byteOffset：讀取時(shí)的字節(jié)偏移量
- value：設(shè)置相應(yīng)類(lèi)型的數(shù)值
- littleEndian：字節(jié)序，默認(rèn)大端，設(shè)為true則是小端
Blob和ArrayBuffer
對(duì)于Blob和ArrayBuffer兩個(gè)對(duì)象，我們可以稍做總結(jié)：
- Blob是Web API，瀏覽器環(huán)境提供，讀取它可以使用FileReader、URL.createObjectURL等WebAPI；ArrayBuffer是JS語(yǔ)言?xún)?nèi)置對(duì)象，處理它則需要使用TypeArray、DataView等JS-API。
- Blob表示不可變的類(lèi)文件數(shù)據(jù)；ArrayBuffer則表示原始數(shù)據(jù)緩沖區(qū)。
- Blob用于讀取類(lèi)文件數(shù)據(jù)，不對(duì)應(yīng)內(nèi)存；ArrayBuffer用于讀取內(nèi)存數(shù)據(jù)。
- Blob和ArrayBuffer都需要通過(guò)其他對(duì)象才能操作數(shù)據(jù)。
- Blob和ArrayBuffer可以使用不同方式進(jìn)行相互之間的轉(zhuǎn)換。
- 要操作字節(jié)二進(jìn)制數(shù)據(jù)，得依賴(lài)ArrayBuffer和輔助它的操作對(duì)象。
Blob和ArrayBuffer之間的轉(zhuǎn)換：
- 使用Blob構(gòu)造函數(shù)可以讀取ArrayBuffer，生成一個(gè)新的Blob。
- 通過(guò)Blob實(shí)例的arrayBuffer()方法，可以獲取到對(duì)應(yīng)的ArrayBuffer。
- 通過(guò)FileReader對(duì)象的readAsArrayBuffer()方法，將Blob讀取為ArrayBuffer。
如下代碼，進(jìn)行二者之間的轉(zhuǎn)換：
const aBuffer = new ArrayBuffer(4)// 使用Blob構(gòu)造函數(shù)const blob = new Blob([aBuffer])// Blob的arrayBuffer()方法（promise）blob.arrayBuffer()// FileReaderconst reader = new FileReader()reader.readAsArrayBuffer(blob)
以上就是深入理解JavaScript字節(jié)二進(jìn)制知識(shí)以及相關(guān)API的詳細(xì)內(nèi)容，更多關(guān)于JavaScript字節(jié)二進(jìn)制的資料請(qǐng)關(guān)注其它相關(guān)文章！
網(wǎng)公網(wǎng)安備