Detailed introduction to ArrayBuffer in JavaScript_javascript skills

I believe that every javascript learner will understand the various basic data types of JS. An array is a combination of data. This is a very basic and simple concept. It does not have much content, and it is not difficult to learn it well. matter. But what this article focuses on is not the Array we usually see, but ArrayBuffer.

Many of the things I write are deliberately summarized because I want to complete certain specific functions. They can be regarded as memos, and the same is true for this article! Some time ago, I have been studying the Web Audio API and voice communication-related knowledge. The content focuses on the flow of audio streams between the various nodes of AudioContext. Now I need to find out what kind of data format the audio is at the end of the stream, so I have a deep understanding of ArrayBuffer. Research is extremely important.

Array stack model in memory

Getting Array

How to generate Array in Javascript:

Copy code The code 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 methods:

Copy code The code is as follows:

"array".split("");
"array".match(/a|r/g);

Wait, there are many ways. But what is the internal structure of Array, I am afraid many people are not very clear yet.

Stack Model

We can put many different data types in the array, such as:

Copy code The code is as follows:

var arr = [21, "李京", new Date(), function(){}, , null];

The above array contains numbers, strings, objects, functions, undefined and null. We can describe the above data interface concretely:

Copy code The code is as follows:

Stack
--------- Heap
| 21 | --------------------
---------                                                                        | "Li Jing" | ---------                                                                                                                                                                 | [refer] |---------->| Object | |
---------                                                                                                                                                                 | [refer] |------------------> -------- |
---------                                                                                                       | |undefined| | |
---------                                                                        | null | ------------------
--------- Created By Barret Lee

JavaScript data types are divided into two types, one is value type and the other is reference type. Common reference types are Object and Array. In the array storage model, if it is a value type such as Number and String The data will be pushed directly onto the stack, while the reference type will only push an index to the value. To explain it in terms of C language, only the pointer to the data is saved. The data is stored in a certain range in the heap. . The stack is not independent, and the stack can also be stored in the heap.

Okay, that’s it for the description of Array. Let’s talk about the relevant knowledge of ArrayBuffer in detail.

ArrayBuffer

What is the web? What are the most basic issues to be discussed on the web? I think there are two points, one is data and the other is data transmission. As for the display of data, it is complicated. 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. It cannot even be called a data type. It is a piece of data that needs to be read and written through other methods.

Official point definition:

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.
Represents a raw buffer of binary data that is used to store data for various typed arrays. ArrayBuffer cannot be read or written directly, but the raw buffer can be interpreted as needed by passing it to a typed array or DataView object.

It is a raw buffer of binary data. Although JavaScript is a weakly typed language, it itself has restrictions on the type and size of data. We need to order the contents of the buffer through some kind of data structure. Read out (write in).

Creation of raw buffer

A raw buffer can be created through the ArrayBuffer constructor:

Copy code The code is as follows:

var buffer = new ArrayBuffer(30);

You can see from the chrome console:

The buffer instance has a byteLength attribute, which is used to obtain the size of the buffer, and a slice method, which is only supported by IE11 and ios6, and is used to intercept the buffer length.

Copy code The code is as follows:

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

You can test this DEMO:

Copy code The code 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 array

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

Copy code The code 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 type, Uint is an unsigned integer, and Float is a floating point type. These are basic concepts in C language, and I will not explain them in detail. Since these visualization structures are all similar, this article only explains the Float32Array type, and readers can draw inferences from one example.

Float32Array is very similar to Array, except that each element is a 32-bit (4-byte) floating-point data. Once a Float32Array is created its size cannot be modified.

We can create a Float32Array directly:

Copy code The code 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

You need to have such a concept. It is still an array, but each element in the array is a Float 32-bit data type. Another example:

Copy code The code 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 the Float32Array object x, and then convert it into a 32-bit floating point number before storing it.

Since each element of this type of array is of the same type, in the stack model, they will all be pushed onto the stack. Therefore, the data array is a value type, not a reference type! This should attract attention, and it can also be reflected from the following examples:

Copy code The code 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] has no change.

In addition to the above method, we can also create a data array in other ways:

Copy code The code 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 this returns 7.

Copy code The code 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

After reading the above diagram, do you still have any questions? I don't think I need to explain any more. You can think of the unit of ArrayBuffer as 1, while the unit of Float32Array is 4.

DataView object

The DataView object operates on data in more detail, but I don’t think it’s interesting. The various digitized arrays mentioned above can basically meet the application requirements, so I’ll just briefly mention it here, with a simple example:

Copy code The code 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 go to http://www.javascripture.com/DataView to learn more.

ArrayBuffer in XHR2

ArrayBuffer is particularly widely used, whether it is WebSocket, WebAudio, Ajax, etc., as long as the front-end is processing big data or wants to improve data processing performance, ArrayBuffer must be indispensable.

XHR2 is not a new thing. Maybe you have used related features but didn’t know that this is the content of XHR2. The most important thing is xhr.responseType. Its function is to set the data format of the response. The optional parameters are: "text", "arraybuffer", "blob" or "document". Note that setting (or omitting) xhr.responseType = '' will default the response to "text". There is such a correspondence here:

Copy code The code is as follows:

Request Response
text DOMString
arraybuffer ArrayBuffer
blob Blob
document Document

Give me an example:

Copy code The code 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 attribute in xhr.responseType to arraybuffer, so we can use the data array to accept the data we get!

Summary

This article mainly introduces the storage method of Array in the stack model, and also describes in detail the binary data type of the original buffer ArrayBuffer. In web development, data and data storage are an important part. I hope to attract your attention!

There may be errors in the description of this article, please correct me!