`ArrayBuffer` i JavaScript

Denne artikkelen forklarer ArrayBuffer i JavaScript.

Vi skal forklare alt om ArrayBuffer, fra det grunnleggende til bruk, relaterte typer og praktiske applikasjoner.

YouTube Video

ArrayBuffer i JavaScript

ArrayBuffer i JavaScript er et objekt for håndtering av lavnivå binærdata og er spesielt nyttig for å manipulere binærdata i WebAPIer, filoperasjoner og nettverkskommunikasjon.

Hva er ArrayBuffer

ArrayBuffer er en datastruktur for å håndtere binærdata med fast lengde. Den gjør det mulig å håndtere rå binære data som ikke kan håndteres av vanlige JavaScript-arrays eller -objekter.

ArrayBuffer kan ikke manipulere data direkte. I stedet blir data lest og skrevet ved hjelp av TypedArray eller DataView basert på en ArrayBuffer.

ArrayBuffer er spesielt nyttig i følgende situasjoner.

• Når du behandler binærdata mottatt fra nettverket
• Når effektiv deling av data i Web Worker er nødvendig.
• Når man utfører bildebehandling eller 3D-rendering med Canvas eller WebGL.
• Når man håndterer filer (spesielt binære filer).

Opprette en ArrayBuffer

Først, la oss starte med hvordan du lager en instans av ArrayBuffer. ArrayBuffer tildeler minne i byte-enheter, så du spesifiserer størrelsen ved opprettelse.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• I dette eksempelet tildeles en buffer på 16 byte. Denne bufferen inneholder ennå ingen data.

Manipulering av data med TypedArray

Du kan ikke direkte få tilgang til en ArrayBuffer, så du bruker en TypedArray for å lese og skrive data. TypedArray gir ulike typer visninger som Int8Array og Float32Array, som muliggjør effektiv tilgang til binærdata.

Eksempel ved bruk av 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 lagre data i hver byte, slik at bufferen kan inneholde 8 elementer. På denne måten, ved å bruke forskjellige typer visninger, kan du manipulere data effektivt.

Andre eksempler på TypedArray

JavaScript har flere typer TypedArray. For eksempel, hvis du vil håndtere 32-bits usignerte heltall, bruker 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 enheter på 4 byte, så bufferen kan inneholde fire elementer. Det er viktig å velge riktig TypedArray basert på typen data du behandler.

Fleksibel datamanipulering med DataView

TypedArray kan bare håndtere data av en fast type, men ved å bruke DataView, kan du skrive data av hvilken som helst type til hvilket som helst sted. Dette er spesielt nyttig når du arbeider med buffere som inneholder 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 å bruke DataView, kan du spesifisere en byte-offset og lese eller skrive data av forskjellige typer. Dette er svært nyttig når du håndterer komplekse binære strukturer som nettverksprotokoller eller filformater.

Vurdering av endianness

Når du bruker DataView, må du også være oppmerksom på endianness (byte-rekkefølge). Avhengig av datamaskinarkitekturen, kan rekkefølgen på hvordan data lagres i minnet variere. DataView-metoder har alternativer for å spesifisere 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 spesifiserer riktig endianness, kan data bli feiltolket i forskjellige miljøer, så det er spesielt viktig å være forsiktig med nettverkskommunikasjon eller filoperasjoner.

Bruksområder for ArrayBuffer

ArrayBuffer er et kraftig verktøy som ofte brukes i webutvikling og nettleser-APIer. La oss se på noen eksempler på bruksområder.

Mottak og behandling av binære data

For eksempel kan du hente binære data fra en server ved hjelp av XMLHttpRequest eller fetch-APIet 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 eksempelet hentes bildedata fra serveren og håndteres som en Uint8Array. På denne måten kan du behandle data mottatt fra serveren ved hjelp av ArrayBuffer.

Bruk i WebGL

I WebGL brukes ArrayBuffer til å effektivt håndtere binære data som vertex-data og fargedata.

 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 eksempelet brukes Float32Array til å definere vertex-koordinatene til en rektangel og sende dem til en WebGL-buffer.

Minnehåndtering og ArrayBuffer

ArrayBuffer håndterer minne på bytenivå, noe som gjør det svært effektivt, men du må også være forsiktig med minnehåndtering. Når du arbeider med store binære data, er det viktig å frigjøre ubrukte ArrayBuffers på riktig måte. Selv om JavaScript automatisk utfører søppelsamling, kan det oppstå minnelekkasjer hvis en ArrayBuffer fortsetter å bli referert til.

Sammendrag

ArrayBuffer gir grunnlaget for behandling av binære data i JavaScript. Ved å kombinere TypedArray og DataView er det mulig å håndtere binære data effektivt og fleksibelt. De er uunnværlige verktøy i webutvikling, spesielt i mange situasjoner som innebærer håndtering av binære data som nettverkskommunikasjon og WebGL. Ved å forstå dem riktig og bruke dem på en hensiktsmessig måte kan du forbedre ytelse og effektivitet.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video