The JavaScript array you don't know

The JavaScript array you don't know

Believe that every JavaScript learner, will be to understand the various basic JS data types, arrays is a combination of data, this is a very basic and very simple concept, his content is not much, learn it is not a difficult thing. But this article is important to introduce is not the usual Array we see, but ArrayBuffer.

I write a lot of things because to complete some specific functions and deliberately summed up, can be considered a memo, this article is so! The previous time has been studying the WEB audio API and the knowledge of voice communication, the content is focused on the flow of audio streams in the audiocontext between the various nodes, and now to understand the audio to the stream bottom is what kind of data format, so the ArrayBuffer 's research is particularly important.

One, the Array in memory of the stack model 1. Get of Array

How to produce an Array in Javascript:

[Element0, Element1, ..., elementn]new array (element0, element1, ..., elementn) New Array (Arraylength)

A direct definition, or an Array created from a constructor, can of course use other means:

"Array". Split (""); Array ". Match (/a|r/g);

Wait, there are many ways. But what kind of structure is inside the Array, I'm afraid many people are not very clear.

2. Stack model

In the array we can put many different data types of data, such as:

var arr = [21, "Li Jing", New Date (), function () {},, NULL];

The above array is once put in numbers, strings, objects, functions, undefined, and null, for the above data interface we can have an image of the description:

    Stack +---------+                  Heap |    |         +-------------------++---------+         |                   ||  " Li Jing "|         |                   | +---------+         |  +--------+       || [Refer] |----------->| Object |       | +---------+         |  +--------+       || [Refer] |----------------->+--------+ |+---------+         |        | function| | | undefined|         |        +--------+ |+---------+         |                   ||   Null  |         +-------------------+ +---------+         Created by Barret Lee

JavaScript has two types of data, one is a value type, one is a reference type, a common reference type is an Object and an array, and in the storage model of an array, value type data, such as number, String, is pushed directly into the stack. Whereas a reference type only presses an index on that value, the concept of C is used to interpret a pointer that holds only the data, which is stored in a block of the heap. Stacks are not independent, and stacks can be stored in the heap.

Well, the description of the Array is here, the following specific knowledge of ArrayBuffer.

Second, ArrayBuffer

The web is a thing, what is the most basic question of the Web to discuss? I think there are two points, one is the data, one is the data transmission, as for the display of information, complex, this should be the web top of things. The ArrayBuffer to be discussed in this paper is the most basic data type, not even a data type, it is a data container that needs to be read and written by other means.

Definition of Official point:

The ArrayBuffer is a data type, which is used to represent a generic, fixed-length binary data buffer. You can ' t directly manipulate the contents of an ArrayBuffer; Instead, you create an Arraybufferview object which represents the buffer with a specific format, and use this to read and W Rite the contents of the buffer.

Represents the raw buffer for binary data, which is used to store data for various typed arrays. ArrayBuffer cannot be read or written directly, but can be passed to a typed array or DataView object as needed to interpret the original buffer.

He is a primitive buffer of binary data, although JavaScript is a weakly typed language, but he is inherently limited in the type and size of the data, we need a data structure to read the contents of the buffer in an orderly way (write it in).

1. Creation of the original buffer

You can create a raw buffer by ArrayBuffer this constructor:

var buffer  = new ArrayBuffer (30);

From the chrome console you can see:

The buffer instance has a ByteLength property that gets the size of buffer, a slice method supported only by ie11+ and ios6+, to intercept the buffer length.

ArrayBuffer Slice (    unsigned long begin    unsigned long end Optional);

You can test this DEMO:

var buffer = new ArrayBuffer, var x = new Int32array (buffer), x[1] = 1234;var slice = Buffer.slice (4), var y = new int32a Rray (slice); Console.log (x[1]); Console.log (Y[0]); x[1] = 6789;console.log (x[1]); Console.log (Y[0]);

Run code2. Typed arrays

Typed array types represent various views of ArrayBuffer objects that can be indexed and manipulated. All array types are fixed in length.

name	size (in bytes)	Description
Int8array	1	8-bit, two-complement signed integer
Uint8array	1	8-bit unsigned integer
Int16array	2	16-bit, two-complement signed integer
Uint16array	2	16-bit unsigned integer
Int32array	4	32-bit, two-complement signed integer
Uint32array	4	32-bit unsigned integer
Float32array	4	32-bit IEEE floating-point number
Float64array	8	64-bit IEEE floating-point number

Int is the integer type, Uint is unsigned, float is floating point, these are the basic concepts in C, and I don't explain it specifically. Because these views are similar in structure, this article only describes the Float32array type, and the reader can extrapolate.

Float32array is very similar to Array, except that each of his elements is a 32-bit (4-byte) floating-point data. Float32array cannot be modified once its size is created.

We can create a Float32array directly:

var x = new Float32array (2); x[0] = 17;console.log (x[0]); 17console.log (x[1]); 0console.log (x.length); 2

Run code

There needs to be a notion that he is still an array, except that each element in the array is a Float 32-bit data type, such as:

var x = new Float32array ([ -45.3]); Console.log (x[0]);  17console.log (x[1]);  -45.29999923706055console.log (x.length); 2

Run code

We assign the value of an array directly to the X-Float32array object, then convert it to a 32-bit floating-point number before storing it.

Because each element of the array is of the same type, in the stack model they are all pushed into the stack, so the typed array is a value type and he is not a reference type! This is to be noticed, which can be reflected in the following example:

var x = new Float32array ([ -45.3]), var y = new Float32array (x), Console.log (X[0]); 17console.log (x[1]); -45.29999923706055console.log (x.length); 2x[0] = -2;console.log (y[0]); The value of Y has not changed.

Run code

Copy the value of x to Y, modify x[0], y[0] does not change.

In addition to the way above, we can create a typed array in other ways:

var buffer = new ArrayBuffer, var x = new Float32array (buffer, 0, 2), var y = new Float32array (buffer, 4, 1); x[1] = 7;co Nsole.log (Y[0]); 7

Run code

Explain why this returns 7.

       ArrayBuffer (12) +-+-+-+-+-+-+-+-+-+-+-+-+-+|0|1|2|3|4|5|6|7|8| | | | |+-+-+-+-+-+-+-+-+-+-+-+-+-+\              /             x (float32array)  offset:0  bytelength:4  length:2

       ArrayBuffer (12) +-+-+-+-+-+-+-+-+-+-+-+-+-+|0|1|2|3|4|5|6|7|8| | | | |+-+-+-+-+-+-+-+-+-+-+-+-+-+        \       /                        y      Created by Barret Lee

Do you have any questions about reading the diagram above? I don't think I need to explain anymore. The unit of ArrayBuffer can be regarded as 1, while the Float32array unit is 4.

3. DataView objects

DataView object to the operation of the data more detailed, but I do not think that the meaning of the above mentioned in the various types of arrays can be basically satisfied with the application, so here is a stroke, a simple example:

var buffer = new ArrayBuffer, var x = new DataView (buffer, 0), x.setint8 (0), X.setfloat32 (1, Math.PI), Console.log (x. GetInt8 (0)); 22console.log (X.getfloat32 (1)); 3.1415927410125732

Run code

If interested, you can take a http://www.javascripture.com/DataView to learn more.

Third, the ArrayBuffer in XHR2

ArrayBuffer application is particularly extensive, whether it is WebSocket, Webaudio or Ajax, and so on, as long as the front-end to deal with big data or to improve data processing performance, it must be ArrayBuffer.

XHR2 is not a new thing, maybe you use the relevant features, but I do not know this is the content of XHR2. The main thing is xhr.responseType that his role is to set the data format of the response, the optional parameters are: "Text", "Arraybuffer", "blob" or "document". Note that setting (or ignoring) Xhr.responsetype = ' defaults to set the response to ' text '. There is one such correspondence here:

Request            Response text            domstringarraybuffer     arraybufferblob            blobdocument        Document

Give me a chestnut:

var xhr = new XMLHttpRequest (); Xhr.open (' GET ', '/path/to/image.png ', true); Xhr.responsetype = ' arraybuffer '; xhr.onload = function (e) {    //This.response = = Uint8array.buffer    var uint8array = new Uint8array (this.response);}; Xhr.send ();

We set the property to Arraybuffer in Xhr.responsetype, then we can accept it with typed array in the data we get!

Iv. Summary

This paper mainly introduces the storage mode of Array in the stack model, and also describes the binary data type of the original buffer in detail, in the web development, the storage of data and data is an important part of ArrayBuffer, hoping to attract attention!

V. References

• Http://www.javascripture.com/ArrayBuffer
• Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array MDN Array
• Http://www.html5rocks.com/zh/tutorials/file/xhr2/html5rocks
• http://technet.microsoft.com/zh-cn/ie/br212485 MSDN

The JavaScript array you don't know