Saya percaya bahwa setiap pelajar JavaScript akan memahami berbagai tipe data dasar JS. Array adalah kombinasi data. Ini adalah konsep yang sangat mendasar dan sederhana. Tidak memiliki banyak konten, dan tidak sulit untuk mempelajarinya dengan baik. Tapi yang penting dalam artikel ini bukanlah array yang biasanya kita lihat, tetapi arraybuffer.
Banyak hal yang saya tulis dengan sengaja dirangkum karena mereka ingin menyelesaikan fungsi spesifik tertentu. Mereka dapat dianggap sebagai memo, dan hal yang sama berlaku untuk artikel ini! Saya telah mempelajari pengetahuan yang berkaitan dengan API audio web dan komunikasi suara beberapa waktu lalu. Konten berfokus pada aliran aliran audio antara berbagai node audiocontext. Sekarang saya perlu memahami format data seperti apa audio ke aliran, sehingga penelitian tentang ArrayBuffer sangat penting.
Array Stack Model dalam Memori
Akuisisi Array
Cara menghasilkan array di javascript:
Salinan kode adalah sebagai berikut:
[Element0, Element1, ..., Elementn]
Array Baru (Element0, Element1, ..., Elementn)
Array baru (arraylength)
Tentukan secara langsung, atau buat array melalui konstruktor, tentu saja, Anda juga dapat menggunakan cara lain:
Salinan kode adalah sebagai berikut:
"array" .split ("");
"Array" .Match (/a | r/g);
Tunggu, ada banyak cara. Tapi saya khawatir banyak orang tidak terlalu jelas tentang struktur seperti apa array di dalamnya.
Model tumpukan
Dalam array kita dapat menempatkan banyak data dari berbagai tipe data, seperti:
Salinan kode adalah sebagai berikut:
var arr = [21, "li jing", date baru (), function () {} ,, null];
Array di atas berisi angka, string, objek, fungsi, tidak terdefinisi dan nol sekaligus. Kita dapat menggambarkan antarmuka data di atas secara konkret:
Salinan kode adalah sebagai berikut:
Tumpukan
+------------------------------------------------------------------------------------------------------------------------------
| 21 | +---------------------------+
+ ----------+ | |
| "Li Jing" | | |
+ ----------+ | + ---------+ |
| [Referensi] | -----------> | Objek | |
+ ----------+ | + ---------+ |
| [REFER] | ------------------>+ ---------+ |
+ ----------+ | | Fungsi | |
| tidak terdefinisi | | + ---------+ |
+ ----------+ | |
| null | +-------------------------+
+ -----------+ Dibuat oleh Barret Lee
Jenis data JavaScript dibagi menjadi dua jenis, satu adalah tipe nilai dan yang lainnya adalah tipe referensi. Jenis referensi umum termasuk objek dan array. Dalam model penyimpanan array, jika data jenis nilai seperti angka dan string, data akan langsung didorong ke tumpukan, sedangkan tipe referensi hanya akan didorong ke dalam indeks nilai. Konsep bahasa C adalah hanya menyimpan pointer data, dan data ini disimpan di blok heap tertentu. Tumpukannya tidak independen, dan tumpukan juga dapat disimpan di tumpukan.
Oke, itu saja untuk penjelasan array. Mari kita bicara tentang pengetahuan yang relevan tentang ArrayBuffer secara rinci.
ArrayBuffer
Apa webnya? Apa masalah paling mendasar yang perlu dibahas oleh web? Saya pikir ada dua poin: satu adalah data dan yang lainnya adalah transmisi data. Adapun tampilan data, itu rumit dan ini harus menjadi sesuatu di lapisan atas web. ArrayBuffer yang akan dibahas dalam artikel ini adalah tipe data yang paling dasar, dan bahkan tidak dapat disebut tipe data. Mudah dibaca dan ditulis dengan cara lain.
Definisi poin resmi:
ArrayBuffer adalah tipe data yang digunakan untuk mewakili buffer data biner generik, fixed-length. Anda tidak dapat secara langsung memanipulasi isi arraybuffer; Sebagai gantinya, Anda membuat objek ArrayBufferView yang mewakili buffer dalam format tertentu, dan menggunakannya untuk membaca dan menulis konten buffer.
Buffer asli yang mewakili data biner, yang digunakan untuk menyimpan data dari berbagai jenis array. ArrayBuffer tidak dapat dibaca atau ditulis secara langsung, tetapi dapat diteruskan ke array yang diketik atau objek DataView sesuai kebutuhan untuk menafsirkan buffer asli.
Ini adalah buffer mentah data biner. Meskipun JavaScript adalah bahasa tipe lemah, itu sendiri memiliki keterbatasan pada jenis dan ukuran data. Kita perlu membaca konten buffer dengan cara yang tertib (menuliskannya) melalui struktur data tertentu.
Pembuatan buffer asli
Konstruktor ArrayBuffer dapat membuat buffer mentah:
Salinan kode adalah sebagai berikut:
var buffer = arraybuffer baru (30);
Dari konsol chrome Anda dapat melihat:
Contoh buffer memiliki atribut panjang bytel, yang digunakan untuk mendapatkan ukuran buffer, metode irisan yang hanya didukung oleh IE11+ dan iOS6+, yang digunakan untuk mencegat panjang buffer.
Salinan kode adalah sebagai berikut:
ArrayBuffer Slice (
Mulai lama tanpa tanda tangan
Opsional Long End yang tidak ditandatangani
);
Anda dapat menguji demo ini:
Salinan kode adalah sebagai berikut:
var buffer = arraybuffer baru (12);
var x = int32Array baru (buffer);
x [1] = 1234;
var slice = buffer.slice (4);
var y = int32Array baru (slice);
console.log (x [1]);
console.log (y [0]);
x [1] = 6789;
console.log (x [1]);
console.log (y [0]);
Array berbasis data
Jenis array yang diketik mewakili berbagai tampilan objek arraybuffer yang dapat diindeks dan dimanipulasi. Semua jenis array memiliki panjang tetap.
Salinan kode adalah sebagai berikut:
Deskripsi Ukuran Nama (Dalam Bytes)
Int8Array 1 8-Bit Two's Complement Integer
Uint8Array 1 8-bit Integer Unsigned
Int16Array 2 16-bit Two's Complement Integer
Uint16Array 2 16-bit unsigned integer
Int32Array 4 32-bit Two's Complement ditandatangani Integer
UINT32Array 4 32-bit Integer Unsigned
Float32Array 4 32-bit IEEE Floating Point Number
Float64Array 8 64-bit IEEE Floating Point Number
Int adalah bilangan bulat, Uint adalah plastik yang tidak ditandatangani, dan mengapung adalah tipe titik mengambang. Ini adalah konsep dasar dalam bahasa C, jadi saya tidak akan menjelaskannya secara rinci. Karena struktur yang dilihat ini serupa, artikel ini hanya menjelaskan tipe float32Array, dan pembaca dapat belajar darinya satu per satu.
Float32Array sangat mirip dengan array, kecuali bahwa setiap elemen adalah data titik mengambang 32-bit (4-byte). Float32Array Setelah dibuat, ukurannya tidak dapat dimodifikasi.
Kita dapat membuat float32Array secara langsung:
Salinan kode adalah sebagai berikut:
var x = new float32Array (2);
x [0] = 17;
console.log (x [0]); // 17
console.log (x [1]); // 0
console.log (x.length); // 2
Perlu ada konsep bahwa itu masih merupakan array, tetapi setiap elemen dalam array adalah tipe data float 32-bit, misalnya:
Salinan kode adalah sebagai berikut:
var x = float32Array baru ([17, -45.3]);
console.log (x [0]); // 17
console.log (x [1]); // -45.29999923706055
console.log (x.length); // 2
Kami menetapkan nilai array secara langsung ke X, objek float32Array, dan kemudian akan dikonversi menjadi nomor floating point 32-bit sebelum penyimpanan.
Karena setiap elemen dari array kelas ini memiliki jenis yang sama, dalam model tumpukan, mereka semua akan didorong ke dalam tumpukan. Oleh karena itu, array yang dibagikan adalah tipe nilai, dan ini bukan tipe referensi! Ini harus diperhatikan dan juga dapat tercermin dalam contoh -contoh berikut:
Salinan kode adalah sebagai berikut:
var x = float32Array baru ([17, -45.3]);
var y = float32Array baru (x);
console.log (x [0]); // 17
console.log (x [1]); //-45.2999923706055
console.log (x.length); // 2
x [0] = -2;
console.log (y [0]); // 17, nilai y belum berubah
Salin nilai x ke y, ubah x [0], y [0] dan tidak ada perubahan.
Selain metode di atas, kami juga dapat membuat array yang dibagikan dengan cara lain:
Salinan kode adalah sebagai berikut:
var buffer = arraybuffer baru (12);
var x = float32Array baru (buffer, 0, 2);
var y = float32Array baru (buffer, 4, 1);
x [1] = 7;
console.log (y [0]); // 7
Jelaskan mengapa 7 dikembalikan ke sini.
Salinan kode adalah sebagai berikut:
ArrayBuffer (12)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
/ / /
x (float32Array)
Offset: 0
Bytelength: 4
Panjang: 2
ArrayBuffer (12)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
/ / /
y
Dibuat oleh Barret Lee
Apakah Anda masih memiliki pertanyaan setelah membaca ilustrasi di atas? Saya tidak berpikir saya perlu terus menjelaskan. Unit ArrayBuffer dapat dianggap sebagai 1, sedangkan unit float32Array adalah 4.
Objek DataView
Objek DataView mengoperasikan data lebih teliti, tapi saya pikir itu tidak menarik. Berbagai array berbasis data yang disebutkan di atas pada dasarnya dapat memenuhi aplikasi, jadi saya hanya akan menyebutkannya di sini, contoh sederhana:
Salinan kode adalah sebagai berikut:
var buffer = arraybuffer baru (12);
var x = DataView baru (buffer, 0);
x.setint8 (0, 22);
X.SetFloat32 (1, Math.pi);
console.log (x.getInt8 (0)); // 22
console.log (x.getFloat32 (1)); // 3.1415927410125732
Jika Anda tertarik, Anda dapat pindah ke http://www.javascripture.com/dataview untuk informasi terperinci.
ArrayBuffer di XHR2
ArrayBuffer sangat banyak digunakan. Apakah itu Websocket, WebAudio, Ajax, dll., Selama proses besar-end-end data besar atau ingin meningkatkan kinerja pemrosesan data, ArrayBuffer harus sangat diperlukan.
XHR2 bukanlah hal baru. Anda mungkin telah menggunakan fitur yang relevan, tetapi Anda tidak tahu bahwa inilah XHR2. Yang paling penting adalah XHR.Responsetype, yang digunakan untuk mengatur format data respons. Parameter opsional adalah: "Teks", "ArrayBuffer", "Blob" atau "Dokumen". Perhatikan bahwa pengaturan (atau mengabaikan) xhr.Responsetype = '' akan mengatur respons ke "teks" secara default. Ada hubungan yang sesuai seperti ini:
Salinan kode adalah sebagai berikut:
Meminta tanggapan
Teks DomString
ArrayBuffer ArrayBuffer
Blob Blob
Dokumen Dokumen
Ambil kastanye:
Salinan kode adalah sebagai berikut:
var xhr = xmlhttpRequest baru ();
xhr.open ('get', '/path/to/image.png', true);
xhr.responsetype = 'arrayBuffer';
xhr.onload = function (e) {
// this.response == uint8Array.buffer
var uint8Array = uint8Array baru (this.response);
};
xhr.send ();
Kami mengatur properti ke ArrayBuffer di XHR.Responsetype, sehingga kami dapat menggunakan array berbasis data untuk menerima data yang kami dapatkan!
ringkasan
Artikel ini terutama memperkenalkan bagaimana array disimpan dalam model tumpukan, dan juga menjelaskan secara rinci tipe data biner dari arraybuffer, buffer asli. Dalam pengembangan web, penyimpanan data dan data adalah bagian penting, saya berharap dapat menarik perhatian!
Mungkin ada kesalahan dalam narasi artikel ini, harap perbaiki lebih banyak!