`ArrayBuffer` w JavaScript

Ten artykuł wyjaśnia, czym jest ArrayBuffer w JavaScript.

Wyjaśnimy wszystko na temat ArrayBuffer, od podstaw, poprzez jego użycie, powiązane typy, aż po praktyczne zastosowania.

YouTube Video

ArrayBuffer w JavaScript

ArrayBuffer w JavaScript to obiekt służący do obsługi niskopoziomowych danych binarnych. Jest szczególnie przydatny do manipulacji danymi binarnymi w WebAPI, operacjach na plikach oraz komunikacji sieciowej.

Czym jest ArrayBuffer

ArrayBuffer to struktura danych służąca do obsługi danych binarnych o stałej długości. Pozwala na obsługę surowych danych binarnych, które nie mogą być obsługiwane przez zwykłe tablice lub obiekty w JavaScript.

ArrayBuffer sam w sobie nie może bezpośrednio manipulować danymi. Zamiast tego dane są odczytywane i zapisywane za pomocą TypedArray lub DataView na podstawie ArrayBuffer.

ArrayBuffer jest szczególnie przydatny w następujących sytuacjach.

• Podczas przetwarzania danych binarnych otrzymanych z sieci
• Gdy wymagane jest efektywne udostępnianie danych w Web Worker.
• Podczas przetwarzania obrazów lub renderowania 3D za pomocą Canvas lub WebGL.
• Podczas manipulowania plikami (szczególnie plikami binarnymi).

Tworzenie ArrayBuffer

Najpierw zacznijmy od tego, jak utworzyć instancję ArrayBuffer. ArrayBuffer przydziela pamięć w jednostkach bajtów, więc jego rozmiar określa się podczas tworzenia.

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

• W tym przykładzie przydzielany jest bufor o rozmiarze 16 bajtów. Ten bufor nie zawiera jeszcze żadnych danych.

Manipulowanie danymi za pomocą TypedArray

Nie możesz bezpośrednio uzyskać dostępu do ArrayBuffer, więc używasz TypedArray, aby odczytać i zapisać dane. TypedArray oferuje różne typy widoków, takie jak Int8Array i Float32Array, umożliwiające efektywny dostęp do danych binarnych.

Przykład użycia 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 może przechowywać dane w każdym bajcie, co pozwala buforowi pomieścić 8 elementów. W ten sposób, używając różnych rodzajów widoków, można efektywnie manipulować danymi.

Inne przykłady TypedArray

JavaScript posiada różne rodzaje TypedArray. Na przykład, jeśli chcesz obsługiwać 32-bitowe liczby całkowite bez znaku, użyj Uint32Array.

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

• Uint32Array może przechowywać dane w jednostkach 4-bajtowych, więc bufor może pomieścić cztery elementy. Ważne jest, aby wybrać odpowiedni TypedArray w zależności od rodzaju przetwarzanych danych.

Elastyczna manipulacja danymi przy użyciu DataView

TypedArray może obsługiwać dane tylko określonego typu, ale używając DataView, możesz zapisywać dane dowolnego typu w dowolnym miejscu. Jest to szczególnie przydatne przy pracy z buforami zawierającymi mieszane typy danych.

 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

Korzystając z DataView, możesz określić przesunięcie bajtowe i odczytywać lub zapisywać dane różnych typów. Jest to bardzo przydatne przy obsłudze złożonych struktur binarnych, takich jak protokoły sieciowe czy formaty plików.

Uwzględnienie kolejności bajtów (Endianness)

Podczas korzystania z DataView należy również zwrócić uwagę na kolejność bajtów (endianness). W zależności od architektury komputera kolejność zapisu danych w pamięci może się różnić. Metody DataView mają opcje pozwalające określić kolejność bajtów.

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

Jeśli nie określisz poprawnej kolejności bajtów, dane mogą być niepoprawnie interpretowane w różnych środowiskach, dlatego szczególną ostrożność należy zachować w komunikacji sieciowej lub operacjach na plikach.

Zastosowania ArrayBuffer

ArrayBuffer to potężne narzędzie często używane w programowaniu webowym i API przeglądarki. Przyjrzyjmy się kilku przykładom zastosowań.

Odbieranie i przetwarzanie danych binarnych

Na przykład możesz pobrać dane binarne z serwera za pomocą XMLHttpRequest lub API fetch i obsłużyć je jako 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    });

• W tym przykładzie dane obrazu są pobierane z serwera i obsługiwane jako Uint8Array. W ten sposób można przetwarzać dane otrzymane z serwera za pomocą ArrayBuffer.

Zastosowanie w WebGL

W WebGL ArrayBuffer jest używany do efektywnej obsługi danych binarnych, takich jak dane wierzchołkowe czy dane kolorów.

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

• W tym przykładzie Float32Array jest używany do zdefiniowania współrzędnych wierzchołków prostokąta i wysłania ich do bufora WebGL.

Zarządzanie pamięcią i ArrayBuffer

ArrayBuffer zarządza pamięcią na poziomie bajtowym, co czyni go bardzo wydajnym, ale także wymaga ostrożności w zarządzaniu pamięcią. Podczas pracy z dużymi danymi binarnymi ważne jest odpowiednie zwalnianie nieużywanych ArrayBuffer. Chociaż JavaScript automatycznie wykonuje zbieranie śmieci, ArrayBuffer, który nadal jest referencjonowany, może powodować wycieki pamięci.

Podsumowanie

ArrayBuffer stanowi podstawę przetwarzania danych binarnych w JavaScript. Łącząc TypedArray i DataView, można efektywnie i elastycznie zarządzać danymi binarnymi. Są to niezbędne narzędzia w tworzeniu stron internetowych, szczególnie w wielu sytuacjach, które wymagają przetwarzania danych binarnych, takich jak komunikacja sieciowa i WebGL. Poprzez ich właściwe zrozumienie i odpowiednie wykorzystanie można poprawić wydajność i efektywność.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video