Articles
Introduktion til JavaScript
`ArrayBuffer` i JavaScript

`ArrayBuffer` i JavaScript

Denne artikel forklarer ArrayBuffer i JavaScript.

Vi vil forklare alt om ArrayBuffer, fra det grundlæggende til dets anvendelse, relaterede typer og praktiske applikationer.

YouTube Video

ArrayBuffer i JavaScript

ArrayBuffer i JavaScript er et objekt til håndtering af lav-niveaus binære data og er særligt nyttigt til manipulation af binære data i WebAPI'er, filoperationer og netværkskommunikation.

Hvad er ArrayBuffer

ArrayBuffer er en datastruktur til håndtering af binære data med fast længde. Det muliggør håndtering af rå binære data, som ikke kan håndteres af almindelige JavaScript-arrays eller objekter.

ArrayBuffer kan ikke selv manipulere data direkte. I stedet læses og skrives data ved hjælp af TypedArray eller DataView baseret på en ArrayBuffer.

ArrayBuffer er især nyttigt i følgende situationer.

  • Ved behandling af binære data modtaget fra netværket
  • Når effektiv dataudveksling i Web Worker er nødvendig.
  • Når du udfører billedbehandling eller 3D-rendering med Canvas eller WebGL.
  • Når du arbejder med filer (især binære filer).

Oprettelse af en ArrayBuffer

Lad os først starte med, hvordan man opretter en instans af ArrayBuffer. ArrayBuffer allokerer hukommelse i byte-enheder, så du angiver dens størrelse ved oprettelsen.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16
  • I dette eksempel allokeres en buffer på 16 byte. Denne buffer indeholder endnu ikke nogen data.

Manipulation af data med TypedArray

Du kan ikke få direkte adgang til en ArrayBuffer, så du bruger en TypedArray til at læse og skrive data. TypedArray tilbyder forskellige typer visninger som Int8Array og Float32Array, hvilket muliggør effektiv adgang til binære data.

Eksempel ved brug af Int8Array 

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42
  • Int8Array kan gemme data i hver byte, hvilket gør det muligt for bufferen at holde 8 elementer. På denne måde kan du ved at bruge forskellige typer visninger manipulere data effektivt.

Andre eksempler på TypedArray

JavaScript har forskellige typer af TypedArray. For eksempel, hvis du vil håndtere 32-bit usignerede heltal, bruger du Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456
  • Uint32Array kan lagre data i 4-byte enheder, så bufferen kan indeholde fire elementer. Det er vigtigt at vælge den passende TypedArray baseret på typen af data, du håndterer.

Fleksibel datamanipulation ved brug af DataView

TypedArray kan kun håndtere data af en fast type, men ved at bruge DataView kan du skrive data af enhver type til enhver placering. Dette er særligt nyttigt, når man arbejder med buffers, der indeholder blandede datatyper.

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

Ved at bruge DataView kan du specificere en byte-offset og læse eller skrive data af forskellige typer. Dette er meget nyttigt, når man håndterer komplekse binære strukturer som netværksprotokoller eller filformater.

Overvejelser om endianness

Når du bruger DataView, skal du også være opmærksom på endianness (byte-rækkefølge). Afhængigt af computerens arkitektur kan rækkefølgen, hvori data gemmes i hukommelsen, variere. DataView-metoder har muligheder for at angive endianness.

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

Hvis du ikke angiver den korrekte endianness, kan data muligvis ikke tolkes korrekt i forskellige miljøer, så det er især vigtigt at være forsigtig ved netværkskommunikation eller filoperationer.

Anvendelser af ArrayBuffer

ArrayBuffer er et kraftfuldt værktøj, der ofte bruges i webudvikling og browser-API'er. Lad os se på nogle eksempler på anvendelser.

Modtagelse og behandling af binære data

For eksempel kan du hente binære data fra en server ved at bruge XMLHttpRequest eller fetch API og håndtere det som en ArrayBuffer.

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });
  • I dette eksempel hentes billeddata fra serveren og håndteres som en Uint8Array. På denne måde kan du behandle data modtaget fra serveren ved hjælp af ArrayBuffer.

Anvendelse i WebGL

I WebGL bruges ArrayBuffer til effektivt at håndtere binære data som vertex-data og farvedata.

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  • I dette eksempel bruges Float32Array til at definere vertex-koordinaterne for en rektangel og sende dem til en WebGL-buffer.

Hukommelsesstyring og ArrayBuffer

ArrayBuffer administrerer hukommelse på byteniveau, hvilket gør det meget effektivt, men du skal også være forsigtig med hukommelsesstyring. Når du arbejder med store binære data, er det vigtigt at frigive ubrugte ArrayBuffers korrekt. Selvom JavaScript automatisk udfører garbage collection, kan det føre til hukommelseslækager, hvis en ArrayBuffer fortsat refereres.

Sammendrag

ArrayBuffer udgør fundamentet for behandling af binære data i JavaScript. Ved at kombinere TypedArray og DataView er det muligt at håndtere binære data effektivt og fleksibelt. De er uundværlige værktøjer i webudvikling, især i situationer der kræver håndtering af binære data såsom netværkskommunikation og WebGL. Ved at forstå dem korrekt og bruge dem passende, kan du forbedre ydeevnen og effektiviteten.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

JavaScript og StorageManagerTypedArray i JavaScript