Loading lesson path
Concept visual
Start at both ends
DataView Object lets you read and write multiple numeric types in an ArrayBuffer, at any byte offset, with optional control over endianness (byte order).
A DataView is a view on top of an ArrayBuffer. A DataView does not store data by itself; instead, it lets you interpret the bytes in the buffer as different types:
Formula
8 - bit, 16 - bit, 32 - bit integers (signed and unsigned)
32 - bit and 64 - bit floating point numbersYou have a binary format with fields of different types and sizes. You need to control byte order (endianness).
Float32Array are not flexible enough.
DataView when you work with binary data where you need full control over byte layout and types (for example network packets, file formats, or interoperability with other languages).
DataView, you need an ArrayBuffer. Then you pass the ArrayBuffer to the new DataView() constructor:
// Create a 16 bytes ArrayBuffer const buffer = new ArrayBuffer(16);
// Create a new DataView const view = new DataView(buffer);
// Get lengths and offset let len1 = buffer.byteLength);
let len2 = view.byteLength;
let off1 = view.byteOffset;You can also create a DataView that starts at a specific offset and has a limited length:
Starts at offset 4 with length 8:
// Create a 16 bytes ArrayBuffer const buffer = new ArrayBuffer(16);
// Create a new DataView const view = new DataView(buffer, 4, 8);
// Get lengths and offset let len1 = buffer.byteLength);
let len2 = view.byteLength;
let off1 = view.byteOffset;DataView and typed array views can share the same ArrayBuffer.
DataView uses getXxx() and setXxx() methods to read and write values: getInt8(), setInt8() getUint16(), setUint16() getInt32(), setInt32() getFloat32(), setFloat32() and more
const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);
// Write a 32-bit signed integer at byte offset 0 view.setInt32(0, 123456);
// Read it back const value = view.getInt32(0);
console.log(value); // 123456const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
view.setFloat64(0, Math.PI);
view.setFloat64(8, Math.E);
const pi = view.getFloat64(0);
const e = view.getFloat64(8);
console.log("PI:", pi);
console.log("E:", e);The first argument is always the byte offset from the start of the underlying buffer (or the byteOffset of the view). Endianness (Byte Order)
Formula
Many binary formats specify whether multi - byte numbers are stored as little - endian or big - endian.Least significant byte first (most common on PCs).
Most significant byte first (common in some protocols).
DataView numeric methods have an optional littleEndian parameter: true
Formula
= little - endian false
(or omitted) = big - endianExample: Writing with Little-Endian and Big-Endian const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);// Same number, two different byte orders:
view.setUint32(0, 0x12345678, true); // little-endian console.log(new Uint8Array(buffer));
// Example output: Uint8Array(4) [120, 86, 52, 18] (0x78, 0x56, 0x34, 0x12)
// Overwrite with big-endian view.setUint32(0, 0x12345678, false); // big-endian console.log(new Uint8Array(buffer));
// Example output: Uint8Array(4) [18, 52, 86, 120] (0x12, 0x34, 0x56, 0x78)Always check the documentation for your file format or protocol to know which endianness to use.
DataView is that you can mix different types in a single buffer. For example: 1 byte for a flag 2 bytes for a length 4 bytes for a float
Example: Mixed Types const buffer = new ArrayBuffer(12);
const view = new DataView(buffer);
// Byte 0: a flag (0 or 1)
view.setUint8(0, 1);Formula
// Bytes 1 - 2: a 16 - bit length (little - endian)view.setUint16(1, 500, true);Formula
// Bytes 4 - 11: a 64 - bit float (skip byte 3 for alignment)view.setFloat64(4, 3.14159, true);
// Read the values back const flag = view.getUint8(0);
const length = view.getUint16(1, true);
const value = view.getFloat64(4, true);
console.log("Flag:", flag);
console.log("Length:", length);
console.log("Value:", value);