由于種種原因，在瀏覽器中無法像nodejs那樣操作二進制。
最近寫了一個在瀏覽器端操作讀寫二進制的幫助類

!function (entrance) {"use strict";if ("object" === typeof exports && "undefined" !== typeof module) {module.exports = entrance();} else if ("function" === typeof define && define.amd) {define([], entrance());} else {var f;if ("undefined" !== typeof window) {f = window;} else {throw new Error('wrong execution environment');}f.TinyStream = entrance();} }(function () {var binaryPot = {/*** 初始化字節流,把-128至128的區間改為0-256的區間.便于計算* @param {Array} array 字節流數組* @return {Array} 轉化好的字節流數組*/init: function (array) {for (var i = 0; i < array.length; i++) {array[i] &= 0xff;}return array;},/*** 把一段字符串按照utf8編碼寫到緩沖區中* @param {String} str 將要寫入緩沖區的字符串* @param {Boolean} isGetBytes 是否只得到內容字節(不包括最開始的兩位占位字節)* @see https://zh.wikipedia.org/wiki/UTF-8* @return {Array} 字節流*/writeUTF: function (str, isGetBytes) {var back = [];var byteSize = 0;for (var i = 0; i < str.length; i++) {var code = str.charCodeAt(i);if (0x00 <= code && code <= 0x7f) {byteSize += 1;back.push(code);} else if (0x80 <= code && code <= 0x7ff) {byteSize += 2;back.push((192 | (31 & (code >> 6))));back.push((128 | (63 & code)))} else if ((0x800 <= code && code <= 0xd7ff) || (0xe000 <= code && code <= 0xffff)) {byteSize += 3;back.push((224 | (15 & (code >> 12))));back.push((128 | (63 & (code >> 6))));back.push((128 | (63 & code)))}}for (i = 0; i < back.length; i++) {back[i] &= 0xff;}if (isGetBytes) {return back}if (byteSize <= 0xff) {return [0, byteSize].concat(back);} else {return [byteSize >> 8, byteSize & 0xff].concat(back);}},/*** 把一串字節流按照utf8編碼讀取出來* @param arr 字節流* @returns {String} 讀取出來的字符串*/readUTF: function (arr) {if (typeof arr === 'string') {return arr;}var UTF = '', _arr = this.init(arr);for (var i = 0; i < _arr.length; i++) {var one = _arr[i].toString(2),v = one.match(/^1+?(?=0)/);if (v && one.length == 8) {var bytesLength = v[0].length,store = _arr[i].toString(2).slice(7 - bytesLength);for (var st = 1; st < bytesLength; st++) {store += _arr[st + i].toString(2).slice(2)}UTF += String.fromCharCode(parseInt(store, 2));i += bytesLength - 1} else {UTF += String.fromCharCode(_arr[i])}}return UTF},/*** 轉換成Stream對象* @param x* @returns {Stream}*/convertStream: function (x) {if (x instanceof Stream) {return x} else {return new Stream(x)}},/*** 把一段字符串轉為mqtt格式* @param str* @returns {*|Array}*/toMQttString: function (str) {return this.writeUTF(str)}};/*** 讀取指定長度的字節流到指定數組中* @param {Stream} m Stream實例* @param {number} i 讀取的長度* @param {Array} a 存入的數組* @returns {Array} 存入的數組*/function baseRead(m, i, a) {var t = a ? a : [];for (var start = 0; start < i; start++) {t[start] = m.pool[m.position++]}return t}/*** 判斷瀏覽器是否支持ArrayBuffer*/var supportArrayBuffer = (function () {return !!window.ArrayBuffer;})();/*** 字節流處理實體類* @param {String|Array} array 初始化字節流,如果是字符串則按照UTF8的格式寫入緩沖區* @constructor*/function Stream(array) {if (!(this instanceof Stream)) {return new Stream(array);}/*** 字節流緩沖區* @type {Array}*/this.pool = [];if (Object.prototype.toString.call(array) === '[object Array]') {this.pool = binaryPot.init(array);} else if (Object.prototype.toString.call(array) == "[object ArrayBuffer]") {var arr = new Int8Array(array);this.pool = binaryPot.init([].slice.call(arr));} else if (typeof array === 'string') {this.pool = binaryPot.writeUTF(array);}var self = this;//當前流執行的起始位置this.position = 0;//當前流寫入的多少字節this.writen = this.pool.length | 0;//返回當前流執行的起始位置是否已經大于整個流的長度this.check = function () {return self.position >= self.pool.length};}/*** 強制轉換為Stream對象* @param x* @returns {*|Stream}*/Stream.parse = function (x) {return binaryPot.convertStream(x);};Stream.prototype = {/*** 從緩沖區讀取4個字節的長度并轉換為int值,position往后移4位* @returns {Number} 讀取到的數字* @description 如果position大于等于緩沖區的長度則返回-1*/readInt: function () {if (this.check()) {return -1}var end = "";for (var i = 0; i < 4; i++) {end += this.pool[this.position++].toString(16)}return parseInt(end, 16);},/*** 從緩沖區讀取1個字節,position往后移1位* @returns {Number}* @description 如果position大于等于緩沖區的長度則返回-1*/readByte: function () {if (this.check()) {return -1}var val = this.pool[this.position++];if (val > 255) {val &= 255;}return val;},/*** 從緩沖區讀取1個字節,或讀取指定長度的字節到傳入的數組中,position往后移1或bytesArray.length位* @param {Array|undefined} bytesArray* @returns {Array|Number}*/read: function (bytesArray) {if (this.check()) {return -1}if (bytesArray) {return baseRead(this, bytesArray.length | 0, bytesArray)} else {return this.readByte();}},/*** 從緩沖區的position位置按UTF8的格式讀取字符串,position往后移指定的長度* @returns {String} 讀取的字符串*/readUTF: function () {var big = (this.readByte() << 8) | this.readByte();return binaryPot.readUTF(this.pool.slice(this.position, this.position += big));},/*** 把字節流寫入緩沖區,writen往后移指定的位* @param {Number|Array} _byte 寫入緩沖區的字節(流)* @returns {Array} 寫入的字節流*/write: function (_byte) {var b = _byte;if (Object.prototype.toString.call(b).toLowerCase() == "[object array]") {[].push.apply(this.pool, b);this.writen += b.length;} else {if (+b == b) {if (b > 255) {b &= 255;}this.pool.push(b);this.writen++}}return b},/*** 把參數當成char類型寫入緩沖區,writen往后移2位* @param {Number} v 寫入緩沖區的字節*/writeChar: function (v) {if (+v != v) {throw new Error("writeChar:arguments type is error")}this.write((v >> 8) & 255);this.write(v & 255);this.writen += 2},/*** 把字符串按照UTF8的格式寫入緩沖區,writen往后移指定的位* @param {String} str 字符串* @return {Array} 緩沖區*/writeUTF: function (str) {var val = binaryPot.writeUTF(str);[].push.apply(this.pool, val);this.writen += val.length;},/*** 把緩沖區字節流的格式從0至256的區間改為-128至128的區間* @returns {Array} 轉換后的字節流*/toComplements: function () {var _tPool = this.pool;for (var i = 0; i < _tPool.length; i++) {if (_tPool[i] > 128) {_tPool[i] -= 256}}return _tPool},/*** 獲取整個緩沖區的字節* @param {Boolean} isCom 是否轉換字節流區間* @returns {Array} 轉換后的緩沖區*/getBytesArray: function (isCom) {if (isCom) {return this.toComplements()}return this.pool},/*** 把緩沖區的字節流轉換為ArrayBuffer* @returns {ArrayBuffer}* @throw {Error} 不支持ArrayBuffer*/toArrayBuffer: function () {if (supportArrayBuffer) {return new ArrayBuffer(this.getBytesArray());} else {throw new Error('not support arraybuffer');}},clear: function () {this.pool = [];this.writen = this.position = 0;}};return Stream; });

如何使用？

<script src="binary.js"></script> <script>var ts = TinyStream('我叫張亞濤');ts.writeUTF('你好');console.log('獲取緩沖區字節流:',ts.getBytesArray());console.log('當前的緩沖區position為:',ts.position,'writen為:',ts.writen);console.log('讀取第一個utf8字節流:',ts.readUTF());console.log('當前的緩沖區position為:',ts.position,'writen為:',ts.writen);console.log('讀取第二個utf8字節流:',ts.readUTF());console.log('當前的緩沖區position為:',ts.position,'writen為:',ts.writen); </script>

以后，我可以不用為瀏覽器段處理二進制而發愁了！！！

轉載于:https://www.cnblogs.com/doublenet/p/4932672.html

總結

以上是生活随笔為你收集整理的前端javascript实现二进制读写操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。