This article explains the concepts of typed array, arraybuffer, typedarray, DataView, etc

Why do I need typed arrays

JavaScript A typed array is an array like object , It also provides a mechanism for accessing raw binary data .

js Processing images 、 Audio and video editing , Usually you need to process a large amount of the same type of data , For example, the pixel data of a picture , Coordinate data, etc . Instead, use ordinary js Array , The number of stored objects can increase and decrease dynamically , And can store any JavaScript value , There may be performance problems . therefore js Typed arrays are introduced .

The creation of a typed array should specify the data type and length , So it will be much more efficient , And it doesn't support push pop Wait for the operation .

Composition of typed arrays

The type array is split into two parts ：

• buffer Buffer
• View View

Buffer by ArrayBuffer Object implementation , It describes a data block , And can't access .
If you want to access , The view is needed .
A bit like the concept of classes and objects .

buffer Buffer

Buffer by ArrayBuffer Object implementation , That is, the part framed in the above figure ,ArrayBuffer Object represents the original binary data , So how to operate the cache part ？ There are two ways ：

• Type array view
• Data view DataView

View View

Just to summarize ,TypedArray Views are used to read and write binary data of simple types ,DataView Views are used to read and write binary data of complex types .

Type array view TypedArray

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Int8Array

data type	bytes	meaning	Corresponding C Language type
Int8	1	8 Bit signed integer	signed char
Uint8	1	8 Bit unsigned integer	unsigned char
Uint8Clamped	1	8 Bit unsigned integer （ Auto filter overflow ）	unsigned char
Int16	2	16 Bit signed integer	short
Uint16	2	16 Bit unsigned integer	unsigned short
Int32	4	32 Bit signed integer	int
Uint32	4	32 Bit unsigned integer	unsigned int
Float32	4	32 Bit floating point	float
Float64	8	64 Bit floating point	double

grammar ：

new Int8Array(length);
new Int8Array(typedArray);
new Int8Array(object);
new Int8Array(buffer [, byteOffset [, length]]);

give an example ：

//  Construct objects with length parameters 
var int8 = new Int8Array(2);
int8[0] = 42;
console.log(int8[0]); // 42
console.log(int8.length); // 2
console.log(int8.BYTES_PER_ELEMENT); // 1

//  Construct an object as an array 
var arr = new Int8Array([21,31]);
console.log(arr[1]); // 31

//  Construct objects from another array 
var x = new Int8Array([21, 31]);
var y = new Int8Array(x);
console.log(y[0]); // 21

//  from  ArrayBuffer  Construction object 
var buffer = new ArrayBuffer(8);
var z = new Int8Array(buffer, 1, 4);

Data view DataView

grammar ：

new DataView(buffer [, byteOffset [, byteLength]])

byteOffset： this DataView The first byte of the object is in buffer Byte offset in . If not specified , By default, it starts from the first byte .
byteLength： this DataView Object's byte length . If not specified , The length of this view will match buffer The length of .

// create an ArrayBuffer with a size in bytes
const buffer = new ArrayBuffer(16);

// Create a couple of views
const view1 = new DataView(buffer);
const view2 = new DataView(buffer, 12, 4); //from byte 12 for the next 4 bytes
view1.setInt8(12, 42); // put 42 in slot 12

console.log(view1.getInt8(12));
console.log(view2.getInt8(0));
// expected output: 42

There are many methods provided as follows ：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView

example

Use canvas After drawing the picture , You can get every pixel of the picture rgba The data of , This data is stored in the buffer , It can be used Uint8Array To get , To be specific, see js： Use canvas Check the brightness of the picture

Reference documents

https://www.jianshu.com/p/40d4a4d133e8
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays