How to add and remove individual bits from an ArrayBuffer in JavaScript?

Question

I know you can't really manipulate the ArrayBuffer, but perhaps using a DataView or something like that, you could solve the problem of how to build a binary string one bit at a time. My goal is to build an encoding binary string one bit at a time, how do I do that in JavaScript? Everything I've seen only goes as far down as a Uint8Array using bytes, but I want bits.

Answer 1

Error checking of any nature is left as an exercise for the reader.

 "use strict"; window.addEventListener('DOMContentLoaded', DOMContentLoaded, false); function DOMContentLoaded(evt) { let result = new bitBuffer(8); let _255 = [1,1,1,1,1,1,1,1]; let _128 = [1,0,0,0,0,0,0,0]; let _001 = [0,0,0,0,0,0,0,1]; // make 3 entries for (var i=0; i<8; i++) result.pushBit(_255[i]); for (var i=0; i<8; i++) result.pushBit(_128[i]); for (var i=0; i<8; i++) result.pushBit(_001[i]); console.log( Array.from( result.getValue() ) ); } class bitBuffer { constructor(numBytes) { this.buffer = new ArrayBuffer(numBytes); this.view = new DataView( this.buffer ); this.numBitsDone = 0; this.numBytesDone = 0; } pushBit(bitIsSet=false) { let curByte = this.view.getUint8( this.numBytesDone ); curByte <<= 1; if (bitIsSet) curByte |= 0x01; this.view.setUint8( this.numBytesDone, curByte ); this.numBitsDone++; if (this.numBitsDone == 8) { this.numBitsDone = 0; this.numBytesDone++; } } getValue() { return new Uint8Array(this.view.buffer); } }