Panduan untuk Pemula: JavaScript DataView

Hai teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia objek DataView. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - pada akhir panduan ini, Anda akan dapat menghandle data biner seperti seorang pro!

Apa Itu DataView?

Sebelum kita masuk ke hal-hal teknis, mari mulai dari dasar. Bayangkan Anda adalah seorang detektif, dan Anda baru saja menerima paket misterius yang penuh dengan data biner. Bagaimana Anda akan memahaminya? Itu di mana DataView datang untuk menyelamatkan!

Objek DataView memungkinkan Anda untuk membaca dan menulis jenis-jenis angka berbeda dalam ArrayBuffer, tanpa peduli apakah komputer Anda menggunakan endianness mana (jangan khawatir, kita akan menjelaskan ini nanti). Itu seperti memiliki pengtranslator universal untuk data biner!

Sintaks

Mari lihat bagaimana kita membuat objek DataView:

new DataView(buffer [, byteOffset [, byteLength]])

Jangan takut! Itu lebih mudah daripada yang tampak. Mari kitauraikan:

• buffer: Ini adalah ArrayBuffer, wadah data biner kita.
• byteOffset (opsional): Dimana di buffer kita ingin mulai membaca.
• byteLength (opsional): Berapa banyak byte kita ingin sisipkan dalam pandangan kita.

Contoh: Membuat Objek DataView

Mari kita kerjakan tangan dan membuat objek DataView pertama kita:

// Pertama, kita buat ArrayBuffer 16 byte
const buffer = new ArrayBuffer(16);

// Sekarang, mari kita buat DataView untuk keseluruhan buffer
const view1 = new DataView(buffer);

// Mari kita buat DataView lain, mulai dari byte 12, dengan panjang 4 byte
const view2 = new DataView(buffer, 12, 4);

console.log(view1.byteLength); // Output: 16
console.log(view2.byteLength); // Output: 4

Dalam contoh ini, pertama-tama kita membuat ArrayBuffer 16 byte. Bayangkan itu seperti kanvas kosong 16 piksel. Kemudian, kita membuat dua objek DataView:

1. view1 menutupi keseluruhan buffer.
2. view2 mulai dari byte 12 dan menutupi 4 byte terakhir.

Itu seperti memiliki dua kaca perbesar berbeda untuk melihat data kita!

Properti JavaScript DataView

DataView datang dengan beberapa properti yang berguna. Mari kita lihat:

Properti	Deskripsi
buffer	Mengembalikan ArrayBuffer yang dituju oleh DataView
byteLength	Mengembalikan panjang (dalam byte) dari DataView
byteOffset	Mengembalikan offset (dalam byte) dari DataView dari awal ArrayBuffer-nya

Berikut cara kita menggunakan properti ini:

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer, 2, 12);

console.log(view.buffer);       // ArrayBuffer(16)
console.log(view.byteLength);   // 12
console.log(view.byteOffset);   // 2

Dalam contoh ini, kita membuat DataView yang mulai dari byte 2 dari buffer kita dan memiliki panjang 12 byte. Properti ini membantu kita mengkonfirmasi rincian ini.

Metode JavaScript DataView

Sekarang, mari kita masuk ke bagian menarik - metode! DataView menyediakan metode untuk membaca dan menulis jenis-jenis angka berbeda. Berikut tabel metode yang paling sering digunakan:

Metode	Deskripsi
getInt8(byteOffset)	Mendapatkan integer 8-bit signed di offset byte yang ditentukan
getUint8(byteOffset)	Mendapatkan integer 8-bit unsigned di offset byte yang ditentukan
getInt16(byteOffset [, littleEndian])	Mendapatkan integer 16-bit signed di offset byte yang ditentukan
getUint16(byteOffset [, littleEndian])	Mendapatkan integer 16-bit unsigned di offset byte yang ditentukan
getInt32(byteOffset [, littleEndian])	Mendapatkan integer 32-bit signed di offset byte yang ditentukan
getUint32(byteOffset [, littleEndian])	Mendapatkan integer 32-bit unsigned di offset byte yang ditentukan
getFloat32(byteOffset [, littleEndian])	Mendapatkan float 32-bit di offset byte yang ditentukan
getFloat64(byteOffset [, littleEndian])	Mendapatkan float 64-bit di offset byte yang ditentukan

Ada juga metode set yang sesuai untuk setiap metode get.

Mari kita lihat beberapa metode ini dalam aksi:

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);

// Mari kita tulis beberapa data
view.setInt16(0, 42);
view.setFloat32(2, 3.14);

// Sekarang, mari kita baca data
console.log(view.getInt16(0));   // Output: 42
console.log(view.getFloat32(2)); // Output: 3.140000104904175

Dalam contoh ini, kita menulis integer 16-bit (42) di offset byte 0, dan float 32-bit (3.14) di offset byte 2. Kemudian, kita membaca kembali nilai ini. Perhatikan bahwa nilai float bukanlah tepat 3.14 - ini disebabkan oleh cara floating-point disimpan dalam biner.

Misteri Endianness

Ingat saat saya menyebutkan endianness sebelumnya? Itu saatnya untuk membongkar misteri ini! Endianness merujuk kepada urutan di mana byte diatur menjadi nilai numerik yang lebih besar. Ada dua jenis:

1. Little-endian: Byte terkecil datang pertama.
2. Big-endian: Byte terbesar datang pertama.

Bayangkan seperti menulis nomor: 123 adalah big-endian (digit paling signifikan pertama), sedangkan 321 akan menjadi little-endian.

Keindahan DataView adalah bahwa dia memungkinkan Anda menentukan endianness saat membaca atau menulis nilai multi-byte. Mari kita lihat contoh:

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);

view.setUint16(0, 0x1234, true);  // true untuk little-endian
view.setUint16(2, 0x5678, false); // false (atau diabaikan) untuk big-endian

console.log(view.getUint16(0, true));  // 0x1234
console.log(view.getUint16(0, false)); // 0x3412
console.log(view.getUint16(2, true));  // 0x7856
console.log(view.getUint16(2, false)); // 0x5678

Dalam contoh ini, kita menulis nilai yang sama dalam endianness berbeda dan kemudian membacanya dalam kedua endiannesses. Itu seperti dapat membaca buku baik dari kiri ke kanan maupun kanan ke kiri!

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia DataView. Kita telah menjelajahi membuat objek DataView, menggunakan propertinya, dan memanipulasi data dengan metode-metode nya. Kita bahkan telah membongkar misteri endianness!

Ingat, bekerja dengan data biner mungkin tampak menakutkan pada awalnya, tapi dengan DataView, Anda memiliki alat yang kuat dan multifungsi. Itu seperti memiliki pisau瑞士 Army knife untuk data biner - multifungsi, presisi, dan sangat berguna.

Buatlanjutkan perjalanan JavaScript Anda, Anda akan menemukan bahwa DataView sangat nilai untuk bekerja dengan struktur data biner kompleks, seperti yang digunakan dalam format berkas atau protokol jaringan. Terus latihan, dan segera Anda akan dapat memanipulasi bit dan byte seperti seorang detektif coding yang benar!

Credits: Image by storyset