Since 2015, JavaScript has improved immensely.
It’s much more pleasant to use it now than ever.
In this article, we’ll look at JavaScript typed arrays usage.
Static Typed Array Properties
Typed arrays have the BYTES_PER_ELEMENT property to count how many bytes are needed to store a single element.
The same property is also available in the typed array’s prototype.
Concatenating Typed Arrays
Typed arrays don’t have a concat method like normal arrays.
We can use the set method with a typed array as the first argument and the offset index as the 2nd argument.
For example, we can write:
const arr = Int8Array.of(1, 2, 3);
const arr2 = Int8Array.of(4, 5, 6);
const arrays = [arr, arr2];
let totalLength = 0;
for (const arr of arrays) {
totalLength += arr.length;
}
const result = new Int8Array(totalLength);
let offset = 0;
for (const arr of arrays) {
result.set(arr, offset);
offset += arr.length;
}
console.log(result);
to create a new result typed array with the length being the total length of all the arrays.
Then we can add each typed array’s entry to the result typed array with the set method.
And we update the offet after each array to add the entries.
DataViews
The DataView constructor lets us create a DataView whose data is stored in a given ArrayBuffer.
Its signature is (buffer, byteOffset, byteLength) .
buffer is the buffer object.
byteOffset is the offset of the buffer in bytes,
byteLength is the length the DataView in bytes.
DataView Instance Properties
DataView has the following instance properties.
The DataView.prototype.buffer is a getter than returns the ArrayBuffer for the DataView.
DataView.prototype.length returns how many bytes can be accessed by the DataView.
DataView.prototype.byteOffset returns the offset of which DataView starts accessing the bytes in its buffer.
DataView.prototype.get returns a value from the buffer of the DataView.
It takes the byte offset to start accessing the array as its first argument.
The 2nd argument is whether to set littleEndian to be true or not.
It’s false by default.
DataView.prototype.set lets us writes a value to the buffer of the DataView.
Its signature is (byteOffset, value, littleEndian=false) , byteOffset is the offset to start writing.
value us the value to write.
littleEndian lets us set the endianness of our DataView.
Typed Arrays Usage
Typed aerays are used in various places.
The File API uses it to store file data ready from a file input.
For example, we can get a typed array by writing:
const fileInput = document.getElementById('fileInput');
fileInput.onchange = () => {
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function() {
const arrayBuffer = reader.result;
//...
};
}
We get the file object with fileInput.files[0] .
Then we used the FileReader instance’s readAsArrayBuffer function to read the file’s contents into the array buffer.
reader.result has the result.
Fetch API
The Fetch API also lets us get data as an ArrayBuffer.
For instance, we can write:
fetch('https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf')
.then(request => request.arrayBuffer())
.then(arrayBuffer => {
console.log(arrayBuffer);
});
to get a PDF files from a URL and convert it to an ArrayBuffer with the arrayBuffer method on the result.
Other APIs that use typed arrays include canvas and WebSockets.
Conclusion
Typed arrays can be manipulated like arrays.
They’re used in many native browser APIs.
