Articles
Panimula sa JavaScript
`DataView` sa JavaScript

`DataView` sa JavaScript

Ipinaliwanag ng artikulong ito ang DataView sa JavaScript.

Ipapaliwanag namin nang detalyado ang pangunahing paggamit ng DataView at mga tiyak na halimbawa ng paggamit nito.

YouTube Video

DataView sa JavaScript

Ang DataView ng JavaScript ay isang maginhawang API para sa pagmamanipula ng data na nakaimbak sa isang buffer (ArrayBuffer) sa iba't ibang mga format. Pinapayagan nito ang flexible at mahusay na pagbabasa at pagsusulat ng binary data, na may mahalagang papel sa network communication, pagproseso ng file, at pakikipag-ugnayan sa WebAssembly.

Ano ang DataView?

Nagbibigay ang DataView ng isang view layer sa ibabaw ng isang ArrayBuffer na object, na nagpapahintulot sa iyo na magbasa at magsulat ng iba't ibang uri ng data (gaya ng integers, floating-point numbers, at characters) mula sa anumang byte offset. Ang DataView ay katulad ng TypedArray, ngunit ito ay natatangi dahil sa kakayahan nitong tukuyin ang endianness at magsagawa ng detalyadong operasyon sa byte level.

Pangunahing Sintaks ng DataView 

1let buffer = new ArrayBuffer(16);  // Create a 16-byte ArrayBuffer
2let view = new DataView(buffer);    // Manipulate the buffer with a DataView

Ang DataView ay may constructor na tumatanggap ng ArrayBuffer bilang argumento. Sa halimbawang ito, isang 16-byte na buffer ang nilikha, at ang DataView ay ginamit upang ma-access ang buffer na iyon. Gamit ang DataView, maaari kang mag-specify ng iba't ibang laki ng byte at endianness (big-endian o little-endian) kapag nagbabasa o nagsusulat ng data na nakaimbak sa isang buffer.

Pangunahing Mga Pamamaraan ng DataView

Ang DataView ay nagbibigay ng mga pamamaraan para sa pagbabasa at pagsusulat ng mga halaga ng iba't ibang uri ng data. Ang mga ito ay pangunahing nahahati sa mga get na pamamaraan para sa pagbabasa ng data at mga set na pamamaraan para sa pagsusulat.

Ang mga pangunahing pamamaraan ay ipinakita sa ibaba.

Mga Pamamaraan para sa Pagbasa ng Halaga

  • getInt8(byteOffset): Nagbabasa ng 1-byte signed integer sa tinukoy na offset.
  • getUint8(byteOffset): Nagbabasa ng 1-byte unsigned integer sa tinukoy na offset.
  • getInt16(byteOffset, littleEndian): Nagbabasa ng 2-byte signed integer.
  • getUint16(byteOffset, littleEndian): Nagbabasa ng 2-byte unsigned integer.
  • getInt32(byteOffset, littleEndian): Nagbabasa ng 4-byte signed integer.
  • getUint32(byteOffset, littleEndian): Nagbabasa ng 4-byte unsigned integer.
  • getFloat32(byteOffset, littleEndian): Nagbabasa ng 4-byte na IEEE 754 floating-point number.
  • getFloat64(byteOffset, littleEndian): Nagbabasa ng 8-byte na IEEE 754 floating-point number.

Mga Paraan para sa Pagsulat ng Mga Halaga

  • setInt8(byteOffset, value): Nagsusulat ng 1-byte na signed integer.
  • setUint8(byteOffset, value): Nagsusulat ng 1-byte na unsigned integer.
  • setInt16(byteOffset, value, littleEndian): Nagsusulat ng 2-byte na signed integer.
  • setUint16(byteOffset, value, littleEndian): Nagsusulat ng 2-byte na unsigned integer.
  • setInt32(byteOffset, value, littleEndian): Nagsusulat ng 4-byte na signed integer.
  • setUint32(byteOffset, value, littleEndian): Nagsusulat ng 4-byte na unsigned integer.
  • setFloat32(byteOffset, value, littleEndian): Nagsusulat ng 4-byte na IEEE 754 floating-point number.
  • setFloat64(byteOffset, value, littleEndian): Nagsusulat ng 8-byte na IEEE 754 floating-point number.

Sa paggamit ng mga pamamaraang ito, maaari kang madaling magbasa at magsulat ng datos na nakatabi sa isang ArrayBuffer.

Halimbawa ng paggamit ng DataView

Tingnan natin ang isang halimbawa ng pagmamanipula ng binary data gamit ang DataView.

Halimbawa 1: Pagsulat at pagbasa ng 16-bit integer 

1let buffer = new ArrayBuffer(4);  // Create a 4-byte buffer
2let view = new DataView(buffer);
3
4// Write a 2-byte integer value in little-endian format
5view.setInt16(0, 32767, true);  // byteOffset: 0, value: 32767, littleEndian: true
6
7// Read the data in little-endian format
8let value = view.getInt16(0, true);
9console.log(value);  // Output: 32767
  • Sa halimbawa na ito, ang paraan na setInt16 ay ginagamit upang magsulat ng 16-bit na signed integer sa little-endian na format, at ang getInt16 na paraan ay nagbabasa ng halagang iyon sa little-endian.

Halimbawa 2: Pagsulat at pagbasa ng floating point na numero 

1let buffer = new ArrayBuffer(8);  // Create an 8-byte buffer
2let view = new DataView(buffer);
3
4// Write an 8-byte floating-point number
5view.setFloat64(0, 3.14159, false);  // byteOffset: 0, value: 3.14159, bigEndian: false
6
7// Read the data in big-endian format
8let pi = view.getFloat64(0, false);
9console.log(pi);  // Output: 3.14159
  • Sa halimbawa na ito, ang paraan na setFloat64 ay ginagamit upang magsulat ng 64-bit na floating-point na numero sa big-endian na format, at ang halagang iyon ay binabasa gamit ang getFloat64.

Tungkol sa Endianness

Tingnan natin ang isang halimbawa ng pagbasa at pagsulat ng mga halaga sa big-endian at little-endian na mga format gamit ang DataView.

 1// Example: Handling Endianness with DataView in TypeScript
 2// Create an ArrayBuffer of 4 bytes
 3const buffer = new ArrayBuffer(4);
 4const view = new DataView(buffer);
 5
 6// Store the same number (0x12345678) in both endian formats
 7// By default, DataView uses big-endian
 8view.setUint32(0, 0x12345678); // Big-endian
 9console.log("Big-endian (default):");
10console.log(buffer);
11
12// Overwrite the buffer with little-endian
13view.setUint32(0, 0x12345678, true); // Little-endian
14console.log("Little-endian:");
15console.log(buffer);
16
17// Read values back in both endian modes
18const bigEndianValue = view.getUint32(0); // Big-endian read
19const littleEndianValue = view.getUint32(0, true); // Little-endian read
20
21console.log("Read as Big-endian:", bigEndianValue.toString(16));
22console.log("Read as Little-endian:", littleEndianValue.toString(16));

Sa mga pamamaraang DataView, ang datos ay itinatabi bilang big-endian (pagkasunod ng byte mula sa pinakakahalagahan hanggang sa di-kahalagahan na byte) bilang default, ngunit maaaring tukuyin ang little-endian bilang opsyon. Ang little-endian ay binabaligtad ang pagkakasunod ng byte (mula sa di-kahalagahan hanggang sa pinakakahalagahan na byte). Mahalagang tama ang paghawak ng data endianness dahil magkaiba-iba ang ginagamit na endianness ng iba't ibang sistema at network protocol.

Pagkakaiba mula sa TypedArray

Tingnan natin ang mga pagkakaiba sa pagitan ng DataView at TypedArray.

 1// Example: TypedArray vs DataView
 2
 3// Create a 8-byte buffer
 4const buffer = new ArrayBuffer(8);
 5
 6// --- Using TypedArray (Int32Array) ---
 7const int32View = new Int32Array(buffer);
 8int32View[0] = 42;
 9int32View[1] = 100;
10
11console.log("TypedArray (Int32Array):");
12console.log(int32View); // Int32Array [42, 100]
13
14// --- Using DataView ---
15const dataView = new DataView(buffer);
16
17// Write different types of data at arbitrary byte offsets
18dataView.setInt8(0, 65);         // 1 byte
19dataView.setUint16(1, 500, true); // 2 bytes, little-endian
20dataView.setFloat32(3, 3.14, true); // 4 bytes, little-endian
21
22console.log("\nDataView:");
23console.log("Int8 at 0:", dataView.getInt8(0));      // 65
24console.log("Uint16 at 1:", dataView.getUint16(1, true)); // 500
25console.log("Float32 at 3:", dataView.getFloat32(3, true)); // 3.14
26
27/*
28Output:
29TypedArray (Int32Array):
30Int32Array [42, 100]
31
32DataView:
33Int8 at 0: 65
34Uint16 at 1: 500
35Float32 at 3: 3.140000104904175
36*/

Ang TypedArray ay nagbibigay din ng mga operasyon sa buffer batay sa ArrayBuffer, ngunit ang TypedArray ay angkop para sa pag-operate sa magkakasunod na datos na may nakapirming haba at format para sa bawat uri ng datos. Sa kabilang banda, ang DataView ay maaaring mag-operate nang mas malaya sa iba't ibang uri ng datos at pinapayagan din ang kontrol sa endianness. Samakatuwid, ang DataView ay angkop para sa pag-parse at pagbuo ng kumplikadong binary data.

Buod

Ang DataView ay isang makapangyarihang API para sa paghawak ng binary data sa JavaScript. Maaari mong direktang ma-access ang ArrayBuffer para magbasa at magsulat ng data habang isinaalang-alang ang mga integer, floating-point na numero, at mga pagkakaiba sa endianness. Ito ay kapaki-pakinabang sa mga sitwasyon tulad ng komunikasyon sa network at pag-parse ng format ng file, at hindi maiiwasan kapag kinakailangan ang byte-level na kontrol. Sa pamamagitan ng paggamit nito kasama ang TypedArray, makakagawa ka ng mas epektibong pagmamanipula ng binary data.

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

TypedArray sa JavaScriptSharedArrayBuffer sa JavaScript