Loading lesson path
Concept visual
Start at both ends
An ArrayBuffer is fixed a block of memory, often used to store typed arrays. On top of this block, you can create different views that interpret the bits as numbers, bytes, or other data types.
to create a new ArrayBuffer.
// Create an ArrayBuffer const myBuf = new ArrayBuffer(16);
// Get the length in bytes let len = myBuf.byteLength;The size of an ArrayBuffer is specified in bytes. The byteLength property represents the size. Once created, the size can not be changed.
The ArrayBuffer does not have methods to read and write data. You must always use a view to access the data.
DataViews provide a way to read and write numeric values to an ArrayBuffer.
Formula
Uint8Array - 8 - bit unsigned integers
Int16Array - 16 - bit signed integers
Int32Array - 32 - bit signed integers
Float32Array - 32 - bit floating point numbers
Float64Array - 64 - bit floating point numbersEach Uint8 uses 1 byte.
// Create an ArrayBuffer const myBuf = new ArrayBuffer(8);
// Create a Uint8Array view const view = new Uint8Array(myBuf);
// Write max 8 values view[0] = 10;
view[2] = 128;
view[1] = 255;
// Read values let v0 = view[0];
let v1 = view[1];
let v2 = view[2];Each Int32 uses 4 bytes.
// Create an ArrayBuffer const myBuf = new ArrayBuffer(12);
// Create an Int32Array view const view = new Int32Array(myBuf);
// 12 bytes = max 3 Int32 values view[0] = 100000;
view[1] = 200000;
view[2] = 300000;
// Read values let v0 = view[0];
let v1 = view[1];
let v2 = view[2];A DataView is a more flexible view for an ArrayBuffer. A DataView lets you read and write values of different types (Int8, Uint16, Float32, etc.). A DataView also lets you read and write values at any byte offset.
// Create an ArrayBuffer const myBuf = new ArrayBuffer(8);
// Create a DataView const view = new DataView(myBuf);
// Write a 32-bit integer at byte offset 0 view.setInt32(0, 123456);
// Write a 16-bit integer at byte offset 4 view.setInt16(4, 32000);
// Read the values let v1 view.getInt32(0);
let v2 = view.getInt16(4);Formula
DataView methods have an optional littleEndian parameter (true/false)to control the byte order.
You can make a copy of a part of an
method. It returns a new ArrayBuffer with bytes from the specified range.
Example: ArrayBuffer.slice()
// Create an ArrayBuffer const myBuf = new ArrayBuffer(8);
// Create a Uint8Array const view = new Uint8Array(myBuf);
// Fill with values 0 to 7 for (let i = 0; i < view.length; i++) {
view[i] = i;
}
// Create a copy of bytes from 2 to 5 (not including 5)
const sliced = myBuf.slice(2, 5);
const slicedView = new Uint8Array(sliced);method creates a new buffer.
method does not share memory with the original buffer.
Converting a String to an ArrayBuffer (UTF-8) function stringToArrayBuffer(str) {
const encoder = new TextEncoder();
return encoder.encode(str).buffer;
}
const myBuf = stringToArrayBuffer("Hello");
let len1 = myBuf.byteLength;Converting an ArrayBuffer to a String (UTF-8) function arrayBufferToString(buffer) {
const decoder = new TextDecoder();
return decoder.decode(new Uint8Array(buffer));
}
const encoder = new TextEncoder();
const myBuf = encoder.encode("Hello ArrayBuffer").buffer;
let text = arrayBufferToString(myBuf);
Sharing ArrayBuffer (SharedArrayBuffer)An ArrayBuffer is not shared between threads by default. To share memory between workers, JavaScript provides SharedArrayBuffer.
ArrayBuffer, but its contents can be shared and used with Atomics.
Example: Creating a SharedArrayBuffer if (Window.crossOriginIsolated) {
buffer = new SharedArrayBuffer(16);
} else {
buffer = new ArrayBuffer(16);
}
const sharedView = new Int32Array(buffer);
buffer[0] = 42;
let numb = sharedView[0];Browsers may require special security headers to enable
Formula
(COOP/COEP).