How to store a byte array in Javascript

javascript arrays html bytearray byte

130,947

Solution 1

By using typed arrays, you can store arrays of these types:

Type	Value Range	Size(bytes)
`Int8Array`	-128 to 127	1
`Uint8Array`	0 to 255	1
`Uint8ClampedArray`	0 to 255	1
`Int16Array`	-32768 to 32767	2
`Uint16Array`	0 to 65535	2
`Int32Array`	-2147483648 to 2147483647	4
`Uint32Array`	0 to 4294967295	4
`Float32Array`	-3.4E38 to 3.4E38	4
`Float64Array`	-1.8E308 to 1.8E308	8
`BigInt64Array`	-2^63 to 2^63 - 1	8
`BigUint64Array`	0 to 2^64 - 1	8

Demo in Stack Snippets & JSFiddle

var array = new Uint8Array(100);
array[42] = 10;
console.log(array[42]);

Solution 2

var array = new Uint8Array(100);    
array[10] = 256;
array[10] === 0 // true

I verified in firefox and chrome, its really an array of bytes :

var array = new Uint8Array(1024*1024*50);  // allocates 50MBytes

Solution 3

You could store the data in an array of strings of some large fixed size. It should be efficient to access any particular character in that array of strings, and to treat that character as a byte.

It would be interesting to see the operations you want to support, perhaps expressed as an interface, to make the question more concrete.

130,947

Kendall Frey

I am primarily a C# programmer, but also use JavaScript, and some other languages in my spare time. Website: http://kendallfrey.com

Updated on July 05, 2022

Comments

Kendall Frey almost 2 years

I'm going to be storing a large array of byte values (most likely over a million) in Javascript. If I use a normal array with normal numbers, that will take 8 MB, because numbers are stored as IEEE doubles, but if I can store it as bytes, it will be only 1 MB.

I'd like to avoid wasting that much space for obvious reasons. Is there a way to store bytes as bytes instead of doubles? Browser compatibility isn't an issue for me, as long as it works in Chrome. This is in HTML5, if that makes a difference.
- Pointy almost 12 years
  
  Typed arrays.
- Gyan Chandra Srivastava almost 12 years
  
  stackoverflow.com/questions/5612637/… and siphon9.net/loune/2011/05/… these links may help you
- naveen almost 12 years
  
  @Pointy: typed array for bytes? khronos.org/registry/typedarray/specs/latest/#7 could you please elaborate? i would like to understand that
- HoLyVieR almost 12 years
  
  @naveen Type array for bytes (8 bits) is Int8Array or Uint8Array depending on whether you want you byte to be signed or not.
- Spudley almost 12 years
  
  Re: "as long as it works in Chrome" -- I'm tempted to give you a -1 for that (I haven't but I'm tempted), because that's the same attitude that left us with a legacy of sites that only work in IE6. If what you want can only be done in Chrome, then so be it, but don't limit your site. There are several browsers out there, and they all work with HTML5. Write your site for as broad an audience as possible.
- Kendall Frey almost 12 years
  
  @Spudley It's not intended to be a public site. It's written for an audience of just me.
Robbie Wxyz over 10 years

Yes! That cut the time generating an array of 800,000+ elements from 2.4 seconds to 0.12 seconds. Using Float32Array makes an amazing difference!
1.21 gigawatts over 8 years

How does 256 === 0? Shouldn't it be 256?
gsempe over 8 years

As array is an array of uint8, 256 overflows a byte and makes the value equals to 0
Reahreic over 3 years

I'm having issues converting a Blob that's returned by a fetch() promise to a C# byte[]. Do you have any wisdom on what approach I should take.