TypedArray dalam JavaScript

Artikel ini menjelaskan tentang TypedArray dalam JavaScript.

Kami akan menjelaskan secara rinci konsep dasar TypedArray, setiap tipe, cara menggunakannya, dan kasus penggunaan spesifik.

YouTube Video

TypedArray dalam JavaScript

TypedArray dalam JavaScript adalah sebuah objek untuk menangani data biner buffered dengan efisien. TypedArray mengalokasikan dan memanipulasi memori berdasarkan jenis data tertentu. Berbeda dengan array biasa, TypedArray hanya dapat menyimpan data biner dengan ukuran tetap, bukan jenis data sembarang.

Struktur Dasar TypedArray

Komponen utama dari TypedArray adalah ArrayBuffer dan TypedArray itu sendiri.

• ArrayBuffer: Sebuah buffer dengan ukuran tetap yang mengalokasikan data biner di dalam memori. Buffer ini hanyalah sebuah area data dan tidak dapat dibaca atau ditulis secara langsung.
• TypedArray: Sebuah objek pembungkus yang menerapkan jenis data tertentu ke buffer, memungkinkan akses dan manipulasi data.

Contoh Penggunaan Dasar

Berikut adalah contoh membuat ArrayBuffer dan kemudian membuat TypedArray berdasarkan buffer tersebut.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• Dalam contoh ini, sebuah ArrayBuffer dibuat, dan kemudian Uint8Array dibuat berdasarkan buffer tersebut. Setiap elemen dianggap sebagai bilangan bulat tanpa tanda 8-bit, menyimpan nilai hanya dalam rentang yang ditentukan.

Jenis-jenis TypedArray

Ada berbagai jenis TypedArray untuk setiap jenis data. Jenis-jenis utamanya adalah sebagai berikut.

TypedArray ini semuanya efisien dalam penggunaan memori dan efektif untuk menangani data dalam jumlah besar.

Memanipulasi TypedArray

Anda dapat mengakses data dalam TypedArray menggunakan indeks, seperti array biasa, tetapi beberapa metode khusus juga disediakan.

Mengatur nilai

Dalam TypedArray, Anda dapat mengatur beberapa nilai sekaligus menggunakan metode set.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Kode ini menggunakan metode set untuk menetapkan beberapa nilai sekaligus ke dalam Int16Array, dan menampilkan setiap elemennya di konsol.

Mendapatkan subarray

Untuk mendapatkan sebagian dari TypedArray sebagai subarray, gunakan metode subarray. Ini merujuk pada buffer yang sama seperti TypedArray asli.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Kode ini mengambil rentang elemen tertentu dari Int16Array menggunakan metode subarray dan menampilkan subarray di konsol.

Menyalin buffer

Buffer dari sebuah TypedArray juga dapat disalin ke TypedArray lain. Dengan menggunakan metode set, Anda dapat menyalin dari posisi yang ditentukan.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Kode ini menyalin isi dari Uint8Array ke array lain menggunakan metode set, dan menampilkan array hasil salinan di konsol.

Menggunakan DataView

Sementara TypedArray menangani buffer dengan tipe data tetap, DataView adalah antarmuka yang memungkinkan manipulasi data biner secara fleksibel dengan offset dan tipe data yang arbitrer. Ini memungkinkan berbagai tipe data dicampur dalam buffer yang sama.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Kode ini menggunakan DataView untuk menulis berbagai jenis data—integer 32-bit dan angka floating-point 32-bit—ke dalam buffer yang sama dan memeriksa hasilnya.

• DataView menawarkan fleksibilitas akses data yang lebih besar dibandingkan TypedArray dan sangat berguna saat bekerja dengan file format biner atau protokol jaringan.

Penggunaan TypedArray

TypedArray terutama digunakan untuk menangani jumlah data biner yang besar secara efisien. Kasus penggunaan khusus meliputi hal-hal berikut.

Pemrosesan gambar

TypedArray digunakan ketika memanipulasi informasi piksel pada data gambar. Dengan menggunakan Uint8Array, Anda menyimpan nilai RGBA dari setiap piksel dan melakukan pengeditan serta pemrosesan gambar.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Kode ini membuat data gambar dengan lebar 100 dan tinggi 100 dalam format RGBA menggunakan Uint8Array, dan mengatur semua piksel menjadi merah.

Antarmuka dengan WebAssembly

TypedArray digunakan untuk pertukaran data biner antara JavaScript dan WebAssembly. Dengan berbagi ruang memori JavaScript dan WebAssembly melalui ArrayBuffer, pertukaran data yang cepat dapat dilakukan.

Pemrosesan data audio dan video

TypedArray memainkan peran penting dalam pemrosesan audio dan video. Anda dapat menyimpan gelombang data audio dalam Float32Array untuk melakukan pemutaran dan pemrosesan.

Kesimpulan

TypedArray adalah alat yang kuat untuk menangani data biner dalam jumlah besar secara efisien. Ini sangat berguna dalam aplikasi yang memerlukan kinerja tinggi seperti pemrosesan gambar, WebAssembly, dan pemrosesan data audio/video. TypedArray memiliki API yang mirip dengan array biasa, tetapi ada batasan terkait penggunaan memori dan jenis data, sehingga diperlukan pembedaan penggunaan yang tepat.

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

YouTube Video