TypedArray sa TypeScript

Ipinaliliwanag ng artikulong ito ang TypedArray sa TypeScript.

Ipapaliwanag namin ang TypedArray sa TypeScript, kabilang ang mga praktikal na halimbawa.

YouTube Video

TypedArray sa TypeScript

Ang TypedArray ay isang mekanismo para sa mahusay na paghawak ng binary data. Lalo itong kapaki-pakinabang para sa mga low-level binary operation tulad ng malalaking image data, network byte streams, at mga numeric array para sa WebGL.

Paano gumawa ng ArrayBuffer

Ang ArrayBuffer ay kumakatawan sa isang fixed-length na bahagi ng mga byte. Una, gumawa ng buffer at tingnan ang laki at byte length nito.

1// Create an ArrayBuffer of 16 bytes
2const buffer: ArrayBuffer = new ArrayBuffer(16);
3console.log("buffer.byteLength:", buffer.byteLength); // 16

• Ang code na ito ay lumilikha ng walang laman na bahagi na may 16 na byte. Ang ArrayBuffer mismo ay walang read/write functions, kaya ina-access ito gamit ang TypedArray o DataView.

Mga uri ng TypedArray

Maraming uri ng TypedArray, tulad ng mga sumusunod:. Nagkakaiba-iba ang mga ito depende sa uri at laki ng data na kanilang pinangangasiwaan.

Mga pangunahing TypedArray (Uint8Array, Int16Array, Float32Array, atbp.)

Ang TypedArray ay lumilikha ng 'typed view' sa ibabaw ng isang ArrayBuffer. Narito ang mga halimbawa ng paggawa at paggamit ng ilang karaniwang TypedArray.

 1// Create a buffer and different typed views over it
 2const buf = new ArrayBuffer(8); // 8 bytes
 3
 4// Create views
 5const u8 = new Uint8Array(buf);    // 8 x uint8
 6const i16 = new Int16Array(buf);   // 4 x int16 (since each int16 is 2 bytes)
 7const f32 = new Float32Array(buf); // 2 x float32 (4 bytes each)
 8
 9console.log("Uint8 length:", u8.length);
10console.log("Int16 length:", i16.length);
11console.log("Float32 length:", f32.length);

• Sa pamamagitan ng paggawa ng maraming view sa iisang ArrayBuffer, maaari mong basahin at isulat ang parehong memorya gamit ang iba’t ibang uri o detalye. Ang length ng view ay ang bilang ng mga elemento, at ang byteLength ay ang bilang ng mga byte.

Pagsusulat at pagbasa (mga operasyon sa antas ng byte)

Kapag sumulat ka ng halaga sa isang TypedArray, naa-update ang katumbas na mga byte sa memorya. Makikita mo ang mga pagbabago kapag binasa mo ang parehong buffer gamit ang ibang view.

 1// Demonstrate writing via one view and reading via another
 2const buffer2 = new ArrayBuffer(4);
 3const u8view = new Uint8Array(buffer2);
 4const u32view = new Uint32Array(buffer2);
 5
 6u8view[0] = 0x78;
 7u8view[1] = 0x56;
 8u8view[2] = 0x34;
 9u8view[3] = 0x12;
10
11console.log("Uint8 bytes:", Array.from(u8view)); // [120, 86, 52, 18]
12console.log("Uint32 value (platform endianness):", u32view[0]); // value depends on endianness

• Sa halimbawang ito, nagsusulat tayo ng pagkakasunod-sunod ng byte at binabasa ang parehong bahagi bilang isang 32-bit na integer. Tandaan na ang output ay nakadepende sa endianness ng execution environment.

Endianness (pagkakasunod-sunod ng byte) at DataView

Ang DataView ay kapaki-pakinabang kung gusto mong kontrolin ang mga isyu ng endianness na depende sa environment. Pinapayagan ka ng DataView na tukuyin ang endianness kapag nagbabasa at nagsusulat.

 1// Use DataView to read/write with explicit endianness control
 2const b = new ArrayBuffer(4);
 3const dv = new DataView(b);
 4
 5// write little-endian 32-bit integer
 6dv.setUint32(0, 0x12345678, true);
 7
 8// read as little-endian and big-endian
 9const little = dv.getUint32(0, true);
10const big = dv.getUint32(0, false);
11
12console.log("little-endian read:", little.toString(16)); // "12345678"
13console.log("big-endian read:", big.toString(16));       // different value

• Ang DataView ay isang maginhawang mekanismo para sa detalyadong pagbasa at pagsusulat ng mga byte. Sinusuportahan nito ang iba’t ibang uri, gaya ng signed at unsigned integer, pati floating-point number, at pinapayagan kang tahasang ilagay ang endianness (byte order), na lubhang kapaki-pakinabang kapag nag-iimplement ng binary protocol.

Pagkakaiba ng subarray at slice

Ang subarray ng isang TypedArray ay nagbibigay ng view na ginagamit ang orihinal na buffer, samantalang ang slice ay nagbibigay ng bagong kopya. Nagkakaiba ang performance at mga side effect depende sa iyong ginagamit.

1const base = new Uint8Array([1, 2, 3, 4, 5]);
2
3const shared = base.subarray(1, 4); // shares underlying buffer
4const copied = base.slice(1, 4);    // copies data
5
6shared[0] = 99;
7console.log("base after shared modification:", base); // shows change
8console.log("copied remains:", copied);              // unaffected

• Kung babaguhin mo ang shared view, mababago rin ang orihinal na array, na maaaring magdulot ng hindi inaasahang epekto. Kung nais mong mapanatili nang ligtas ang orihinal na array, maaari kang gumawa ng kopya nito nang maaga gamit ang slice().

Pagkopya ng buffers at conversion ng uri (pagitan ng mga TypedArray)

Ipapaliwanag namin kung paano magkopya ng data sa pagitan ng mga TypedArray at kung paano magsama ng parte gamit ang set method.

 1// Copy and convert between typed arrays
 2const src = new Float32Array([1.5, 2.5, 3.5]);
 3const dst = new Uint16Array(src.length);
 4
 5// Convert by mapping (explicit conversion)
 6for (let i = 0; i < src.length; i++) {
 7  dst[i] = Math.round(src[i]); // simple conversion rule
 8}
 9console.log("converted dst:", Array.from(dst)); // [2, 2, 4]
10
11// Using set to copy bytes (requires compatible underlying buffer or same element type)
12const src2 = new Uint8Array([10, 20, 30]);
13const dst2 = new Uint8Array(6);
14dst2.set(src2, 2); // copy src2 into dst2 starting at index 2
15console.log("dst2 after set:", Array.from(dst2)); // [0,0,10,20,30,0]

• Kung magkaiba ang mga uri ng elemento, kailangan mong i-convert ang mga value, tulad ng pag-round o pag-check ng range, sa halip na direktang pagkopya lang. Pinapayagan ng set ang mabilis na pagkopya sa pagitan ng mga TypedArray na may parehong elemento na uri.

Praktikal na halimbawa: Isang binary protocol parser (simpleng implementasyon)

Dito, ipinapakilala namin ang isang simpleng halimbawa ng parser na nagbabasa ng fixed-format na binary data na binubuo ng 1-byte type, 2-byte data length, at kasunod na payload.

 1// Simple binary message parser:
 2// format: [type: uint8][length: uint16 BE][payload: length bytes]
 3function parseMessages(buffer: ArrayBuffer) {
 4  const dv = new DataView(buffer);
 5  let offset = 0;
 6  const messages: { type: number; payload: Uint8Array }[] = [];
 7
 8  while (offset + 3 <= dv.byteLength) {
 9    const type = dv.getUint8(offset);
10    const length = dv.getUint16(offset + 1, false); // big-endian
11    offset += 3;
12    if (offset + length > dv.byteLength) break; // truncated
13    const payload = new Uint8Array(buffer, offset, length);
14    messages.push({ type, payload });
15    offset += length;
16  }
17
18  return messages;
19}
20
21// Example usage
22const buf = new ArrayBuffer(1 + 2 + 3 + 1 + 2 + 2); // two messages
23const dv = new DataView(buf);
24let off = 0;
25// first message: type=1, length=3, payload=[1,2,3]
26dv.setUint8(off, 1); dv.setUint16(off + 1, 3, false); off += 3;
27new Uint8Array(buf, off, 3).set([1, 2, 3]); off += 3;
28// second message: type=2, length=2, payload=[9,8]
29dv.setUint8(off, 2); dv.setUint16(off + 1, 2, false); off += 3;
30new Uint8Array(buf, off, 2).set([9, 8]);
31
32console.log(parseMessages(buf));

• Sa halimbawang ito, binabasa ang header gamit ang DataView, at ang payload slice ay nililikha gamit ang Uint8Array. Mahalaga ang pag-check ng endianness at buffer length.

Web API at TypedArray (Halimbawa: pagkuha ng binary data)

Ito ay isang karaniwang halimbawa ng paghawak ng ArrayBuffer na nakuha mula sa network request gamit ang TypedArray.

 1// Example of fetching binary and mapping to typed array
 2async function fetchBinary(url: string) {
 3  const res = await fetch(url);
 4  const ab = await res.arrayBuffer();
 5  const view = new Uint8Array(ab);
 6  // process view...
 7  console.log("received bytes:", view.length);
 8  return view;
 9}
10
11// Usage (call in async context)
12// fetchBinary("/path/to/file.bin");

• Maaari mong direktang ipasa ang ArrayBuffer na nakuha mula sa Response.arrayBuffer() papunta sa isang TypedArray. Ginagamit ito para sa mga larawan, tunog, o custom binary protocol.

Mga tip sa performance at karaniwang pagkakamali

Narito ang ilang 'tip sa performance' at 'karaniwang pagkakamali' na makakatulong kapag gumagamit ng TypedArray:.

• Iwasan ang hindi kailangang pagkopya Para maproseso ang malalaking data nang mahusay, maiiwasan mo ang hindi kailangan na pagkopya sa pamamagitan ng paggawa ng partial na views gamit ang subarray o pagbabahagi ng iisang ArrayBuffer sa maraming view.

• Maging maingat sa endianness Para sa network communication o mga file format, madalas na nakatukoy ang pagkakasunod-sunod ng data (byte order). Ang paggamit ng DataView ay nagbibigay daan upang tahasang maitakda ang endianness sa pagbasa't pagsusulat at maiwasan ang hindi inaasahang maling interpretasyon.

• Alamin ang saklaw ng mga halaga para sa bawat uri Halimbawa, ang Uint8 ay makakakatawan lamang ng mga halagang mula 0 hanggang 255. Kung maglalagay ka ng negatibong halaga, maaaring magkaroon ng truncation o value rollover, kaya dapat mong tukuyin ang mga panuntunan sa conversion kung kinakailangan.

• Isaalang-alang ang efekto sa garbage collection Ang madalas na paggawa muli ng malaking ArrayBuffer ay nagpapataas ng pasanin sa pamamahala ng memorya. Sa mga sitwasyong kritikal ang performance, maaari mong isaalang-alang ang pagdisenyo ng code upang magamit muli ang mga umiiral na buffer hangga't maaari.

Buod

Ang TypedArray ay isang mekanismo para sa mabilis at mahusay na paghawak ng binary data. Sa pagsasama ng ArrayBuffer, na nagrereserba ng fixed-length na byte area, at TypedArray o DataView, na bumabasa at nagsusulat gamit ang partikular na uri, maaari kang magsagawa ng flexible na binary operation. Depende sa iyong paggamit, maaari kang pumili sa pagitan ng paggamit ng subarray/slice o DataView, at idisenyo ang iyong implementasyon habang isinasaalang-alang ang endianness at pagkopya.

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