`DataView` dalam JavaScript

Artikel ini menjelaskan DataView dalam JavaScript.

Kami akan menjelaskan secara rinci penggunaan dasar DataView dan contoh spesifik penggunaannya.

YouTube Video

DataView dalam JavaScript

DataView JavaScript adalah API yang nyaman untuk memanipulasi data yang disimpan dalam buffer (ArrayBuffer) dalam berbagai format. Ini memungkinkan pembacaan dan penulisan data biner secara fleksibel dan efisien, memainkan peran penting dalam komunikasi jaringan, pemrosesan file, dan interfacing dengan WebAssembly.

Apa itu DataView?

DataView menyediakan lapisan tampilan di atas objek ArrayBuffer, memungkinkan Anda membaca dan menulis berbagai tipe data (seperti bilangan bulat, bilangan floating-point, dan karakter) dari offset byte tertentu. DataView mirip dengan TypedArray, tetapi memiliki karakteristik kemampuan untuk menentukan endianness dan melakukan operasi rinci pada level byte.

Sintaks Dasar DataView

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

DataView memiliki konstruktor yang menerima ArrayBuffer sebagai argumen. Dalam contoh ini, buffer 16-byte dibuat, dan DataView digunakan untuk mengakses buffer tersebut. Dengan menggunakan DataView, Anda dapat menentukan ukuran byte yang berbeda dan endianness (big-endian atau little-endian) saat membaca atau menulis data yang disimpan dalam buffer.

Metode Dasar DataView

DataView menyediakan metode untuk membaca dan menulis nilai dari berbagai tipe data. Ini dibagi terutama menjadi metode get untuk membaca data dan metode set untuk menulis.

Metode utama ditunjukkan di bawah ini.

Metode untuk Membaca Nilai

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

Metode untuk Menulis Nilai

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

Dengan menggunakan metode ini, Anda dapat secara fleksibel membaca dan menulis data yang disimpan di ArrayBuffer.

Contoh menggunakan DataView

Mari kita lihat contoh memanipulasi data biner 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, metode setInt16 digunakan untuk menulis integer bertanda 16-bit dalam format little-endian, dan metode getInt16 membaca nilai tersebut menggunakan little-endian.

Contoh 2: Menulis dan membaca bilangan 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, metode setFloat64 digunakan untuk menulis bilangan floating-point 64-bit dalam format big-endian, dan nilai tersebut dibaca menggunakan getFloat64.

Tentang 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 metode DataView, data secara default disimpan dalam format big-endian (urutan byte dari byte paling signifikan ke byte paling tidak signifikan), tetapi little-endian dapat ditentukan secara opsional. Little-endian membalikkan urutan byte (dari byte paling tidak signifikan ke byte paling signifikan). Penting untuk menangani endianness data dengan benar karena sistem dan protokol jaringan yang berbeda menggunakan endianness yang berbeda.

Perbedaan dengan TypedArray

Mari kita lihat perbedaan 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 yang berbasis ArrayBuffer, tetapi TypedArray cocok untuk memproses data kontinu dengan panjang dan format tetap untuk setiap jenis data. Sebaliknya, DataView dapat memproses berbagai jenis data secara fleksibel dan juga memungkinkan kontrol atas endian. Oleh karena itu, DataView cocok untuk mem-parsing dan membangun data biner yang kompleks.

Ringkasan

DataView adalah API yang kuat untuk menangani data biner di JavaScript. Anda dapat langsung mengakses ArrayBuffer untuk membaca dan menulis data sambil mempertimbangkan bilangan bulat, angka floating-point, dan perbedaan endianness. Hal ini berguna dalam situasi seperti komunikasi jaringan dan parsing format file, serta sangat penting saat diperlukan kontrol tingkat byte. Dengan menggunakannya bersama dengan TypedArray, Anda dapat melakukan manipulasi data biner dengan lebih efisien.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video