Pengenalan terperinci kepada ArrayBuffer dalam kemahiran JavaScript

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.

Model tindanan tatasusunan dalam ingatan

Mendapatkan Susunan

Cara menjana Array dalam Javascript:

Salin kod Kod adalah seperti berikut:

[elemen0, elemen1, ..., elemenN]

Tatasusunan baharu(elemen0, elemen1, ..., elemenN)

Tatasusunan baharu(ArrayLength)

Tentukan secara langsung, atau buat Array melalui pembina Sudah tentu, anda juga boleh menggunakan kaedah lain:

Salin kod Kod adalah seperti berikut:

"array".split("");

"array".match(/a|r/g);

Tunggu, ada banyak cara. Tetapi apakah struktur dalaman Array, saya takut ramai yang belum begitu jelas.

Model Tindanan

Kami boleh meletakkan banyak jenis data yang berbeza dalam tatasusunan, seperti:

Salin kod Kod adalah seperti berikut:

var arr = [21, "李京", new Date(), function(){}, , null];

Tatasusunan di atas mengandungi nombor, rentetan, objek, fungsi, tidak ditentukan dan batal Kami boleh menerangkan antara muka data di atas secara konkrit:

Salin kod Kod adalah seperti berikut:

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:

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

Kepingan ArrayBuffer(

lama tidak ditandatangani bermula

hujung panjang yang tidak ditandatangani Pilihan

);

Anda boleh menguji DEMO ini:

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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:

Salin kod Kod adalah seperti berikut:

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

Salin kod Kod adalah seperti berikut:

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:

Salin kod Kod adalah seperti 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:

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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

Kod adalah seperti berikut: var buffer = new ArrayBuffer(12); var x = new DataView(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 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:

Salin kod Kod adalah seperti berikut:

Minta Respons

teks DOMString

arraybuffer ArrayBuffer

gumpalan gumpalan

dokumen Dokumen

Beri saya contoh:

Salin kod Kod adalah seperti berikut:

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!

Pengenalan terperinci kepada ArrayBuffer dalam kemahiran JavaScript_javascript