Arraybuffer in javascript detail _javascript tips

Believe that every JavaScript learner, will go to understand the various basic JS data types, array is the combination of data, this is a very basic also very simple concept, his content is not much, learn it is not difficult thing. But this article is not the important introduction of the Array we always see, but arraybuffer.

I write a lot of things because I want to complete some specific functions and deliberately summed up, can be considered a memo, this article is also so! has been studying the Web Audio API and voice communication related knowledge, the content focuses on the flow of audio streaming in Audiocontext between each node, and now to find out what the audio to the bottom of the data format, so the Arraybuffer Research is particularly important.

Array in-memory stack model

Access to Array

How to generate an Array in Javascript:

Copy Code code as follows:

[Element0, Element1, ..., ELEMENTN]
New Array (Element0, Element1, ..., ELEMENTN)
New Array (Arraylength)

Define directly, or create an Array through a constructor, and of course you can use other means:

Copy Code code as follows:

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

And so on, there are many ways. But the inside of the Array is what kind of structure, I am afraid many people are not very clear.

Stack model

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

Copy Code code as follows:

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

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

Copy Code code as follows:

Stack
+---------+ heap
|         21 | +-------------------+
+---------+         | |
|         "Li Jing" |                   | |
+---------+         | +--------+       |
| [Refer] |----------->|       Object | |
+---------+         | +--------+       |
| [Refer] |----------------->+--------+ |
+---------+         | |function| |
|undefined|        | +--------+ |
+---------+         | |
|         null | +-------------------+
+---------+ Created by Barret Lee

The data types of JavaScript are divided into two types, one is the value type, the other is the reference type, the common reference type is Object and array, and if the value type data such as number or String is pushed directly into the stack, The reference type only presses an index on the value, and the concept of the C language is the pointer to only the data that is stored in a block of the heap. Stacks are not independent, and stacks can be stored in the heap.

OK, the description of Array is here, the following specific arraybuffer related knowledge.

Arraybuffer

What is the web about, and what is the most basic question that the web has 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 top of the web things. The arraybuffer of this article is the most basic data type, not even called the data type, it is a data easy, need to read and write 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 a arraybuffer; Instead, you create an Arraybufferview object which represents the buffer in a specific format Rite the contents of the buffer.
Represents the raw buffer for binary data that 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 raw 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 to read the contents of the buffer in an orderly way (written in) through some kind of data structure.

Creation of the original buffer

You can create an original buffer by Arraybuffer this constructor:

Copy Code code as follows:

var buffer = new Arraybuffer (30);

From the chrome console you can see:

The buffer instance has a ByteLength property for retrieving the size of the buffer, a slice method supported by only ie11+ and ios6+, for intercepting the buffer length.

Copy Code code as follows:

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

You can test this DEMO:

Copy Code code as follows:

var buffer = new Arraybuffer (12);
var x = new Int32array (buffer);
X[1] = 1234;
var slice = Buffer.slice (4);
var y = new Int32array (slice);
Console.log (x[1]);
Console.log (Y[0]);
X[1] = 6789;
Console.log (x[1]);
Console.log (Y[0]);

Array of data

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

Copy Code code as follows:

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 numbers
Float64array 8 64-bit IEEE floating-point numbers

Int is integral type, Uint for unsigned shaping, float is floating-point type, these are the basic concepts in C language, I do not specifically explain. Because these view structures are all the same, this article only describes the Float32array type, the reader can extrapolate.

Float32array is very similar to Array, except that each element is a 32-bit (4-byte) floating-point type of data. Float32array once created its size can no longer be modified.

We can create a Float32array directly:

Copy Code code as follows:

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

There needs to be a concept that he is still an array, except that each element in the array is a Float 32-bit data type, and so on:

Copy Code code as follows:

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

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

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

Copy Code code as follows:

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

The value of x is copied to Y, modified x[0], and y[0] does not change.

In addition to the above, we can create an array of data in other ways:

Copy Code code as follows:

var buffer = new Arraybuffer (12);
var x = new Float32array (buffer, 0, 2);
var y = new Float32array (buffer, 4, 1);
X[1] = 7;
Console.log (Y[0]); 7

Explain why this returns 7.

Copy Code code as follows:

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 the diagram above? I don't think I need to explain it anymore. Arraybuffer units can be viewed as 1, while Float32array units are 4.

DataView objects

The DataView object is more detailed about the data, but I don't think it means anything, the various data arrays mentioned above can be used to basically satisfy the application, so here's a simple example:

Copy Code code as follows:

var buffer = new Arraybuffer (12);
var x = new DataView (buffer, 0);
X.setint8 (0, 22);
X.setfloat32 (1, Math.PI);
Console.log (x.getint8 (0)); 22
Console.log (X.getfloat32 (1)); 3.1415927410125732

If you are interested, you can go to Http://www.javascripture.com/DataView for detailed understanding.

The Arraybuffer in the XHR2

Arraybuffer application is particularly extensive, whether it is WebSocket, Webaudio or Ajax and so on, front-end aspects as long as the processing of large data or want to improve data processing performance, it must be arraybuffer.

XHR2 is not a new thing, you may use the relevant characteristics, but do not know that this is the content of XHR2. The main thing is Xhr.responsetype, his role is to set the data format of the response, optional parameters are: "Text", "Arraybuffer", "blob" or "document." Note that setting (or ignoring) Xhr.responsetype = ' Sets the response to ' text ' by default. There is a corresponding relationship here:

Copy Code code as follows:

Request response
Text domstring
Arraybuffer Arraybuffer
Blob blob
Document Document

Give me a chestnut:

Copy Code code as follows:

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 attribute to Arraybuffer in the Xhr.responsetype, then we can use the data array to accept the data.

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 Arraybuffer, in the web development, data and data storage is an important part, hope to attract attention!

There may be errors in this article, please treatise!