Saya percaya bahawa setiap pelajar javascript akan memahami pelbagai jenis data asas JS Tatasusunan ialah gabungan data Ini adalah konsep yang sangat asas dan mudah, dan ia tidak sukar untuk dipelajari ia penting. Tetapi perkara yang difokuskan oleh artikel ini bukanlah Array yang biasa kita lihat, tetapi ArrayBuffer.
Banyak perkara yang saya tulis sengaja diringkaskan kerana saya ingin menyelesaikan fungsi tertentu yang boleh dianggap sebagai memo, dan perkara yang sama berlaku untuk artikel ini! Beberapa waktu lalu, saya telah mempelajari API Audio Web dan pengetahuan berkaitan komunikasi suara Kandungan memfokuskan pada aliran strim audio antara pelbagai nod AudioContext Sekarang saya perlu mengetahui jenis format data audio tersebut penghujung aliran, jadi saya mempunyai pemahaman yang mendalam tentang ArrayBuffer Research adalah sangat penting.
Tentukan secara langsung, atau buat Array melalui pembina Sudah tentu, anda juga boleh menggunakan kaedah lain:
Tunggu, ada banyak cara. Tetapi apakah struktur dalaman Array, saya takut ramai yang belum begitu jelas.
Kami boleh meletakkan banyak jenis data yang berbeza dalam tatasusunan, seperti:
Tatasusunan di atas mengandungi nombor, rentetan, objek, fungsi, tidak ditentukan dan batal Kami boleh menerangkan antara muka data di atas secara konkrit:
Tumpukan
--------- Timbunan
|. 21 |. -------------------
---------
|. "Li Jing" |
---------
|. [rujuk] |--------->|
---------
|. [rujuk] |------------------>
--------- |. |fungsi|
|undefined|. |
---------
|. null |
--------- Dicipta Oleh Barret Lee
Jenis data JavaScript dibahagikan kepada dua jenis, satu jenis nilai dan satu lagi jenis rujukan biasa ialah Objek dan Tatasusunan, jika ia adalah jenis nilai seperti Nombor dan Rentetan data akan ditolak terus ke tindanan, manakala jenis rujukan hanya akan menolak indeks ke nilai Untuk menerangkannya dari segi bahasa C, hanya penunjuk kepada data disimpan dalam julat tertentu dalam timbunan . Timbunan tidak bebas, dan timbunan juga boleh disimpan dalam timbunan.
Baiklah, itu sahaja untuk penerangan Array Mari kita bercakap tentang pengetahuan berkaitan ArrayBuffer secara terperinci.
ArrayBuffer
Apakah web itu? Apakah isu paling asas untuk dibincangkan di web? Saya fikir terdapat dua mata, satu adalah data dan satu lagi adalah penghantaran data Bagi paparan data, ia adalah sesuatu yang rumit di lapisan atas web. ArrayBuffer yang akan dibincangkan dalam artikel ini adalah jenis data yang paling asas Ia bahkan tidak boleh dipanggil jenis data Ia adalah sekeping data yang perlu dibaca dan ditulis melalui kaedah lain.
Takrif mata rasmi:
ArrayBuffer ialah jenis data yang digunakan untuk mewakili penimbal data binari panjang tetap Anda tidak boleh memanipulasi secara langsung kandungan ArrayBuffer sebaliknya, anda mencipta objek ArrayBufferView yang mewakili penimbal dalam sesuatu yang khusus format dan gunakan itu untuk membaca dan menulis kandungan penimbal.
Mewakili penimbal mentah data binari yang digunakan untuk menyimpan data untuk pelbagai tatasusunan ditaip. ArrayBuffer tidak boleh dibaca atau ditulis secara langsung, tetapi penimbal mentah boleh ditafsirkan seperti yang diperlukan dengan menghantarnya kepada tatasusunan yang ditaip atau objek DataView.
Ia adalah penimbal mentah data binari Walaupun JavaScript adalah bahasa yang ditaip dengan lemah, ia sendiri mempunyai had pada jenis dan saiz data Kami perlu memesan kandungan penimbal melalui beberapa jenis struktur data (tulis dalam).
Penciptaan penimbal mentah
Penimbal mentah boleh dibuat melalui pembina ArrayBuffer:
var buffer = new ArrayBuffer(30);
Anda boleh melihat dari konsol krom:
Timbalan penimbal mempunyai atribut byteLength, yang digunakan untuk mendapatkan saiz penimbal dan kaedah hirisan, yang hanya disokong oleh IE11 dan ios6, dan digunakan untuk memintas panjang penimbal.
Kepingan ArrayBuffer(
lama tidak ditandatangani bermula
hujung panjang yang tidak ditandatangani Pilihan
);
Anda boleh menguji DEMO ini:
var buffer = new ArrayBuffer(12);
var x = new Int32Array(buffer);
x[1] = 1234;
var slice = buffer.slice(4);
var y = new Int32Array(slice);
console.log(x[1]);
console.log(y[0]);
x[1] = 6789;
console.log(x[1]);
console.log(y[0]);
Susun atur data
Jenis tatasusunan yang ditaip mewakili pelbagai pandangan objek ArrayBuffer yang boleh diindeks dan dimanipulasi. Semua jenis tatasusunan mempunyai panjang tetap.
Saiz Nama (dalam bait) Penerangan
Int8Array 1 8-bit two's complement integer signed integer
Uint8Array 1 8-bit unsigned integer
Int16Array 2 16-bit two's complement integer signed integer
Uint16Array 2 16-bit unsigned integer
Int32Array 4 32-bit two's complement integer signed
Uint32Array 4 32-bit unsigned integer
Float32Array 4 32-bit IEEE nombor titik terapung
Float64Array 8 64-bit IEEE nombor titik terapung
Int ialah jenis integer, Uint ialah integer tidak bertanda, dan Float ialah jenis titik terapung Ini adalah konsep asas dalam bahasa C, dan saya tidak akan menerangkannya secara terperinci. Memandangkan struktur visualisasi ini semuanya serupa, artikel ini hanya menerangkan jenis Float32Array dan pembaca boleh membuat kesimpulan daripada satu contoh.
Float32Array sangat serupa dengan Array, kecuali setiap elemen ialah data titik terapung 32-bit (4-bait). Setelah Float32Array dicipta saiznya tidak boleh diubah suai.
Kita boleh mencipta Float32Array secara langsung:
var x = new Float32Array(2);
x[0] = 17;
console.log(x[0]); // 17
console.log(x[1]); // 0
console.log(x.length); // 2
Anda perlu mempunyai konsep sedemikian Ia masih merupakan tatasusunan, tetapi setiap elemen dalam tatasusunan ialah jenis data Terapung 32-bit
var x = new Float32Array([17, -45.3]);
console.log(x[0]); // 17
console.log(x[1]); // -45.29999923706055
console.log(x.length); // 2
Kami menetapkan nilai tatasusunan terus kepada objek Float32Array x, dan kemudian menukarnya menjadi nombor titik terapung 32-bit sebelum menyimpannya.
Memandangkan setiap elemen jenis tatasusunan ini adalah daripada jenis yang sama, dalam model tindanan, mereka semua akan ditolak ke dalam tindanan Oleh itu, tatasusunan data ialah jenis nilai, bukan jenis rujukan. Ini sepatutnya menarik perhatian, dan ia juga boleh dicerminkan daripada contoh berikut:
var x = new Float32Array([17, -45.3]);
var y = new Float32Array(x);
console.log(x[0]); // 17
console.log(x[1]); //-45.29999923706055
console.log(x.length); // 2
x[0] = -2;
console.log(y[0]); // 17, nilai y tidak berubah
Salin nilai x kepada y, ubah suai x[0], y[0] tiada perubahan.
Selain kaedah di atas, kami juga boleh mencipta tatasusunan data dengan cara lain:
var buffer = new ArrayBuffer(12);
var x = new Float32Array(buffer, 0, 2);
var y = new Float32Array(buffer, 4, 1);
x[1] = 7;
console.log(y[0]); // 7
Terangkan mengapa ini mengembalikan 7.
ArrayBuffer(12)
- - - - - - - - - - - - -
|0|1|3|4|5|6|7|8|
- - - - - - - - - - - - -
x (Float32Array)
Offset：0
byteLength：4
panjang:2
ArrayBuffer (12)
- - - - - - - - - - - - -
|0|1|3|4|5|6|7|8|
- - - - - - - - - - - - -
y
Dicipta Oleh Barret Lee
Selepas membaca rajah di atas, adakah anda masih mempunyai sebarang soalan? Saya rasa saya tidak perlu menjelaskan lagi. Anda boleh menganggap unit ArrayBuffer sebagai 1, manakala unit Float32Array ialah 4.
objek DataView
Objek DataView beroperasi pada data dengan lebih terperinci, tetapi saya rasa ia tidak menarik Pelbagai tatasusunan digital yang disebutkan di atas pada asasnya boleh memenuhi keperluan aplikasi, jadi saya hanya akan menyebutnya secara ringkas di sini, dengan contoh mudah:
Salin kod
x.setFloat32(1, Math.PI);
console.log(x.getInt8(0)); // 22
console.log(x.getFloat32(1)); // 3.1415927410125732
Jika anda berminat, anda boleh pergi ke http://www.javascripture.com/DataView untuk mengetahui lebih lanjut.
ArrayBuffer dalam XHR2
ArrayBuffer digunakan secara meluas, sama ada WebSocket, WebAudio, Ajax, dsb., selagi bahagian hadapan sedang memproses data besar atau ingin meningkatkan prestasi pemprosesan data, ArrayBuffer mestilah amat diperlukan.
XHR2 bukan perkara baharu Mungkin anda telah menggunakan ciri berkaitan tetapi tidak tahu bahawa ini adalah kandungan XHR2. Perkara yang paling penting ialah xhr.responseType Fungsinya adalah untuk menetapkan format data respons. Parameter pilihan ialah: "teks", "arraybuffer", "blob" atau "dokumen". Ambil perhatian bahawa tetapan (atau meninggalkan) xhr.responseType = '' akan lalai sebagai respons kepada "teks". Terdapat surat-menyurat sedemikian di sini:
Minta Respons
teks DOMString
arraybuffer ArrayBuffer
gumpalan gumpalan
dokumen Dokumen
Beri saya contoh:
var xhr = XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = fungsi(e) {
// this.response == uInt8Array.buffer
var uInt8Array = new Uint8Array(this.response);
};
xhr.send();
Kami menetapkan atribut dalam xhr.responseType kepada arraybuffer, jadi kami boleh menggunakan tatasusunan data untuk menerima data yang kami dapat!
Ringkasan
Artikel ini terutamanya memperkenalkan kaedah penyimpanan Array dalam model tindanan, dan juga menerangkan secara terperinci jenis data binari ArrayBuffer penimbal asal Dalam pembangunan web, data dan penyimpanan data adalah bahagian yang penting perhatian!
Mungkin terdapat kesilapan dalam penerangan artikel ini, sila betulkan saya!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
