Understanding Files, Blobs, ArrayBuffer, TypedArray, and DataView in JavaScript

1. Blob

Blob is an opaque reference to binary large objects; in JavaScript it represents binary data and provides only size, MIME type, and slicing operations.

1.1 Main usage

Constructor: new Blob([binaryArray], {type: "mime/type"}) . Existing instance: blob.slice(start, end) returns a new Blob. Used for large file uploads, converting to ArrayBuffer via FileReader, and creating object URLs.

2. File

File inherits from Blob and adds file name and lastModified properties, allowing safe access to system files through input elements or drag‑and‑drop.

3. Obtaining Files

Files can be obtained from the operating system via input.files or drag‑and‑drop, or fetched from the network via CDN URLs or streaming.

4. File Operations

Common operations include splitting large files for chunked upload, converting Blob to Base64 with FileReader, creating object URLs with URL.createObjectURL , and extracting the first frame of a video using a video element, canvas , and toDataURL .

5. ArrayBuffer, DataView, TypedArray

ArrayBuffer is a raw binary buffer stored in memory. TypedArray (e.g., Uint8Array, Int16Array) provides a view with fixed element type and length, offering better performance for audio/video, canvas, and network data. DataView allows reading and writing multiple numeric types on an ArrayBuffer without alignment constraints.

5.1 Example constructors

new TypedArray()
new TypedArray(length)
new TypedArray(typedArray)
new TypedArray(object)
new TypedArray(buffer)
new TypedArray(buffer, byteOffset)
new TypedArray(buffer, byteOffset, length)

When creating a TypedArray, the underlying ArrayBuffer size must be a multiple of the element size, and offsets must align to BYTES_PER_ELEMENT .

6. Summary

Typed arrays and DataView provide high‑performance, low‑memory ways to manipulate binary data in JavaScript; they are essential for tasks such as large‑file uploads, video frame extraction, and custom binary protocol handling.