這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中怎么對(duì)二進(jìn)制進(jìn)行操作，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括柯坪網(wǎng)站建設(shè)、柯坪網(wǎng)站制作、柯坪網(wǎng)頁(yè)制作以及柯坪網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，柯坪網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到柯坪省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

二進(jìn)制數(shù)據(jù)在JS程序里的表達(dá)

現(xiàn)今世界上幾乎所有的計(jì)算機(jī)體系結(jié)構(gòu)都是以字節(jié)(byte)為二進(jìn)制數(shù)據(jù)的基本單位(注：不是說(shuō)最小單位)，所以二進(jìn)制常常以字節(jié)數(shù)組的形式存在于程序當(dāng)中。例如在C#里面，就用byte[]，標(biāo)準(zhǔn)C里面沒(méi)有byte類型，但可以通過(guò)typedef把byte定義為unsigned  char的別名，效果是一樣的。

JS設(shè)計(jì)之初似乎根本沒(méi)想過(guò)要處理二進(jìn)制的東西，加上對(duì)類型的極度弱化，對(duì)于字節(jié)的概念可以說(shuō)是非常非常的模糊。如果要表達(dá)字節(jié)數(shù)組，那么似乎只能用一個(gè)普通數(shù)組來(lái)表示。

HTML5體系引入了一大堆新的東西，比如XHR2，是可以上傳或下載二進(jìn)制內(nèi)容的，與之配套的東西就是JS里的ArrayBuffer和Typed  Array了。

ArrayBuffer是一個(gè)固定長(zhǎng)度的字節(jié)序列，你可以通過(guò)new  ArrayBuffer(length)來(lái)得到一片空間，或者用下文將會(huì)介紹的方法從XHR2等途徑獲取。由于內(nèi)部實(shí)現(xiàn)與數(shù)組不一樣，ArrayBuffer通常都是連續(xù)內(nèi)存(注意，這只是經(jīng)驗(yàn)之談，并不是規(guī)范也不是文檔所明確的)，因此對(duì)于高密度的訪問(wèn)操作而言它比JS中的Array速度會(huì)快很多(但并不要用它來(lái)簡(jiǎn)單地代替Array)。如果用Chrome的Profile工具查看Heap  Snapshot，會(huì)發(fā)現(xiàn)ArrayBuffer會(huì)被單獨(dú)列為一類，也許它的內(nèi)存分配和布局與Array以及其他JS對(duì)象有一些差別吧。

ArrayBuffer是不能直接被訪問(wèn)的，因此需要借助Typed Array。Typed  Array是一組具體數(shù)據(jù)類型的Array-Like類型的統(tǒng)稱，包括

• Int8Array 8位有符號(hào)整數(shù)，類似于C里面的char

• Uint8Array 8位無(wú)符號(hào)整數(shù)，類似于C里面的unsigned char

• Uint8ClampedArray 8位無(wú)符號(hào)整數(shù)，跟Uint8類似，但在溢出處理上不大一樣

• Int16Array 后面這些類型就不羅嗦了

• Uint16Array

• Int32Array

• Uint32Array

• Float32Array

• Float64Array

Typed Array的背后是一個(gè)ArrayBuffer，也就是說(shuō)，事實(shí)上的數(shù)據(jù)是存在ArrayBuffer里面的，而Typed  Array只是給你提供了一個(gè)某種類型的讀寫接口，用MDN的話說(shuō)，叫做

Multiple views on the same data

舉個(gè)栗子，如果我們有一個(gè)ArrayBuffer名為buffer(先不考慮怎么構(gòu)造這個(gè)測(cè)試數(shù)據(jù))，內(nèi)容如下：

01 02 03 04 05 06 07 08

也就是說(shuō)它有8個(gè)字節(jié)，我們分別用它來(lái)構(gòu)造Uint8Array, Uint16Array, Uint32Array，則可以得到

var u8 = new Uint8Array(buffer); // length為8  var u16 = new Uint16Array(buffer); // length為4  var u32 = new Uint32Array(buffer); // length為2

它們的內(nèi)容分別為

[1, 2, 3, 4, 5, 6, 7, 8]  [513, 1027, 1541, 2055]  [67305985, 134678021]

這不難理解。

可以看出，如果要手工構(gòu)造上面的測(cè)試數(shù)據(jù)ArrayBuffer，用Uint8Array就會(huì)很方便(呃事實(shí)上這是我個(gè)人最常用的一種Typed  Array)。

而如果用同樣的ArrayBuffer構(gòu)建帶符號(hào)整數(shù)類型，則可能因?yàn)檎麛?shù)溢出而得到不同的結(jié)果，上面的例子并沒(méi)有碰到，有興趣的話可以自己試試。因此使用Typed  Array也可以用來(lái)做有符號(hào)數(shù)和無(wú)符號(hào)數(shù)的轉(zhuǎn)換。

如果你用過(guò)canvas的getImageData/putImageData的話，會(huì)發(fā)現(xiàn)它給你的就是一個(gè)Uint8ClampedArray，這東西訪問(wèn)起來(lái)速度比JS的原生Array快很多，使得對(duì)canvas進(jìn)行高速的像素操作成為可能。

然而最最重要的一個(gè)概念還是：Typed Array不直接存放任何數(shù)據(jù)，所有對(duì)Typed  Array進(jìn)行讀寫的操作，最終都會(huì)落實(shí)到它背后所持有的ArrayBuffer的身上。ArrayBuffer才是真正的raw bytes，而Typed  Array只是一個(gè)操作窗口/操作視圖(View)。

獲取二進(jìn)制數(shù)據(jù)

nodejs那邊先按住不表，這里談?wù)勗诰W(wǎng)頁(yè)里如何獲取二進(jìn)制數(shù)據(jù)?常見(jiàn)的辦法有3種，1是通過(guò)XMLHttpRequest  2，2是通過(guò)File和Blob一套相關(guān)接口。

通過(guò)XMLHttpRequest 2

XHR2的接口跟XHR幾乎是一樣的，當(dāng)制定xhr.responseType =  'arraybuffer'以后，在成功獲取數(shù)據(jù)的回調(diào)里就可以通過(guò)xhr.response來(lái)得到請(qǐng)求結(jié)果的ArrayBuffer了，然后就可以按照你的意愿來(lái)構(gòu)造各種Typed  Array進(jìn)行訪問(wèn)。

responseType還可以有blob取值，可以用xhr.response獲得Blob對(duì)象。

通過(guò)File和Blob

在HTML5中提供了對(duì)表單的文件控件<input type="file"  />更豐富的操作，可以通過(guò)inputDOM對(duì)象的.files來(lái)獲取一個(gè)FileList，當(dāng)然通常瀏覽器都只提供了單選的文件控件，于是這里都只會(huì)有一個(gè)File對(duì)象。另外，通過(guò)拖拽、剪貼板等方式也能獲取到File或者Blob。

File繼承了Blob，并提供了name, lastModifiedDate等基礎(chǔ)元數(shù)據(jù)，但是依然是一個(gè)深度封裝，不能直接獲取到它的二進(jìn)制。

Blob是Binary large object的縮寫，它與ArrayBuffer的區(qū)別是除了raw bytes以外它還提供了mime  type作為元數(shù)據(jù)。但它依然是無(wú)法直接被讀寫的。

這時(shí)候需要借助FileReader的幫忙。FileReader提供了一組用來(lái)將Blob讀取為更為實(shí)用的類型的方法

readAsArrayBuffer()  readAsBinaryString()  readAsDataURL()  readAsText()

例如

var file = get_file_some_how();  var fr = new FileReader();  fr.onload = function(e) {  e.target.result; // 讀取的結(jié)果  };  fr.readAsDataUrl(file); // readAsArrayBuffer

可以干什么呢?例如圖片上傳之前的本地預(yù)覽(甚至基于canvas的編輯)等等都可以實(shí)現(xiàn)了。

Blob的其他構(gòu)造方法多而雜，這里就先不到處搬運(yùn)文檔了。

消費(fèi)二進(jìn)制數(shù)據(jù)

何謂消費(fèi)?最常見(jiàn)的方式也許就是通過(guò)XHR2直接把二進(jìn)制數(shù)據(jù)以文件方式POST到服務(wù)端去。

這里我比較推薦使用FormData來(lái)構(gòu)造POST數(shù)據(jù)。因?yàn)樵诜?wù)端收的時(shí)候會(huì)比較容易一些，具體有興趣可以去找找別人的例子。

雖然直接提交ArrayBuffer也是可以的，但是這種時(shí)候服務(wù)端收到的POST  body會(huì)是一大團(tuán)，用起來(lái)不方便。如果要使用FormData來(lái)提交ArrayBuffer，需要先將其構(gòu)造成Blob。

對(duì)Typed Array的構(gòu)造留個(gè)心眼

當(dāng)使用new xxxxxArray(arrayBuffer)這個(gè)重載進(jìn)行構(gòu)造的時(shí)候，它會(huì)默認(rèn)基于此ArrayBuffer進(jìn)行構(gòu)造。但當(dāng)使用new  xxxxArray(another_typed_array)這個(gè)重載的時(shí)候，則是進(jìn)行“拷貝構(gòu)造”，這樣兩個(gè)Typed  Array會(huì)指向不同的buffer，需要注意這是否符合預(yù)期。

如果需要基于同一個(gè)ArrayBuffer來(lái)構(gòu)造Typed Array，可以使用Typed Array的buffer,  byteLength,byteOffset來(lái)獲取它背后的ArrayBuffer。

Tips(坑)

對(duì)內(nèi)存對(duì)齊留個(gè)心眼

當(dāng)使用ArrayBuffer來(lái)構(gòu)造Typed Array的時(shí)候，可以指定byteOffset參數(shù)，例如

var buffer = get_array_buffer_some_how();  var i16 = new Int16Array(buffer, 10);

上面的代碼就能以buffer向后偏移10字節(jié)處為起點(diǎn)來(lái)構(gòu)造Int16Array，但是如果將10設(shè)置為一個(gè)奇數(shù)，會(huì)發(fā)現(xiàn)如下錯(cuò)誤：

RangeError: start offset of Int16Array should be a multiple of 2

這是因?yàn)門yped  Array對(duì)內(nèi)存對(duì)齊有要求，它不能在非對(duì)齊的位置建立，同理，Uint32Array和Int32Array則要求偏移量是4字節(jié)對(duì)齊的。

因此如果你希望在非對(duì)齊的位置進(jìn)行讀寫，則需要借助DataView的幫忙。

對(duì)字節(jié)序留個(gè)心眼

我們?nèi)粘Ｖ兴鶎懙某绦?，幾乎都不需要關(guān)心字節(jié)序，因此這個(gè)問(wèn)題沒(méi)那么嚴(yán)重，知道自己的程序會(huì)有字節(jié)序問(wèn)題的人，開發(fā)到這里也肯定會(huì)知道問(wèn)題的存在，但這里還是稍微提一下。

按照MDN的說(shuō)法，Typed  Array只會(huì)使用當(dāng)前平臺(tái)的字節(jié)序，例如我們現(xiàn)在用的桌面電腦不論P(yáng)C還是Mac都是x86/x64的，也就是little-endian了。

使用DataView，不僅可以解決上面說(shuō)到的內(nèi)存對(duì)齊的問(wèn)題，還可以指定讀寫時(shí)的字節(jié)序，具體參數(shù)都在文檔里面了，就不搬運(yùn)了。

使用DataView配合Typed Array也可以做到一個(gè)檢測(cè)當(dāng)前平臺(tái)字節(jié)序的技巧：

function isLittleEndian() {  var buf = new ArrayBuffer(2);  var view = new DataView(buf);  view.setInt16(0, 256, true);//顯式以little endian寫入數(shù)據(jù)  // 此時(shí)buf里的內(nèi)存布局應(yīng)該是 00 01   var i16 = new Int16Array(buf);  // 如果以little endian讀取，它就是256；以big endian讀取，則是1  return (i16[0] === 256);  }

關(guān)于JavaScript中怎么對(duì)二進(jìn)制進(jìn)行操作就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享標(biāo)題：JavaScript中怎么對(duì)二進(jìn)制進(jìn)行操作
網(wǎng)頁(yè)網(wǎng)址：http://aaarwkj.com/article36/gdsspg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、定制開發(fā)、手機(jī)網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)