background

Having to deal with binary strings, I got into ArrayBuffer and did some research on TypedArray and DataView.

ArrayBuffer (Array cache)

Arraybuffers are designed to process binary data streams, but JS has no way to directly process (read and write) their contents, so TypedArray is needed.

Initialize an object

new ArrayBuffer(length)
Copy the code

Length: Size, in bytes, of the ArrayBuffer to be created.

Application scenarios

  • Websocket
  • Ajax/Fetch
  • Canvas
  • Reading local files
  • Decode/encode base64, calculate file MD5

TypedArray (TypedArray)

TypedArray is an array-like view that describes an ArrayBuffer. Although there is no global TypedArray property and constructor, Instead, it provides a series of arrays based on its specific data type (read: TypedArray is interface and they extend classes). TypedArray has an Array of methods and attributes and operations. The only difference is that the type of the element is specified. When an element is assigned a value of a different type and the conversion fails, the assignment failure is set to 0.

  • Int8Array
  • Uint8Array
  • Uint8ClampedArray
  • Int16Array
  • Uint16Array
  • Int32Array
  • Uint32Array
  • Float32Array
  • Float64Array

Initialize an object

new TypedArray(); // new in ES2017
new TypedArray(length);
new TypedArray(typedArray);
new TypedArray(object);
new TypedArray(buffer [, byteOffset [, length]]);
Copy the code

Length: The length of the array to be created. The number of bytes is equal to the length multiplied by the array property BYTES_PER_ELEMENT (which depends on the array type, for example, Int8Array has 1 byte and Float32Array has 4 bytes).

TypedArray: Converts each element of another typedArray object to the type of the new typedArray object

Object: Converts an array-like object (array or iterator) into a typedArray object

Buffer: An ArrayBuffer object. An error is reported if the byte length of the ArrayBuffer object is not divisible from the byte queue of the individual elements of this TypedArray

ByteOffset: Specifies the starting position (in bytes) in the ArrayBuffer object that is exposed to typedArray.

Length: Specifies the number of bytes in the ArrayBuffer object that are exposed to typedArray

DataView

DataView is a view object that is more flexible than TypedArray and closer to the underlying manipulation of binary data.

Initialize an object

new DataView(buffer [, byteOffset [, byteLength]])
Copy the code

Buffer: ArrayBuffer object

ByteOffset: Specifies the starting position (in bytes) in the ArrayBuffer object that is exposed to typedArray.

ByteLength: Specifies the number of bytes in an ArrayBuffer object that are exposed to typedArray

The Read/Write method is commonly used

  • getInt8/setInt8
  • getUint8/setUint8
  • getInt16/setInt16
  • getUint16/setUint16
  • getInt32/setInt32
  • getUint32/setUint32
  • getFloat32/setFloat32
  • getFloat64/setFloat64

The Read method, which contains byteOffset, the Read position, in bytes; Methods other than Int8 and Uint8 also take the optional littleEndian argument, true for small endian and false for big endian if no parameter is passed.

Write methods, both containing the byteOffset argument, indicating the Write position, in bytes; The value argument represents the value to be set; Methods other than Int8 and Uint8 also take the optional littleEndian argument, true for small endian and false for big endian if no parameter is passed.

About Endian

The order in which successive bytecodes are stored in memory (so 1-byte variables do not have endian problems). Among them,

  • Big-endian sequence: Saves the high order first
  • Small endian: stores the low bits first

It is important to note that the storage order varies from machine to machine, and TypedArray is the storage order that uses the current runtime environment.

Browser support

The three classes described above provide TOOLS and interfaces for JS to manipulate underlying data that have been lacking, enabling JS to play a role in more business scenarios.

Here’s how the major PC and mobile browsers are compatible. In general, most modern browsers already support this new feature.

The resources

MDN-ArrayBuffer

MDN-TypedArray

MDN-DataView

Wikipedia – Bytes (Endianness)