`ArrayBuffer` sa JavaScript

Ipinaliliwanag ng artikulong ito ang ArrayBuffer sa JavaScript.

Ipapaliwanag namin ang lahat tungkol sa ArrayBuffer, mula sa mga pangunahing kaalaman hanggang sa paggamit nito, mga kaugnay na uri, at praktikal na aplikasyon.

YouTube Video

ArrayBuffer sa JavaScript

Ang ArrayBuffer sa JavaScript ay isang object para sa paghawak ng mababang antas ng binary na data at lubos na kapaki-pakinabang para sa pagmamanipula ng binary na data sa WebAPIs, mga operasyon ng file, at komunikasyon sa network.

Ano ang ArrayBuffer

Ang ArrayBuffer ay isang istruktura ng data para sa paghawak ng binary na datos na may nakatakdang haba. Pinapahintulutan nitong hawakan ang raw na binary data na hindi kayang hawakan ng karaniwang mga array o object sa JavaScript.

Ang ArrayBuffer mismo ay hindi direktang makakamanipula ng data. Sa halip, ang data ay binabasa at isinusulat gamit ang TypedArray o DataView batay sa isang ArrayBuffer.

Ang ArrayBuffer ay lubos na kapaki-pakinabang sa mga sumusunod na sitwasyon.

• Kapag pinoproseso ang binary na data na natanggap mula sa network
• Kapag kinakailangan ang mahusay na pagbabahagi ng datos sa Web Worker.
• Kapag gumagawa ng pagproseso sa imahe o 3D rendering gamit ang Canvas o WebGL.
• Kapag nagma-manipula ng mga file (lalo na ang mga binary file).

Paglikha ng isang ArrayBuffer

Una, magsimula tayo sa kung paano lumikha ng isang instance ng ArrayBuffer. Ang ArrayBuffer ay naglalaan ng memorya sa mga unit ng byte, kaya tinutukoy mo ang laki nito sa oras ng paglikha.

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

• Sa halimbawang ito, isang buffer na may 16 bytes ang itinalaga. Ang buffer na ito ay wala pang anumang data.

Pagmamanipula ng data gamit ang TypedArray

Hindi mo direktang ma-access ang isang ArrayBuffer, kaya gumamit ka ng TypedArray upang magbasa at magsulat ng data. Ang TypedArray ay nagbibigay ng iba't ibang uri ng mga view tulad ng Int8Array at Float32Array, na nagbibigay-daan sa mahusay na pag-access sa binary na data.

Halimbawa gamit ang 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

• Ang Int8Array ay maaaring mag-imbak ng data sa bawat byte, na nagbibigay-daan sa buffer na maglaman ng 8 elemento. Sa ganitong paraan, sa pamamagitan ng paggamit ng iba't ibang uri ng view, maaari mong manipulahin ang data nang mas mahusay.

Iba pang mga halimbawa ng TypedArray

Ang JavaScript ay may iba't ibang uri ng TypedArray. Halimbawa, kung nais mong magproseso ng 32-bit na unsigned integers, gamitin mo ang Uint32Array.

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

• Ang Uint32Array ay maaaring mag-imbak ng datos sa 4-byte na mga yunit, kaya ang buffer ay maaaring maglaman ng apat na elemento. Mahalagang pumili ng tamang TypedArray` batay sa uri ng data na iyong pinoproseso.

Flexible na pagmanipula ng data gamit ang DataView

Ang TypedArray ay maaaring magproseso lamang ng data na may permanenteng uri, ngunit sa pamamagitan ng paggamit ng DataView, maaari kang magsulat ng data ng anumang uri sa kahit anong lokasyon. Ito ay lubos na kapaki-pakinabang kapag humahawak ng buffers na may pinagsamang uri ng data.

 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

Gamit ang DataView, maaari mong tukuyin ang byte offset at basahin o isulat ang data na may iba't ibang uri. Ito ay lubos na kapaki-pakinabang kapag humahawak ng mga komplikadong binary structures tulad ng network protocols o file formats.

Pag-isipan ang Endianness

Kapag gumagamit ng DataView, kailangan mo ring bigyang-pansin ang endianness (byte order). Depende sa arkitektura ng computer, maaaring magkaiba ang pagkakasunod-sunod ng data sa memorya. Ang mga pamamaraan ng DataView ay may mga opsyon upang tukuyin ang 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

Kung hindi mo tukuyin ang tamang endianness, maaaring hindi tama ang interpretasyon ng data sa iba't ibang kapaligiran, kaya't mahalaga ang pagiging maingat lalo na sa network communication o mga operasyon sa file.

Mga aplikasyon ng ArrayBuffer

Ang ArrayBuffer ay isang makapangyarihang tool na madalas ginagamit sa web development at browser APIs. Tingnan natin ang ilang halimbawa ng mga aplikasyon.

Pagtanggap at Pagproseso ng Binary Data

Halimbawa, maaari kang kumuha ng binary data mula sa isang server gamit ang XMLHttpRequest o ang fetch API at i-proseso ito bilang isang 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    });

• Sa halimbawang ito, ang image data ay kinuha mula sa server at iprinoproseso bilang isang Uint8Array. Sa ganitong paraan, maaari mong iproseso ang data na natanggap mula sa server gamit ang ArrayBuffer.

Paggamit sa WebGL

Sa WebGL, ang ArrayBuffer ay ginagamit upang mahusay na magproseso ng binary data tulad ng vertex data at color data.

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

• Sa halimbawang ito, ang Float32Array ay ginagamit upang tukuyin ang vertex coordinates ng isang rectangle at ipadala ang mga ito sa isang WebGL buffer.

Pamamahala ng Memorya at ArrayBuffer

Ang ArrayBuffer ay namamahala ng memorya sa antas ng byte, kaya't ito ay napaka-episyente, ngunit kailangan mo ring maging maingat sa pamamahala ng memorya. Kapag humaharap sa malalaking binary na datos, mahalagang maayos na i-release ang hindi nagagamit na mga ArrayBuffer. Bagama't awtomatikong isinasagawa ng JavaScript ang garbage collection, kung ang isang ArrayBuffer ay patuloy na ginagamit, maaari itong magdulot ng memory leaks.

Buod

Ang ArrayBuffer ang nagbibigay ng pundasyon para sa pagpoproseso ng binary na datos sa JavaScript. Sa pamamagitan ng pagsasama ng TypedArray at DataView, posible ang mahusay at flexible na paghawak ng binary na datos. Sila ay mga kailangang-kailangang kasangkapan sa pag-develop ng web, lalo na sa maraming sitwasyong may kinalaman sa paghawak ng binary na datos tulad ng komunikasyong pang-network at WebGL. Sa pamamagitan ng wastong pag-unawa at tamang paggamit ng mga ito, maaari mong mapahusay ang performance at kahusayan.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video