Panduan Awal DataView JavaScript

Hai sana, 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 mengendalikan data biner seperti seorang pro!

Apa Itu DataView?

Sebelum kita masuk ke detilnya, mari kita mulai dari dasar. Bayangkan Anda seorang detektif, dan Anda baru saja menerima paket misterius yang penuh dengan data biner. Bagaimana Anda akan memahaminya? Itu adalah tempat DataView datang ke bantuan!

Objek DataView memungkinkan Anda untuk membaca dan menulis jenisangka ganda di dalam ArrayBuffer, tanpa peduli endianness komputer (jangan khawatir, kita akan menjelaskan ini nanti). Itu seperti memiliki peng.translate universal untuk data biner!

Sintaks

Mari kita 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 dalam buffer kita ingin mulai membaca.
• byteLength (opsional): Berapa banyak byte kita ingin termasuk dalam pandangan kita.

Contoh: Membuat Objek DataView

Mari kita kerjakan keras dan membuat objek DataView pertamanya:

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

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

// Mari kita buat DataView lainnya, 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 sebagai 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 DataView JavaScript

DataView datang dengan beberapa properti yang praktis. 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 adalah 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 DataView JavaScript

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

Metode	Deskripsi
getInt8(byteOffset)	Mendapatkan integer 8-bit ter tandat di offset byte yang ditentukan
getUint8(byteOffset)	Mendapatkan integer 8-bit tak ter tandat di offset byte yang ditentukan
getInt16(byteOffset [, littleEndian])	Mendapatkan integer 16-bit ter tandat di offset byte yang ditentukan
getUint16(byteOffset [, littleEndian])	Mendapatkan integer 16-bit tak ter tandat di offset byte yang ditentukan
getInt32(byteOffset [, littleEndian])	Mendapatkan integer 32-bit ter tandat di offset byte yang ditentukan
getUint32(byteOffset [, littleEndian])	Mendapatkan integer 32-bit tak ter tandat 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 karena cara float disimpan dalam biner.

Misteri Endianness

Ingat saat saya mengacu pada endianness sebelumnya? Itu saatnya untuk membongkar misteri ini! Endianness merujuk pada urutan di mana byte diatur ke dalam 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 angka: 123 adalah big-endian (digit paling signifikan pertama), sedangkan 321 akan menjadi little-endian.

Keindahan DataView adalah bahwa ia 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 kembali dalam kedua endianness. Itu seperti dapat membaca buku baik dari kiri ke kanan maupun kanan ke kiri!

Kesimpulan

Selamat! Anda baru saja 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 kuat di tangan Anda. Itu seperti memiliki pisau瑞士 Army untuk data biner - multifungsi, presisi, dan sangat berguna.

Buat terus melanjutkan perjalanan JavaScript Anda, Anda akan menemukan DataView sangat berharga saat bekerja dengan struktur data biner kompleks, seperti yang digunakan dalam format file atau protokol jaringan. Terus latihan, dan segera Anda akan dapat mengendalikan bit dan byte seperti seorang detektif coding sejati!

Credits: Image by storyset