Ketahui tentang tatasusunan ditaip dalam JavaScript dalam satu artikel

Artikel ini akan membawa anda melalui tatasusunan yang ditaip dalam JavaScript untuk melihat komposisinya, cara ia berbeza daripada tatasusunan biasa dan penggunaannya dalam pembangunan web.

Dalam JavaScript, kita semua mesti cukup biasa dengan tatasusunan untuk mengetahui bahawa tatasusunan bersifat dinamik dan boleh memegang sebarang objek JavaScript. Walau bagaimanapun, jika anda pernah menggunakan bahasa lain seperti C, anda harus tahu bahawa tatasusunan tidak bersifat dinamik. Dan anda hanya boleh menyimpan jenis data tertentu dalam tatasusunan itu, lagipun, ini memastikan tatasusunan itu lebih cekap dari perspektif prestasi. Walau bagaimanapun, kedinamikan tatasusunan dan kepelbagaian jenis maklumat yang disimpan sebenarnya tidak menjadikan tatasusunan JavaScript tidak cekap. Dengan bantuan pengoptimuman enjin JavaScript, kelajuan pelaksanaan tatasusunan dalam JavaScript sebenarnya sangat pantas.

Apabila aplikasi web menjadi semakin berkuasa, kami mula perlu membiarkan aplikasi web memproses dan memanipulasi data binari mentah. Tatasusunan JavaScript tidak dapat mengendalikan data binari mentah ini, jadi kami memperkenalkan tatasusunan ditaip JavaScript.

Tatasusunan ditaip

Tatasusunan ditaip ialah objek yang hampir sama dengan tatasusunan, tetapi ia menyediakan mekanisme untuk menulis data binari mentah kepada penimbal memori. Ciri ini disokong dengan baik oleh semua pelayar utama dan ES6 telah menyepadukannya ke dalam rangka kerja JavaScript teras, juga memberikan akses kepada kaedah Array seperti map(), filter() dsb. Saya amat mengesyorkan anda meneroka sumber yang dinyatakan pada akhir artikel ini untuk mengetahui lebih lanjut tentang tatasusunan ditaip.

Komposisi

Susun atur ditaip terdiri daripada dua bahagian utama, Buffer dan View.

Penimbal

Buffer ialah objek jenis ArrayBuffer, mewakili blok data. Blok data binari mentah ini tidak boleh diakses atau diubah suai secara individu. Anda mungkin tertanya-tanya apakah kegunaan yang boleh dibuat terhadap objek data yang tidak boleh diakses atau diubah suai. Malah, paparan ialah antara muka baca dan tulis penimbal.

Paparan

View ialah objek yang membolehkan anda mengakses dan mengubah suai kandungan binari mentah yang disimpan dalam ArrayBuffer. Umumnya terdapat dua pandangan.

TypedArray Kejadian objek

Jenis objek ini sangat serupa dengan tatasusunan biasa, tetapi hanya menyimpan satu jenis data berangka. Seperti Int8, Uint8, Int16, Float32 ialah jenis data tatasusunan ditaip. Nombor dalam jenis mewakili bilangan bit yang diperuntukkan untuk jenis data. Contohnya, Int8 mewakili integer 8-bit.

Anda boleh membaca dokumentasi rujukan untuk mengetahui lebih lanjut tentang jenis data tatasusunan ditaip.

DataView Contoh

DataView ialah antara muka peringkat rendah yang menyediakan API getter / setter untuk dibaca dan Tulis data sewenang-wenangnya ke penimbal. Ini sangat memudahkan pembangunan kami, terutamanya apabila kami perlu mengendalikan berbilang jenis data dalam tatasusunan bertaip tunggal.

Satu lagi faedah menggunakan DataView ialah ia membolehkan anda mengawal endianness data - tatasusunan ditaip menggunakan endianness platform. Sudah tentu jika program anda berjalan secara tempatan ini tidak akan menjadi masalah kerana peranti anda akan menggunakan endianness yang sama seperti tatasusunan input. Dalam kebanyakan kes, tatasusunan yang ditaip anda akan menjadi little-endian kerana Intel menggunakan little-endian. Memandangkan Intel begitu biasa dalam pemproses komputer, kebanyakan masa ia tidak akan menjadi masalah. Walau bagaimanapun, jika data yang dikodkan little-endian dihantar ke peranti menggunakan pengekodan besar-endian, ia akan menyebabkan ralat semasa membaca, yang akhirnya boleh menyebabkan kehilangan data. Memandangkan DataView memberi anda kawalan ke atas arah endian, anda boleh menggunakannya apabila perlu.

Apa yang membezakannya daripada tatasusunan biasa

Seperti yang dinyatakan sebelum ini, tatasusunan JavaScript biasa telah dioptimumkan oleh enjin JavaScript dan anda tidak perlu Menggunakan tatasusunan ditaip sebagai ini tidak akan memberi anda banyak peningkatan. Tetapi terdapat beberapa ciri yang menjadikan tatasusunan ditaip berbeza daripada tatasusunan biasa, yang mungkin menjadi sebab anda memilihnya.

• Membolehkan anda mengendalikan data binari mentah
• Memandangkan jenis data yang dikendalikannya adalah terhad, lebih mudah untuk enjin anda mengoptimumkan tatasusunan yang ditaip berbanding tatasusunan biasa kerana pengoptimuman tatasusunan biasa. , ia adalah satu proses yang sangat rumit.
• Tiada jaminan bahawa tatasusunan biasa akan dioptimumkan, kerana enjin anda mungkin memutuskan untuk tidak mengoptimumkan atas pelbagai sebab.

Penggunaan dalam Pembangunan Web

XMLHttpRequest API

Anda boleh menggunakan ArrayBuffer

const xhr = new XMLHttpRequest();
xhr.open('GET', exampleUrl);
xhr.responseType = 'arraybuffer';

xhr.onload = function () {
    const arrayBuffer = xhr.response;
    // 处理数据
};

xhr.send();

🎜> Borang menerima respons data.

API Ambil

ArrayBufferarrayBuffer()Serupa dengan API XMLHttpRequest, API Ambil juga membenarkan anda menerima respons dalam ArrayBuffer. Anda hanya menggunakan kaedah Promise dalam respons API ambil dan anda akan menerima

yang dihuraikan menggunakan

fetch(url)
.then(response => response.arrayBuffer())
.then(arrayBuffer => {
   // 处理数据
});

.

Kanvas HTML

Elemen Kanvas HTML5 membolehkan anda menghasilkan bentuk 2D dinamik dan imej peta bit. Elemen ini hanya bertindak sebagai bekas untuk grafik, yang dilukis dengan bantuan JavaScript. Konteks 2D Uint8ClampedArray

kanvas membolehkan anda mendapatkan semula data bitmap sebagai contoh

const canvas = document.getElementById('my_canvas');
const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const uint8ClampedArray = imageData.data;

. Mari kita lihat contoh kod yang disediakan oleh Dr. Axel:

WebGL

WebGL membolehkan anda memaparkan grafik 3D dan 2D interaktif berprestasi tinggi. Ia sangat bergantung pada tatasusunan ditaip kerana ia memproses data piksel mentah untuk mengeluarkan grafik yang diperlukan pada kanvas. Anda boleh membaca lebih lanjut tentang asas WebGL dalam

artikel ini

.

Web Socket

const socket = new WebSocket("ws://localhost:8080");
socket.binaryType = "arraybuffer";

// 监听 message
socket.addEventListener("message", function (event) {
    const view = new DataView(event.data);
    // 处理接收数据
});

// 发送二进制数据
socket.addEventListener('open', function (event) {
    const typedArray = new Uint16Array(7);
    socket.send(typedArray.buffer);
});

Web Socket membolehkan anda menghantar dan menerima data binari mentah dalam bentuk gumpalan atau penimbal tatasusunan.

Walaupun pemula mungkin tidak memerlukan pemahaman terperinci tentang tatasusunan yang ditaip, mereka adalah penting semasa anda beralih ke pembangunan JavaScript pertengahan dan lanjutan. Ini terutamanya kerana anda mungkin ingin membangunkan aplikasi yang lebih kompleks yang memerlukan penggunaan tatasusunan ditaip.

Untuk mengetahui lebih lanjut tentang tatasusunan ditaip, terokai pautan sumber yang dilampirkan di bawah.

Terima kasih kerana membaca dan selamat berprogram! !

Sumber

• JavaScript Typed Arrays - Dokumentasi MDN

• Meneroka JS oleh Dr. Axel

Alamat asal: https://blog.bitsrc.io/javascript-typed-arrays-ccfa5ae8838d

Pengarang asal: Mahdhi Rezvi

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari:

Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Ketahui tentang tatasusunan ditaip dalam JavaScript dalam satu artikel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!