Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use ArrayBuffer in JavaScript". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use ArrayBuffer in JavaScript" can help you solve your doubts.

1. The stack model of Array in memory

1. Acquisition of Array

How to generate Array in Javascript:

[element0, element1,..., elementN] new Array (element0, element1,..., elementN) new Array (arrayLength)

Define it directly, or create an Array through the constructor, but you can also use other means:

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

Wait, there are many ways. But I'm afraid many people still don't know what kind of structure is inside the Array.

two。 Stack model

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

Var arr = [21, "Li Jing", new Date (), function () {}, null]

In the above array, we put numbers, strings, objects, functions, undefined and null at one time. We can describe the above data interface figuratively:

Stack +-+ heap | 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, the other is the reference type, the common reference types are Object and Array, in the storage model of the array, the value type data such as Number and String will be directly pushed into the stack, while the reference type will only be pressed into an index of the value, which is explained by the concept of C language as a pointer that only stores the data, which is stored in a certain interval in the heap. The stack is not independent, and the stack can also be stored in the stack.

All right, this is the end of the description of Array. Let's talk about the relevant knowledge of ArrayBuffer in detail.

II. ArrayBuffer

What is web, and what is the most basic question to be discussed by web? I think there are two points, one is data, the other is data transmission, as for the display of data, numerous and complicated, this should be the upper layer of web. The ArrayBuffer to be discussed in this article is the most basic data type, which can not even be called a data type. It is easy to read and write data and needs to be read and written in other ways.

The definition of official point:

❝

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

It is a raw buffer of binary data. Although JavaScript is a weakly typed language, it has restrictions on the type and size of the data. We need to read (write in) the contents of the buffer in an orderly manner through some data structure.

1. Creation of the original buffer

The constructor ArrayBuffer allows you to create a raw buffer:

Var buffer = new ArrayBuffer (30)

From the chrome console, you can see:

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

ArrayBuffer slice (unsigned long begin unsigned long end Optional)

You can test this DEMO:

Var buffer = new ArrayBuffer (12); var x = new Int32Array (buffer); x [1] = 1234 slice var slice = buffer.slice (4); var y = new Int32Array (slice); console.log (x [1]); console.log (y [0]); x [1] = 6789 Shi console.log (x [1]); console.log (y [0])

two。 Typed array

Typed array types represent various views of ArrayBuffer objects that can be indexed and manipulated. The length of all array types is fixed.

Name size (in bytes) describes Int8Array18 bit 2 complement signed integers Uint8Array18 bit unsigned integers Int16Array216 bit 2 complement signed integers Uint16Array216 bit unsigned integers Int32Array432 bit 2 complement signed integers Uint32Array432 bit unsigned integers Float32Array432 bit IEEE floating point numbers Float64Array864 bit IEEE floating point numbers

Int is an integer, Uint is an unsigned shaping, and Float is a floating point. These are the basic concepts in C, so I won't explain them in detail. Since these visual structures are more or less the same, this article only explains the type of Float32Array, and readers can draw an example. Float32Array is very similar to Array, except that each element is a 32-bit (4-byte) floating-point data. Once Float32Array is created, its size can no longer be modified. 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

You need to have the concept that it is still an array, except that each element in the array is a Float 32-bit data type, such as:

Var x = new Float32Array ([17,-45.3]); console.log (x [0]); / / 17console.log (x [1]); / /-45.29999923706055console.log (x.length); / / 2

We assign the value of an array directly to the Float32Array object x and convert it to a 32-bit floating-point number before storing it. Because each element of this class array is of the same type, they are all pushed into the stack in the stack model, so typed arrays are value types, not reference types! This should be noted, which can also be reflected in the following example:

Var x = new Float32Array ([17,-45.3]); var y = new Float32Array (x); console.log (x [0]); / / 17console.log (x [1]); / /-45.29999923706055console.log (x.length); / / 2x [0] =-2bot console.log (y [0]); / / 17, the value of y remains the same

Copy the value of x to y, modify x [0], and y [0] does not change. In addition to the above, we can create a typed array in other ways:

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 it 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

Do you have any questions after looking at the diagram above? I don't think I need to explain anymore. Think of the unit of ArrayBuffer as 1, while the unit of Float32Array is 4. 5%.

3. DataView object

The DataView object is more meticulous about the operation of the data, but I don't think it's interesting. The typed arrays mentioned above can basically satisfy the application, so here's a simple example:

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)); / / 22console.log (x.getFloat32 (1)); / / 3.1415927410125732 III, ArrayBuffer in XHR2

ArrayBuffer has a wide range of applications, whether it is WebSocket, WebAudio or Ajax, etc., as long as the front end is dealing with big data or want to improve data processing performance, it must be ArrayBuffer.

XHR2 is nothing new, maybe you use the relevant features, but you don't know what XHR2 is all about. One of the most important things is "xhr.responseType", which is used to format the data 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 correspondence like this:

Request response text DOMStringarraybuffer ArrayBufferblob Blobdocument Document

For example:

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 accept it with a typed array in the data we get!

After reading this, the article "how to use ArrayBuffer in JavaScript" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.