すべてのJavaScript学習者がJSのさまざまな基本データ型を理解すると思います。配列はデータの組み合わせです。これは非常に基本的でシンプルな概念です。コンテンツはあまりありませんし、よく学ぶことは難しくありません。しかし、この記事で重要なのは、私たちが通常見る配列ではなく、arraybufferです。
私が書いたものの多くは、特定の特定の機能を完了したいため、意図的に要約されています。それらはメモと見なすことができ、この記事にも同じことが言えます！私はしばらく前に、WebオーディオAPIと音声コミュニケーションに関連する知識を研究してきました。コンテンツは、さまざまなaudiocontextノード間のオーディオストリームのフローに焦点を当てています。次に、ストリームへのオーディオの形式の種類を理解する必要があるため、ArrayBufferの調査は特に重要です。
メモリ内の配列スタックモデル
アレイの買収
JavaScriptで配列を生成する方法：
コードコピーは次のとおりです。
[element0、lement1、...、elementn]
new Array（element0、element1、...、elementn）
新しい配列（arrayLength）
それを直接定義するか、コンストラクターを介して配列を作成します。もちろん、他の手段を使用することもできます。
コードコピーは次のとおりです。
「配列」.split（ ""）;
"array" .match（/a | r/g）;
待って、多くの方法があります。しかし、私は多くの人々が、配列がどのような構造の中にあるかについてあまり明確ではないのではないかと心配しています。
スタックモデル
配列では、次のようなさまざまなデータ型の多くのデータを配置できます。
コードコピーは次のとおりです。
var arr = [21、 "li jing"、new date（）、function（）{}、、null];
上記の配列には、数字、文字列、オブジェクト、関数、未定義、nullが含まれています。上記のデータインターフェイスを具体的な方法で説明できます。
コードコピーは次のとおりです。
スタック
+------------------------------------------------------------------------------------------------------------------------------
| 21 | +-----------------------------+
+ ----------+ | |
| 「リージン」| | |
+ ----------+ | + ---------+ |
| [参照] | -----------> |オブジェクト| |
+ ----------+ | + ---------+ |
| [参照] | ----------------->+ ---------+ |
+ ----------+ | |関数| |
|未定義| | + ---------+ |
+ ----------+ | |
| null | +----------------------------+
+ ----------+バレット・リーによって作成されました
JavaScriptデータ型は2つのタイプに分割されます。1つは値タイプ、もう1つは参照タイプです。一般的な参照タイプには、オブジェクトと配列が含まれます。配列のストレージモデルでは、値タイプデータが数字と文字列のような場合、データはスタックに直接プッシュされ、参照タイプは値のインデックスのみにプッシュされます。 C言語の概念は、データのポインターのみを保存することであり、これらのデータはヒープの特定のブロックに保存されます。スタックは独立しておらず、スタックはスタックに保存することもできます。
さて、それはすべて配列の説明のためです。 ArrayBufferの関連する知識について詳しく説明しましょう。
arraybuffer
Webとは何ですか？ Webが議論する必要がある最も基本的な問題は何ですか？ 2つのポイントがあると思います。1つはデータ、もう1つはデータ送信です。データの表示に関しては、それは複雑であり、これはWebの上層にあるものでなければなりません。この記事で説明するarraybufferは最も基本的なデータ型であり、データ型とも呼ぶことはできません。他の方法で読み書きが簡単です。
公式ポイントの定義：
ArrayBufferは、一般的な固定長のバイナリデータバッファを表すために使用されるデータ型です。 ArrayBufferの内容を直接操作することはできません。代わりに、特定の形式でバッファを表すArrayBufferViewオブジェクトを作成し、それを使用してバッファの内容を読み取り、書き込みます。
さまざまなタイプの配列のデータを保存するために使用されるバイナリデータを表す元のバッファー。 ArrayBufferは直接読み取りまたは書き込まれませんが、元のバッファを解釈するために必要に応じて、入力された配列またはDataViewオブジェクトに渡すことができます。
これは、バイナリデータの生のバッファーです。 JavaScriptは弱い型言語ですが、それ自体がデータのタイプとサイズに制限があります。特定のデータ構造を使用して、バッファーのコンテンツを整然とした方法で読み取る必要があります（書き込みます）。
元のバッファの作成
ArrayBufferコンストラクターは、生のバッファーを作成できます。
コードコピーは次のとおりです。
var buffer = new arraybuffer（30）;
Chromeコンソールから見ることができます：
バッファーインスタンスには、バッファーサイズを取得するために使用されるBytelength属性があります。これは、バッファーの長さを傍受するために使用されるIE11+とiOS6+によってのみサポートされるスライスメソッドです。
コードコピーは次のとおりです。
arraybufferスライス（
署名されていない長い開始
署名されていないロングエンドオプション
）;
このデモをテストできます。
コードコピーは次のとおりです。
var buffer = new arraybuffer（12）;
var x = new int32Array（バッファー）;
x [1] = 1234;
var slice = buffer.slice（4）;
var y = new int32Array（スライス）;
console.log（x [1]）;
console.log（y [0]）;
x [1] = 6789;
console.log（x [1]）;
console.log（y [0]）;
データベースの配列
タイプされた配列タイプは、インデックス可能な操作可能な配列オブジェクトのさまざまなビューを表しています。すべての配列タイプには固定長があります。
コードコピーは次のとおりです。
名前のサイズ（バイト単位）説明
Int8Array 1 8ビット2の補完整数整数
UINT8ARRAY 1 8ビット符号なし整数
INT16ARRAY 2 16ビット2の補完整数
UINT16ARRAY 2 16ビット符号なし整数
int32Array 4 32ビット2の補完整数整数
UINT32ARRAY 4 32ビット符号なし整数
FLOAT32ARRAY 4 32ビットIEEEフローティングポイント番号
float64Array 8 64ビットIEEEフローティングポイント番号
intは整数で、uintは署名されていないプラスチックで、フロートはフローティングポイントタイプです。これらはC言語の基本概念であるため、詳細に説明しません。これらの視聴された構造は類似しているため、この記事ではFloat32Arrayタイプのみを説明しており、読者は1つずつ学習できます。
Float32Arrayは、各要素が32ビット（4バイト）の浮動小数点データであることを除いて、配列に非常に似ています。 Float32Arrayが作成されると、そのサイズを変更することはできません。
float32Arrayを直接作成できます。
コードコピーは次のとおりです。
var x = new float32Array（2）;
x [0] = 17;
console.log（x [0]）; // 17
console.log（x [1]）; // 0
console.log（x.length）; // 2
まだ配列であるという概念が必要ですが、配列内の各要素はフロート32ビットデータ型です。たとえば、：
コードコピーは次のとおりです。
var x = new float32Array（[17、-45.3]）;
console.log（x [0]）; // 17
console.log（x [1]）; // -45.2999923706055
console.log（x.length）; // 2
配列の値をx、float32Arrayオブジェクトに直接割り当て、保存する前に32ビットのフローティングポイント番号に変換されます。
このクラスアレイの各要素は同じタイプであるため、スタックモデルでは、すべてスタックに押し込まれます。したがって、データ化された配列は値タイプであり、参照タイプではありません！これは注意する必要があり、次の例にも反映することができます。
コードコピーは次のとおりです。
var x = new float32Array（[17、-45.3]）;
var y = new float32Array（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、yの値は変更されていません
xの値をyにコピーし、x [0]、y [0]を変更すると、変更はありません。
上記の方法に加えて、他の方法でデータ化された配列を作成することもできます。
コードコピーは次のとおりです。
var buffer = new arraybuffer（12）;
var x = new float32Array（バッファー、0、2）;
var y = new float32Array（バッファー、4、1）;
x [1] = 7;
console.log（y [0]）; // 7
ここで7が返される理由を説明してください。
コードコピーは次のとおりです。
arraybuffer（12）
+ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + -
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | | | |
+ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + -
/ /
x（float32Array）
オフセット：0
Bytelength：4
長さ：2
arraybuffer（12）
+ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + -
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | | | |
+ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + -
/ /
y
バレット・リーによって作成されました
上記のイラストを読んだ後、まだ質問がありますか？説明し続ける必要はないと思います。 ArrayBufferの単位は1と見なすことができますが、Float32Arrayの単位は4です。
DataViewオブジェクト
DataViewオブジェクトはより細心の注意を払ってデータを操作しますが、面白いとは思いません。上記のさまざまなデータベースの配列は基本的にアプリケーションを満たすことができるので、ここで言及します。簡単な例：
コードコピーは次のとおりです。
var buffer = new arraybuffer（12）;
var x = new DataView（バッファ、0）;
x.setint8（0、22）;
x.setfloat32（1、math.pi）;
console.log（x.getint8（0））; // 22
console.log（x.getfloat32（1））; // 3.1415927410125732
興味がある場合は、詳細についてはhttp://www.javascripture.com/dataviewに移動できます。
xhr2のarraybuffer
ArrayBufferは特に広く使用されています。フロントエンドのプロセスビッグデータやデータ処理パフォーマンスを改善したい限り、WebSocket、WebAudio、Ajaxなどであれ、ArrayBufferは不可欠でなければなりません。
XHR2は新しいものではありません。関連する機能を使用した可能性がありますが、これがXHR2であることを知りません。最も重要なことはXhr.responsetypeです。これは、応答のデータ形式を設定するために使用されます。オプションのパラメーターは、「テキスト」、「arraybuffer」、「blob」、または「document」です。 xhr.responsetype = ''の設定（または無視）すると、デフォルトで「テキスト」への応答が設定されることに注意してください。このような対応する関係があります：
コードコピーは次のとおりです。
応答を要求します
テキストドームストリング
arraybuffer arraybuffer
Blob Blob
ドキュメントドキュメント
栗を取る：
コードコピーは次のとおりです。
var xhr = new xmlhttprequest（）;
xhr.open（ 'get'、 '/path/to/image.png'、true）;
xhr.responsetype = 'arraybuffer';
xhr.onload = function（e）{
// this.response == uint8array.buffer
var uint8array = new uint8array（this.response）;
};
xhr.send（）;
Xhr.responsetypeのArrayBufferにプロパティを設定するため、データベースの配列を使用して、取得したデータを受け入れることができます。
まとめ
この記事では、主にアレイがスタックモデルに保存される方法を紹介し、元のバッファであるArrayBufferのバイナリデータ型についても詳細に説明しています。 Web開発では、データとデータストレージが重要な部分です。私は注目を集めたいと思っています！
この記事の物語にエラーがあるかもしれません。もっと修正してください！