I believe that every JavaScript learner will understand various basic data types of JS. Arrays are data combinations. This is a very basic and simple concept. It doesn’t have much content, and it is not difficult to learn it well. But what is important in this article is not the Array we usually see, but the ArrayBuffer.
Many of the things I wrote are deliberately summarized because they want to complete certain specific functions. They can be regarded as memos, and the same is true for this article! I have been studying the knowledge related to Web Audio API and voice communication some time ago. The content focuses on the flow of audio streams between various AudioContext nodes. Now I need to understand what kind of data format the audio to the stream is, so the research on ArrayBuffer is particularly important.
Array stack model in memory
Array's acquisition
How to generate Array in Javascript:
The code copy is as follows:
[element0, element1, ..., elementN]
new Array(element0, element1, ..., elementN)
new Array(arrayLength)
Define it directly, or create an Array through the constructor, of course, you can also use other means:
The code copy is as follows:
"array".split("");
"array".match(/a|r/g);
Wait, there are many ways. But I'm afraid many people are not very clear about what kind of structure the Array is inside.
Stack model
In the array we can put a lot of data of different data types, such as:
The code copy is as follows:
var arr = [21, "Li Jing", new Date(), function(){}, , null];
The above array contains numbers, strings, objects, functions, undefined and null at once. We can describe the above data interface in a concrete way:
The code copy is as follows:
Stack
+------------------------------------------------------------------------------------------------------------------------------
| 21 | +---------------------------+
+----------+ | |
| "Li Jing" | | |
+----------+ | +---------+ |
| [refer] |----------->| Object | |
+----------+ | +---------+ |
| [refer] |------------------>+---------+ |
+----------+ | |function| |
|undefined| | +---------+ |
+----------+ | |
| null | +-------------------------+
+-----------+ Created By Barret Lee
JavaScript data types are divided into two types, one is the value type and the other is the reference type. Common reference types include Object and Array. In the storage model of the array, if the value type data is like Number and String, data will be directly pushed into the stack, while the reference type will only be pushed into an index of the value. The concept of C language is to only save the pointer of the data, and these data are stored in a certain block of the heap. The stack is not independent, and the stack can also be stored in the stack.
Okay, that’s all for the explanation of Array. Let’s talk about the relevant knowledge of ArrayBuffer in detail.
ArrayBuffer
What is the web? What is the most basic issue that the web needs to discuss? I think there are two points: one is data and the other is data transmission. As for the display of data, it is complicated and this should be something on the upper layer of the web. The ArrayBuffer to be discussed in this article is the most basic data type, and it cannot even be called a data type. It is easy to read and write in other ways.
Definition of official points:
The ArrayBuffer is a data type that 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 in a specific format, and use that to read and write the contents of the buffer.
The original buffer representing binary data, which is used to store data of various types of arrays. The ArrayBuffer cannot be read or written directly, but it can be passed to a typed array or DataView object as needed to interpret the original buffer.
It is a raw buffer of binary data. Although JavaScript is a weak-type language, it itself has limitations on the type and size of the data. We need to read the content of the buffer in an orderly manner (write it in) through a certain data structure.
Creation of original buffer
The ArrayBuffer constructor can create a raw buffer:
The code copy is as follows:
var buffer = new ArrayBuffer(30);
From the chrome console you can see:
The buffer instance has a byteLength attribute, which is used to obtain the buffer size, a slice method that is only supported by IE11+ and ios6+, which is used to intercept the buffer length.
The code copy is as follows:
ArrayBuffer slice(
unsigned long begin
unsigned long end Optional
);
You can test this DEMO:
The code copy is 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]);
Data-based arrays
Typed array types represent various views of indexable and manipulated ArrayBuffer objects. All array types have fixed lengths.
The code copy is as follows:
Name size (in bytes) Description
Int8Array 1 8-bit two's complement signed integer
Uint8Array 1 8-bit unsigned integer
Int16Array 2 16-bit two's complement signed integer
Uint16Array 2 16-bit unsigned integer
Int32Array 4 32-bit two's 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 an integer, Uint is an unsigned plastic, and Float is a floating point type. These are the basic concepts in C language, so I won't explain them in detail. Since these viewed structures are similar, this article only explains the Float32Array type, and readers can learn from it one by one.
Float32Array is very similar to Array, except that each element is a 32-bit (4-byte) floating point data. Float32Array Once created, its size cannot be modified.
We can create a Float32Array directly:
The code copy is 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 it is still an array, but each element in the array is a Float 32-bit data type, for example:
The code copy is 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 x, the Float32Array object, and then it will be converted into a 32-bit floating point number before storage.
Since each element of this class array is of the same type, in the stack model, they will all be pushed into the stack. Therefore, the dataized array is a value type, and it is not a reference type! This should be taken notice and can also be reflected in the following examples:
The code copy is 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]); // 17, the value of y has not changed
Copy the value of x to y, modify x[0], y[0] and there is no change.
In addition to the above method, we can also create a dataized array in other ways:
The code copy is 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 7 is returned here.
The code copy is 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 still have any questions after reading the above illustration? I don't think I need to continue to explain. The unit of ArrayBuffer can be regarded as 1, while the unit of Float32Array is 4.
DataView object
The DataView object operates data more meticulously, but I don't think it's interesting. The various data-based arrays mentioned above can basically satisfy the application, so I'll just mention it here, a simple example:
The code copy is 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 move to http://www.javascripture.com/DataView for detailed information.
ArrayBuffer in XHR2
ArrayBuffer is particularly widely used. Whether it is WebSocket, WebAudio, Ajax, etc., as long as the front-end process big data or want to improve data processing performance, ArrayBuffer must be indispensable.
XHR2 is not new. You may have used relevant features, but you don’t know that this is what XHR2 is. The most important thing is xhr.responseType, which is used to set the data format of the response. The optional parameters are: "text", "arraybuffer", "blob" or "document". Note that setting (or ignoring) xhr.responseType = '' will set the response to "text" by default. There is a corresponding relationship like this:
The code copy is as follows:
Request response
text DOMString
arraybuffer ArrayBuffer
blob Blob
document Document
Take a chestnut:
The code copy is 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 property to arraybuffer in xhr.responseType, so we can use a data-based array to accept the data we get!
summary
This article mainly introduces how Array is stored in the stack model, and also describes in detail the binary data type of the ArrayBuffer, the original buffer. In web development, data and data storage are an important part, I hope to attract attention!
There may be errors in the narrative of this article, please correct them more!