`DataView` dalam JavaScript

Artikel ini menerangkan DataView dalam JavaScript.

Kami akan menjelaskan secara terperinci penggunaan asas DataView dan contoh khusus penggunaannya.

YouTube Video

DataView dalam JavaScript

DataView dalam JavaScript adalah API yang mudah untuk mengendalikan data yang disimpan dalam buffer (ArrayBuffer) dalam pelbagai format. Ini memungkinkan pembacaan dan penulisan data binari yang fleksibel dan cekap, memainkan peranan penting dalam komunikasi rangkaian, pemprosesan fail, dan antara muka dengan WebAssembly.

Apakah DataView?

DataView menyediakan lapisan pandangan ke atas objek ArrayBuffer, yang membolehkan anda membaca dan menulis pelbagai jenis data (seperti integer, nombor floating-point, dan aksara) dari mana-mana byte offset. DataView serupa dengan TypedArray, tetapi ia dicirikan oleh kemampuan untuk menentukan pengurutan endianness dan melaksanakan operasi terperinci pada tahap byte.

Sintaks Asas DataView

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

DataView mempunyai pembina yang menggunakan ArrayBuffer sebagai argumen. Dalam contoh ini, buffer 16-byte dicipta, dan DataView digunakan untuk mengakses buffer tersebut. Dengan menggunakan DataView, anda boleh menentukan saiz byte yang berbeza dan endianness (big-endian atau little-endian) semasa membaca dari atau menulis ke data yang disimpan dalam buffer.

Kaedah Asas DataView

DataView menyediakan kaedah untuk membaca dan menulis nilai pelbagai jenis data. Kaedah ini terutamanya dibahagikan kepada kaedah get untuk pembacaan data dan kaedah set untuk penulisan.

Kaedah utama ditunjukkan di bawah.

Kaedah untuk Membaca Nilai

• getInt8(byteOffset): Membaca integer bertanda 1-byte pada offset yang ditentukan.
• getUint8(byteOffset): Membaca integer tidak bertanda 1-byte pada offset yang ditentukan.
• getInt16(byteOffset, littleEndian): Membaca integer bertanda 2-byte.
• getUint16(byteOffset, littleEndian): Membaca integer tidak bertanda 2-byte.
• getInt32(byteOffset, littleEndian): Membaca integer bertanda 4-byte.
• getUint32(byteOffset, littleEndian): Membaca integer tidak bertanda 4-byte.
• getFloat32(byteOffset, littleEndian): Membaca nombor floating-point 4-byte IEEE 754.
• getFloat64(byteOffset, littleEndian): Membaca nombor floating-point 8-byte IEEE 754.

Kaedah untuk Menulis Nilai

• setInt8(byteOffset, value): Menulis integer bertanda 1-byte.
• setUint8(byteOffset, value): Menulis integer tidak bertanda 1-byte.
• setInt16(byteOffset, value, littleEndian): Menulis integer bertanda 2-byte.
• setUint16(byteOffset, value, littleEndian): Menulis integer tidak bertanda 2-byte.
• setInt32(byteOffset, value, littleEndian): Menulis integer bertanda 4-byte.
• setUint32(byteOffset, value, littleEndian): Menulis integer tidak bertanda 4-byte.
• setFloat32(byteOffset, value, littleEndian): Menulis nombor floating-point 4-byte IEEE 754.
• setFloat64(byteOffset, value, littleEndian): Menulis nombor floating-point 8-byte IEEE 754.

Dengan menggunakan kaedah-kaedah ini, anda boleh membaca dan menulis data yang disimpan dalam ArrayBuffer secara fleksibel.

Contoh menggunakan DataView

Mari kita lihat contoh memanipulasi data binari menggunakan DataView.

Contoh 1: Menulis dan membaca integer 16-bit

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

• Dalam contoh ini, kaedah setInt16 digunakan untuk menulis integer bertanda 16-bit dalam format little-endian, dan kaedah getInt16 membaca nilai itu dalam little-endian.

Contoh 2: Menulis dan membaca nombor floating-point

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

• Dalam contoh ini, kaedah setFloat64 digunakan untuk menulis nombor floating-point 64-bit dalam format big-endian, dan nilai itu dibaca dengan getFloat64.

Mengenai Endian

Mari kita lihat contoh membaca dan menulis nilai dalam format big-endian dan little-endian menggunakan 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));

Dalam kaedah DataView, data disimpan dalam format big-endian (susunan byte dari byte paling signifikan ke byte kurang signifikan) secara lalai, tetapi little-endian boleh ditetapkan secara pilihan. Little-endian membalikkan susunan byte (dari byte kurang signifikan ke byte paling signifikan). Adalah penting untuk mengendalikan keendianan data dengan betul kerana sistem dan protokol rangkaian yang berbeza menggunakan keendianan yang berbeza.

Perbezaan dari TypedArray

Mari kita lihat perbezaan antara DataView dan 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*/

TypedArray juga menyediakan operasi buffer berdasarkan ArrayBuffer, tetapi TypedArray sesuai untuk mengendalikan data bersebelahan dengan panjang dan format tetap untuk setiap jenis data. Sebaliknya, DataView boleh mengendalikan pelbagai jenis data dengan fleksibel dan juga membenarkan kawalan ke atas endianness. Oleh itu, DataView sesuai digunakan untuk menganalisis dan membina data binari yang kompleks.

Ringkasan

DataView adalah API yang kuat untuk mengendalikan data binari dalam JavaScript. Anda boleh mengakses ArrayBuffer secara langsung untuk membaca dan menulis data sambil mempertimbangkan integer, nombor titik terapung, dan perbezaan dalam endianness. Ia berguna dalam situasi seperti komunikasi rangkaian dan analisis format fail, dan sangat diperlukan apabila kawalan pada tahap byte diperlukan. Dengan menggunakannya bersama TypedArray, anda boleh melakukan manipulasi data binari dengan lebih cekap.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video