`ArrayBuffer` in JavaScript

Dit artikel legt uit wat ArrayBuffer in JavaScript is.

We leggen alles uit over ArrayBuffer, van de basis tot het gebruik, gerelateerde typen en praktische toepassingen.

YouTube Video

ArrayBuffer in JavaScript

ArrayBuffer in JavaScript is een object voor het verwerken van low-level binaire data en is bijzonder nuttig voor het manipuleren van binaire data in WebAPI's, bestandsbewerkingen en netwerkcommunicatie.

Wat is ArrayBuffer

ArrayBuffer is een datastructuur voor het verwerken van binaire gegevens met een vaste lengte. Hiermee kunt u ruwe binaire gegevens verwerken die niet kunnen worden behandeld door reguliere JavaScript-arrays of -objecten.

ArrayBuffer zelf kan geen gegevens direct manipuleren. In plaats daarvan worden gegevens gelezen en geschreven met behulp van TypedArray of DataView op basis van een ArrayBuffer.

ArrayBuffer is vooral handig in de volgende situaties.

• Bij het verwerken van binaire gegevens die via het netwerk zijn ontvangen
• Wanneer een efficiënte gegevensdeling in Web Worker vereist is.
• Bij het uitvoeren van beeldverwerking of 3D-rendering met Canvas of WebGL.
• Bij het manipuleren van bestanden (vooral binaire bestanden).

Een ArrayBuffer maken

Laten we eerst beginnen met hoe u een instantie van ArrayBuffer maakt. ArrayBuffer reserveert geheugen in bytes, dus u geeft de grootte op bij het maken.

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

• In dit voorbeeld wordt een buffer van 16 bytes gereserveerd. Deze buffer bevat nog geen gegevens.

Gegevens manipuleren met TypedArray

U kunt een ArrayBuffer niet direct benaderen, dus gebruikt u een TypedArray om gegevens te lezen en te schrijven. TypedArray biedt verschillende soorten weergaven zoals Int8Array en Float32Array, waarmee efficiënte toegang tot binaire gegevens mogelijk is.

Voorbeeld met 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 gegevens in elke byte opslaan, waardoor de buffer 8 elementen kan bevatten. Op deze manier kun je door het gebruik van verschillende soorten weergaven gegevens efficiënt manipuleren.

Andere voorbeelden van TypedArray

JavaScript heeft verschillende typen TypedArray. Als je bijvoorbeeld 32-bits ongetekende gehele getallen wilt verwerken, gebruik je Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• Uint32Array kan gegevens opslaan in eenheden van 4 bytes, dus de buffer kan vier elementen bevatten. Het is belangrijk om het juiste TypedArray te kiezen op basis van het type gegevens dat je verwerkt.

Flexibele gegevensmanipulatie met behulp van DataView

TypedArray kan alleen gegevens van een vast type verwerken, maar met DataView kun je gegevens van elk type naar elke locatie schrijven. Dit is vooral handig bij het werken met buffers die gemengde datatypen bevatten.

 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

Met DataView kun je een byte-offset specificeren en gegevens van verschillende typen lezen of schrijven. Dit is zeer nuttig bij het verwerken van complexe binaire structuren zoals netwerkprotocollen of bestandsindelingen.

Overweging van endianness

Bij het gebruik van DataView moet je ook letten op endianness (bytevolgorde). Afhankelijk van de computerarchitectuur kan de volgorde waarin gegevens in het geheugen worden opgeslagen verschillen. De methoden van DataView hebben opties om de endianness te specificeren.

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

Als je de juiste endianness niet specificeert, kunnen gegevens niet correct worden geïnterpreteerd in verschillende omgevingen. Het is daarom vooral belangrijk om voorzichtig te zijn bij netwerkcommunicatie of bestandshandelingen.

Toepassingen van ArrayBuffer

ArrayBuffer is een krachtig hulpmiddel dat vaak wordt gebruikt bij webontwikkeling en browser-API's. Laten we kijken naar enkele voorbeelden van toepassingen.

Ontvangen en verwerken van binaire gegevens

Je kunt bijvoorbeeld binaire gegevens van een server ophalen met XMLHttpRequest of de fetch API en deze verwerken als een 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    });

• In dit voorbeeld worden afbeeldingsgegevens opgehaald van de server en verwerkt als een Uint8Array. Op deze manier kun je gegevens die van de server zijn ontvangen verwerken met behulp van ArrayBuffer.

Gebruik in WebGL

In WebGL wordt ArrayBuffer gebruikt om binaire gegevens zoals vertexgegevens en kleurgegevens efficiënt te verwerken.

 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);

• In dit voorbeeld wordt Float32Array gebruikt om de vertexcoördinaten van een rechthoek te definiëren en deze naar een WebGL-buffer te verzenden.

Geheugenbeheer en ArrayBuffer

ArrayBuffer beheert geheugen op byte-niveau, wat het zeer efficiënt maakt, maar je moet ook voorzichtig omgaan met geheugenbeheer. Bij het werken met grote binaire gegevens is het belangrijk om ongebruikte ArrayBuffers correct vrij te geven. Hoewel JavaScript automatisch garbage collection uitvoert, kan een geheugenlek optreden als er naar een ArrayBuffer wordt verwezen.

Samenvatting

ArrayBuffer biedt de basis voor verwerking van binaire gegevens in JavaScript. Door TypedArray en DataView te combineren, is het mogelijk om binaire gegevens efficiënt en flexibel te verwerken. Het zijn onmisbare hulpmiddelen in webontwikkeling, vooral in veel situaties waarin binaire gegevens worden verwerkt, zoals netwerkcommunicatie en WebGL. Door ze correct te begrijpen en op de juiste manier te gebruiken, kun je prestaties en efficiëntie verbeteren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video