TypedArray sa JavaScript

Ipinaliliwanag ng artikulong ito ang TypedArray sa JavaScript.

Ipapaliwanag namin nang detalyado ang pangunahing konsepto ng TypedArray, bawat uri, paano ito gamitin, at ang mga partikular na kaso ng paggamit.

YouTube Video

TypedArray sa JavaScript

Ang TypedArray sa JavaScript ay isang object para sa mahusay na paghawak ng buffered binary data. Ang TypedArray ay naglalaan at nagmamanipula ng memory batay sa tiyak na mga uri ng data. Hindi tulad ng karaniwang arrays, ang TypedArray ay maaari lamang maglaman ng fixed-size binary data, hindi arbitraryong mga uri ng data.

Ang Pangunahing Estruktura ng TypedArray

Ang mga pangunahing sangkap ng isang TypedArray ay ang ArrayBuffer at ang mismong TypedArray.

• ArrayBuffer: Isang fixed-size buffer na naglalaan ng binary data sa memory. Ang buffer na ito ay isa lamang data area at hindi maaaring basahin o sulatan nang direkta.
• TypedArray: Isang wrapper object na nag-aaplay ng tiyak na uri ng data sa buffer, na nagpapahintulot ng access at pag-manipula ng data.

Pangunahing Halimbawa ng Paggamit

Narito ang isang halimbawa ng paglikha ng isang ArrayBuffer at pagkatapos ay paglikha ng isang TypedArray batay dito.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• Sa halimbawang ito, isang ArrayBuffer ang nalikha, at pagkatapos ay ginawa ang isang Uint8Array batay sa buffer na iyon. Ang bawat elemento ay itinuturing bilang isang 8-bit unsigned integer, nag-iimbak ng mga halaga lamang sa loob ng tinukoy na saklaw.

Mga Uri ng TypedArray

Mayroong iba't ibang uri ng TypedArray para sa bawat uri ng data. Ang pangunahing mga uri ay ang mga sumusunod.

Ang mga TypedArray na ito ay memory-efficient at epektibo para sa paghawak ng malalaking volume ng data.

Pagmanipula ng TypedArrays

Maaari mong ma-access ang data sa isang TypedArray gamit ang mga index, katulad ng isang karaniwang array, ngunit may ilang espesyal na method na magagamit din.

Pagse-set ng mga halaga

Sa isang TypedArray, maaari kang maglagay ng maraming halaga nang sabay-sabay gamit ang set method.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Gumagamit ang code na ito ng set method upang magtalaga ng maraming halaga nang sabay-sabay sa isang Int16Array, at ipinapakita ang bawat elemento sa console.

Pagkuha ng subarray

Upang makuha ang bahagi ng isang TypedArray bilang subarray, gamitin ang subarray method. Ito ay tumutukoy sa parehong buffer tulad ng orihinal na TypedArray.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Kinukuha ng code na ito ang tinukoy na saklaw ng mga elemento mula sa isang Int16Array gamit ang subarray method at ipinapakita ang subarray sa console.

Pagko-copy ng buffers

Ang buffer ng isang TypedArray ay maaari ring kopyahin sa isa pang TypedArray. Gamit ang set method, maaari kang mag-copy mula sa isang tinukoy na posisyon.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Kinokopya ng code na ito ang laman ng isang Uint8Array sa ibang array gamit ang set method, at ipinapakita ang kinopyang array sa console.

Gamit ang DataView

Habang ang isang TypedArray ay humahawak ng mga buffer na may nakapirming uri ng data, ang DataView ay isang interface na nagbibigay-daan sa nababaluktot na manipulasyon ng binary data na may mga arbitrary offset at uri ng data. Ito ay nagpapahintulot sa iba't ibang uri na pagsamahin sa loob ng parehong buffer.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Gumagamit ang code na ito ng DataView upang magsulat ng iba't ibang uri ng data—32-bit na integer at 32-bit na floating-point number—sa parehong buffer at sinusuri ang mga resulta.

• Ang DataView ay nag-aalok ng mas malaking kakayahang umangkop sa pag-access ng data kaysa sa TypedArray at lalong kapaki-pakinabang kapag nagtatrabaho sa mga file na may binary format o mga network protocol.

Mga kaso ng paggamit ng TypedArray

Ang TypedArray ay pangunahing ginagamit para sa mahusay na paghawak ng malalaking dami ng binary data. Ang mga tiyak na kaso ng paggamit ay kinabibilangan ng mga sumusunod.

Pagpoproseso ng imahe

Ang TypedArray ay ginagamit kapag nagmamaniobra ng impormasyon ng pixel mula sa data ng imahe. Gamit ang Uint8Array, hawak mo ang mga halaga ng RGBA ng bawat pixel at ginagawa ang pag-edit at pagpoproseso ng imahe.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Gumagawa ang code na ito ng image data na may lapad na 100 at taas na 100 sa RGBA format gamit ang Uint8Array, at itinatakda lahat ng pixel sa pula.

Pakikipag-ugnayan sa WebAssembly

Ginagamit ang TypedArray para sa pagpapalitan ng binary data sa pagitan ng JavaScript at WebAssembly. Sa pamamagitan ng pagbabahagi ng memory space ng JavaScript at WebAssembly gamit ang ArrayBuffer, posible ang mabilis na pagpapalitan ng data.

Pagpoproseso ng audio at video na data

May mahalagang papel ang TypedArray sa pagpoproseso ng audio at video. Puwede mong iimbak ang mga waveform ng audio data sa Float32Array para sa pag-playback at pagproseso.

Konklusyon

Ang TypedArray ay isang makapangyarihang kagamitan para sa mahusay na paghawak ng malalaking dami ng binary data. Ito ay lalo nang kapaki-pakinabang sa mga application na kritikal sa performance tulad ng pagproseso ng imahe, WebAssembly, at pagproseso ng audio/video na data. Ang TypedArray ay may API na kapareho ng karaniwang arrays, ngunit may mga limitasyon sa paggamit ng memory at mga uri ng data, kaya kinakailangan ng tamang pagkakaiba sa paggamit.

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