Frontend · JavaScript

One Block of Memory, Multiple Interpretations: JavaScript Binary Arrays Explained

By 云浪 · Jun 30, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Parsing binary formats like WAV, PNG, or protocol buffers without leaving the browser used to mean fragile string manipulation or pulling in heavy libraries. These built-in views make zero-copy binary I/O straightforward, which directly improves performance in audio/video processing, WebSocket messaging, and WebGL data pipelines.

Summary

Binary data handling in JavaScript centers on three constructs. An `ArrayBuffer` is a raw slab of memory that cannot be read or written directly. To work with it, you attach a `TypedArray` view—a fixed-type, fixed-length array-like interface that interprets the bytes as, say, 8-bit or 32-bit integers—or a `DataView`, a universal reader that can pull any numeric type from any byte offset. The real power comes from composite views: layering a `Uint8Array`, a `Uint16Array`, and a `DataView` over the same buffer lets you parse a WAV file's header as ASCII while reading its PCM samples as 16-bit integers, all from one fetch.

`TypedArray` supports most standard array methods—`map`, `filter`, `find`, `sort`—but forbids anything that changes length, like `push` or `splice`, because the underlying buffer size is fixed. `DataView` adds explicit `get`/`set` methods for every numeric type and an optional `littleEndian` flag, which matters when consuming network protocols (big-endian) or CPU-native formats (little-endian). A compact `getPlatformEndianness()` function uses a composite view to detect the host's byte order at runtime.

The mental model is one block of memory, multiple interpretations. That single idea eliminates the friction of dealing with binary file formats, WebSockets, WebGL buffers, or Web Workers transferring large typed arrays.

Takeaways

— An `ArrayBuffer` is a fixed-size chunk of raw memory with no direct read/write capability; all access goes through a view.

— `TypedArray` views interpret the buffer as a single fixed numeric type (e.g., `Uint8Array`, `Float32Array`) and support most Array methods except length-changing ones like `push` or `splice`.

— Creating a `TypedArray` from an existing `ArrayBuffer` shares memory; creating one from a plain array or another `TypedArray` copies the data.

— `DataView` provides `get`/`set` methods for every numeric type at arbitrary byte offsets, with an optional `littleEndian` parameter for multi-byte values.

— Composite views—multiple `TypedArray` and `DataView` instances over the same `ArrayBuffer`—let you parse a file header as ASCII strings while reading its body as 16-bit integers.

— A `getPlatformEndianness()` function can detect the host CPU's byte order by writing a known 32-bit value and reading its first byte through a `Uint8Array` view.

— `subarray()` creates a new view that shares the original buffer; `slice()` creates a detached copy with its own buffer.

Conclusions

The entire API is built on a single metaphor—one memory block, multiple interpretations—which makes the leap from text-based JSON to binary formats far less intimidating than it first appears.

Composite views are underused in front-end code but are the standard pattern in systems programming; adopting them for browser-side binary parsing eliminates whole classes of copy-and-convert bugs.

JavaScript's restriction that `TypedArray` views cannot change length is a feature, not a limitation: it guarantees that a view never reallocates and invalidates other views sharing the same buffer.

The `littleEndian` flag on `DataView` methods defaults to big-endian, which is the opposite of most CPU architectures; forgetting to set it to `true` is a common source of silent data corruption when reading local binary files.

Detecting platform endianness at runtime with a four-line composite view is a clean alternative to hardcoding assumptions or relying on user-agent sniffing.

Concepts & terms

ArrayBuffer

A fixed-length, raw binary data buffer in JavaScript. It cannot be read or written directly; all access must go through a TypedArray or DataView view.

TypedArray

A family of fixed-type array-like views (e.g., Uint8Array, Float32Array) that interpret an ArrayBuffer's bytes as a single numeric type. They support most Array methods but cannot change length.

DataView

A flexible view that reads and writes multiple numeric types at arbitrary byte offsets within an ArrayBuffer, with explicit control over endianness via a littleEndian flag.

Composite View

The technique of creating multiple TypedArray and/or DataView instances over the same ArrayBuffer, allowing different parts of the same memory to be interpreted as different types simultaneously.

Endianness

The byte order of multi-byte numbers. Big-endian stores the most significant byte first (network order); little-endian stores the least significant byte first (x86/ARM native order).

Source: juejin.cn ↗ Google Translate ↗ Backup ↗