`ArrayBuffer` dalam JavaScript

Artikel ini menerangkan ArrayBuffer dalam JavaScript.

Kami akan menerangkan semuanya tentang ArrayBuffer, daripada asas hingga kepada penggunaannya, jenis berkaitan, dan aplikasi praktikal.

YouTube Video

ArrayBuffer dalam JavaScript

ArrayBuffer dalam JavaScript adalah satu objek untuk mengendalikan data binari aras rendah dan sangat berguna untuk memanipulasi data binari dalam WebAPIs, operasi fail, dan komunikasi rangkaian.

Apakah ArrayBuffer

ArrayBuffer ialah satu struktur data untuk mengendalikan data binari dengan panjang tetap. Ia membolehkan pengendalian data binari mentah yang tidak boleh dikendalikan oleh array atau objek JavaScript biasa.

ArrayBuffer itu sendiri tidak boleh memanipulasi data secara langsung. Sebaliknya, data dibaca dan ditulis menggunakan TypedArray atau DataView yang berdasarkan sebuah ArrayBuffer.

ArrayBuffer sangat berguna dalam keadaan-keadaan berikut.

• Semasa memproses data binari yang diterima dari rangkaian
• Apabila perkongsian data yang cekap dalam Web Worker diperlukan.
• Apabila menjalankan pemprosesan imej atau rendering 3D dengan Canvas atau WebGL.
• Apabila memanipulasi fail (terutamanya fail binari).

Mencipta sebuah ArrayBuffer

Pertama, mari kita mulakan dengan cara untuk mencipta satu instance ArrayBuffer. ArrayBuffer memperuntukkan memori dalam unit bait, jadi anda tentukan saiznya semasa penciptaan.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• Dalam contoh ini, sebuah buffer sebanyak 16 bait diperuntukkan. Buffer ini belum mengandungi sebarang data.

Memanipulasi data dengan TypedArray

Anda tidak boleh mengakses ArrayBuffer secara langsung, jadi anda gunakan TypedArray untuk membaca dan menulis data. TypedArray menyediakan pelbagai jenis pandangan seperti Int8Array dan Float32Array, yang membolehkan akses data binari dengan cekap.

Contoh menggunakan Int8Array

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42

• Int8Array boleh menyimpan data pada setiap bait, membolehkan buffer menyimpan 8 elemen. Dengan menggunakan pelbagai jenis paparan, anda boleh memanipulasi data dengan cekap.

Contoh lain TypedArray

JavaScript mempunyai pelbagai jenis TypedArray. Sebagai contoh, jika anda ingin mengendalikan integer tanpa tanda 32-bit, gunakan Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• Uint32Array boleh menyimpan data dalam unit 4-bait, jadi penimbal boleh memuatkan empat elemen. Adalah penting untuk memilih TypedArray yang sesuai berdasarkan jenis data yang anda kendalikan.

Manipulasi data yang fleksibel menggunakan DataView

TypedArray hanya boleh mengendalikan data dengan jenis tetap, tetapi dengan menggunakan DataView, anda boleh menulis data dari sebarang jenis ke mana-mana lokasi. Ini sangat berguna apabila menangani penimbal yang mengandungi jenis data bercampur.

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

Dengan menggunakan DataView, anda boleh menentukan offset bait dan membaca atau menulis data dengan pelbagai jenis. Ini sangat berguna apabila mengendalikan struktur binari yang kompleks seperti protokol rangkaian atau format fail.

Pertimbangan Endianness

Apabila menggunakan DataView, anda juga perlu memberi perhatian kepada endianness (susunan bait). Bergantung pada seni bina komputer, susunan data yang disimpan dalam ingatan boleh berbeza. Kaedah DataView mempunyai pilihan untuk menentukan endianness.

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

Jika anda tidak menentukan endianness yang betul, data mungkin tidak ditafsirkan dengan betul dalam persekitaran yang berbeza, jadi adalah penting untuk berhati-hati dalam komunikasi rangkaian atau operasi fail.

Aplikasi ArrayBuffer

ArrayBuffer ialah alat yang berkuasa yang sering digunakan dalam pembangunan web dan API pelayar. Mari kita lihat beberapa contoh aplikasi.

Menerima dan Memproses Data Binari

Sebagai contoh, anda boleh mendapatkan data binari daripada pelayan menggunakan XMLHttpRequest atau API fetch dan mengendalikannya sebagai ArrayBuffer.

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });

• Dalam contoh ini, data imej diperoleh daripada pelayan dan dikendalikan sebagai Uint8Array. Dengan cara ini, anda boleh memproses data yang diterima daripada pelayan menggunakan ArrayBuffer.

Penggunaan dalam WebGL

Dalam WebGL, ArrayBuffer digunakan untuk mengendalikan data binari seperti data bucu dan data warna dengan cekap.

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

• Dalam contoh ini, Float32Array digunakan untuk menentukan koordinat bucu segi empat tepat dan menghantarnya ke penimbal WebGL.

Pengurusan Memori dan ArrayBuffer

ArrayBuffer mengurus memori di peringkat bait, menjadikannya sangat cekap, tetapi anda juga perlu berhati-hati dengan pengurusan memori. Apabila berurusan dengan data binari yang besar, adalah penting untuk melepaskan ArrayBuffer yang tidak digunakan dengan betul. Walaupun JavaScript secara automatik melakukan pengumpulan sampah, jika ArrayBuffer terus dirujuk, ia boleh menyebabkan kebocoran memori.

Ringkasan

ArrayBuffer menyediakan asas untuk pemprosesan data binari dalam JavaScript. Dengan menggabungkan TypedArray dan DataView, adalah mungkin untuk mengendalikan data binari dengan cekap dan fleksibel. Alat ini sangat penting dalam pembangunan web, terutamanya dalam banyak situasi yang melibatkan pengendalian data binari seperti komunikasi rangkaian dan WebGL. Dengan memahami mereka dengan betul dan menggunakannya secara sesuai, anda boleh meningkatkan prestasi dan kecekapan.

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

YouTube Video