HTML5 Type array Typearray (i)

1. Origins

Typedarray is a generic fixed-length buffer type that allows the reading of binary data in a buffer.

It is introduced in the WEBGL specification to solve the problem of JavaScript processing binary data.

Typedarray is already supported by most modern browsers (IE9 and the following browsers are not supported ), for example, you can create Typedarray in the following ways:

//Create a 8-byte arraybuffer IE9 and the following browsers, do not support Arraybuffervarb =NewArrayBuffer (8);//Create a reference to B, the type is Uint8, in fact position at 0, end position is buffer tailvarV1 =NewUint8array (b);//Create a reference to B, the type is Int32, in fact position at 4, end position is buffer tailvarV2 =NewInt32array (b, 4);//Create a reference to B, the type is Int16, in fact the position is 2, the total length is 2varV3 =NewInt16array (b, 2, 2); Console.info (b); //ArrayBuffer {}Console.info (v1);//[0, 0, 0, 0, 0, 0, 0, 0]Console.info (v2);//[0]Console.info (v3);//[0, 0]

The reference layout that is buffered and created is:

variables	Index
	Number of bytes
b =	0	1	2	3	4	5	6	7
	Number of indexes
V1 =	0				1
V2 =			0	1	2	3	4	5
V3 =			0		1

This means that the No. 0 element of the V1 array of type Int32 is the 第0-3个 byte of the Arraybuffer type B, and so on.

2. Constructors

Above we create the Typedarray through Arraybuffer, and in fact, Typedarray provides 3 constructors to create his instance.

constructor function
TypedArray (unsigned long length) Creates a new typedarray,length that is its fixed length.
TypedArray ( TypedArray Array) TypedArray ( type[] array) Creates a new Typedarray, each of which is initialized according to an array, and the elements are cast in the appropriate type.
TypedArray (ArrayBuffer buffer, optional unsigned long byteoffset, optional unsigned long length) Creates a new typedarray that acts as a reference to the buffer, byteoffset its starting offset, and length is the size.

So usually we create typedarray in the following way:

var New // Initializes an empty array with a default value of 0

Or:

var New Uint8array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

3. Data Manipulation

Typedarray provides setter, getter, set, and Subarray four methods for data manipulation.

Method
Getter type get (unsigned long index) Returns the element of the specified index.
setter void set (unsigned long index, type value) Sets the element of the specified index to the specified value.
void Set( TypedArray array, optional unsigned long offset) void Set( type[] array, optional unsigned long offset) Based on the array setting, offset is the offset position.
TypedArray Subarray (long begin, Optional Long end) Returns a new Typedarray that begins with a begin and ends with an end bit.

code example:

varArray =NewUint8array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); console.info (array); //[1, 2, 3, 4, 5, 6, 7, 8, 9, ten]//get ElementConsole.info (Array[4]);//5//Set ElementARRAY[4] = 12; Console.info (array[4]);// A//get a new TypearrayvarArray2 = Array.subarray (0);varArray3 = Array.subarray (1, 3); Console.info (array2);//[1, 2, 3, 4, A, 6, 7, 8, 9, ten]Console.info (ARRAY3);//[2, 3]//sets the collection content, specifying the offsetArray3.set (NewUint8array ([0],0) ); Console.info (ARRAY3); //[0, 3]

4. Array type

type	size	Description	Web IDL Type	type C
Int8Array	1	8-bit signed integer	byte	signed char
Uint8Array	1	8-bit unsigned integer	octet	unsigned char
Uint8ClampedArray	1	8-bit unsigned integer (clamped)	octet	unsigned char
Int16Array	2	16-bit signed integer	short	short
Uint16Array	2	16-bit unsigned integer	unsigned short	unsigned short
Int32Array	4	32-bit signed integer	long	int
Uint32Array	4	32-bit unsigned integer	unsigned long	unsigned int
Float32Array	4	32-bit IEEE floating-point number	unrestricted float	float
Float64Array	8	64-bit IEEE floating-point number	unrestricted double	double

You may find it familiar to play canvas.

because the array used to store image data in ImageData is of type Uint8clampedarray .

var canvas = document.getElementById (' canvas1 '); var context = Canvas.getcontext (' 2d '= ' red '; Context.fillrect (0, 0, Canvas.width, Canvas.height); // var imageData = context.createimagedata (100, 100);//Create Empty data Uint8clampedarray var imageData = context.getimagedata (0, 0, 100, 100); // get the picture data in the online article Uint8clampedarray // ImageData {data:uint8clampedarray[40000]}

Why do you use Typedarray

We know that the number in JavaScript is 64-bit floating point. For a binary picture (the picture each pixel is stored in a 8-bit unsigned integer), if you want to use its data in a JavaScript array, the equivalent of using 8 times times the memory of the image to store a picture of the data, which is obviously unscientific. And Typedarray can help us use only 1/8 of the original memory to store image data.

Or for WebSocket, if transferring with Base64 is also a costly way, it might be better to switch to binary delivery.

Of course, there are more advantages to typedarray, such as better performance.

Transferred from: http://www.cnblogs.com/justany/archive/2012/12/21/2827879.html

HTML5 Type array Typearray (i)