TypedArray dalam JavaScript

Artikel ini menerangkan TypedArray dalam JavaScript.

Kami akan menerangkan secara terperinci konsep asas TypedArray, setiap jenisnya, cara menggunakannya, dan kes penggunaan tertentu.

YouTube Video

TypedArray dalam JavaScript

TypedArray dalam JavaScript adalah objek untuk mengendalikan data binari buffered secara berkesan. TypedArray memperuntukkan dan memanipulasikan memori berdasarkan jenis data tertentu. Tidak seperti array biasa, TypedArray hanya boleh memuatkan data binari bersaiz tetap, bukan jenis data sewenang-wenangnya.

Struktur Asas TypedArray

Komponen utama TypedArray ialah ArrayBuffer dan TypedArray itu sendiri.

• ArrayBuffer: Penimbal bersaiz tetap yang memperuntukkan data binari dalam memori. Penimbal ini hanyalah kawasan data dan tidak boleh dibaca atau ditulis secara langsung.
• TypedArray: Objek pemutar yang menggunakan jenis data tertentu pada penimbal, membolehkan akses dan manipulasi data.

Contoh Penggunaan Asas

Berikut adalah contoh mencipta ArrayBuffer dan kemudian mencipta TypedArray berdasarkan padanya.

 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, ArrayBuffer dicipta, dan kemudian Uint8Array dihasilkan berdasarkan penimbal tersebut. Setiap elemen dianggap sebagai integer tanpa tanda 8-bit, menyimpan nilai hanya dalam julat yang dinyatakan.

Jenis-jenis TypedArray

Terdapat pelbagai jenis TypedArray untuk setiap jenis data. Jenis utama adalah seperti berikut.

TypedArray ini semuanya cekap memori dan berkesan untuk mengendalikan jumlah data yang besar.

Mengendalikan TypedArray

Anda boleh mengakses data dalam TypedArray menggunakan indeks, seperti array biasa, tetapi beberapa kaedah khas juga disediakan.

Menetapkan nilai

Dalam TypedArray, anda boleh menetapkan pelbagai nilai sekaligus menggunakan kaedah 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

• Kod ini menggunakan kaedah set untuk menetapkan beberapa nilai sekaligus kepada Int16Array, dan memaparkan setiap elemen di konsol.

Mendapatkan subarray

Untuk mendapatkan sebahagian daripada TypedArray sebagai subarray, gunakan kaedah subarray. Ini merujuk kepada buffer yang sama seperti TypedArray asal.

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]

• Kod ini mendapat julat elemen yang ditetapkan dari Int16Array menggunakan kaedah subarray dan memaparkan subarray tersebut di konsol.

Menyalin buffer

Buffer daripada TypedArray juga boleh disalin ke TypedArray lain. Dengan menggunakan kaedah set, anda boleh menyalin daripada posisi yang telah 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]

• Kod ini menyalin kandungan Uint8Array ke array lain menggunakan kaedah set, dan memaparkan array yang telah disalin di konsol.

Menggunakan DataView

Walaupun TypedArray mengendalikan buffer dengan jenis data tetap, DataView adalah antara muka yang membolehkan manipulasi data binari secara fleksibel dengan kecondongan dan jenis data yang sewenangnya. Ini membolehkan pelbagai jenis data dicampurkan 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

• Kod ini menggunakan DataView untuk menulis pelbagai jenis data—integer 32-bit dan nombor terapung 32-bit—ke dalam penampan yang sama dan memeriksa hasilnya.

• DataView menawarkan fleksibiliti akses data yang lebih besar berbanding TypedArray dan amat berguna semasa bekerja dengan fail format binari atau protokol rangkaian.

Kes penggunaan TypedArray

TypedArray digunakan terutamanya untuk mengendalikan sejumlah besar data binari dengan cekap. Kes penggunaan khusus termasuk yang berikut.

Pemprosesan imej

TypedArray digunakan semasa mengendalikan maklumat piksel data imej. Dengan menggunakan Uint8Array, anda menyimpan nilai RGBA bagi setiap piksel dan menjalankan penyuntingan serta pemprosesan imej.

 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}

• Kod ini mencipta data imej dengan lebar 100 dan tinggi 100 dalam format RGBA menggunakan Uint8Array, dan menetapkan semua piksel kepada warna merah.

Berhubung dengan WebAssembly

TypedArray digunakan untuk menukar data binari antara JavaScript dan WebAssembly. Dengan berkongsi ruang memori JavaScript dan WebAssembly melalui ArrayBuffer, pertukaran data yang pantas adalah mungkin.

Memproses data audio dan video

TypedArray memainkan peranan penting dalam memproses audio dan video. Anda boleh menyimpan gelombang data audio dalam Float32Array untuk memainkan dan memprosesnya.

Kesimpulan

TypedArray adalah alat yang kuat untuk mengurus data binari dalam jumlah yang besar dengan cekap. Ia amat berguna dalam aplikasi yang kritikal terhadap prestasi seperti pemprosesan imej, WebAssembly, dan pemprosesan data audio/video. TypedArray mempunyai API yang serupa dengan array biasa, tetapi terdapat batasan berkaitan penggunaan memori dan jenis data, jadi pembezaan yang betul dalam penggunaannya diperlukan.

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

YouTube Video