JavaScript_javascript スキルにおける ArrayBuffer の詳細な紹介

すべての JavaScript 学習者は、JS のさまざまな基本的なデータ型を理解できると思います。これは非常に基本的で単純な概念であり、学習するのは難しくありません。それは問題だ。ただし、この記事で焦点を当てているのは、通常目にする Array ではなく、ArrayBuffer です。

私が書いている内容の多くは、特定の機能を完了したいために意図的に要約されており、この記事についても同様です。少し前に、私は Web オーディオ API と音声通信関連の知識を勉強してきました。その内容は、AudioContext のさまざまなノード間のオーディオ ストリームのフローに焦点を当てていました。今度は、オーディオがどのようなデータ形式であるかを調べる必要があります。ストリームの最後なので、ArrayBuffer の研究は非常に重要です。

メモリ内の配列スタック モデル

配列の取得

JavaScript で配列を生成する方法:

コードをコピー コードは次のとおりです:

[要素0、要素1、...、要素N]
新しい配列(要素0, 要素1, ..., 要素N)
新しい配列(配列の長さ)

直接定義するか、コンストラクターを通じて配列を作成することもできます。もちろん、他のメソッドも使用できます。

コードをコピーします コードは次のとおりです:

"配列".split("");
"配列".match(/a|r/g);

待ってください、方法はたくさんあります。しかし、Array の内部構造は何なのか、まだよくわかっていない人も多いと思います。

スタックモデル

配列には、次のようなさまざまなデータ型を入れることができます。

コードをコピー コードは次のとおりです:

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

上記の配列には、数値、文字列、オブジェクト、関数、未定義、null が含まれています。上記のデータ インターフェイスを具体的に説明します。

コードをコピー コードは次のとおりです:

スタック
--------- ヒープ
| 21 | --------------------
--------- |「李静」 | -------- | [参照] |----------> オブジェクト | -------- | [参照] |------> -------- |
--------- | |未定義| |
--------- | null | ------------------
--------- 作成者: バレット・リー

JavaScript のデータ型は、数値型や文字列型などの値型の場合、値型と参照型の 2 種類に分けられます。 C 言語で説明すると、データはヒープ内の特定の範囲に保存されます。 。スタックは独立しておらず、ヒープにスタックを格納することもできます。

Array の説明はこれで終わりです。ArrayBuffer の関連知識について詳しく説明しましょう。

配列バッファ

ウェブとは何ですか? ウェブ上で議論されるべき最も基本的な問題は何ですか? 2つの点があると思います。1つはデータ、もう1つはデータの送信です。これはWebの上位層にあるものである必要があります。この記事で説明する ArrayBuffer は、最も基本的なデータ型であり、他のメソッドで読み書きする必要があるデータです。

公式ポイント定義:

ArrayBuffer は、汎用の固定長バイナリ データ バッファーを表すために使用されるデータ型です。ArrayBuffer の内容を直接操作することはできません。代わりに、特定のバッファーを表す ArrayBufferView オブジェクトを作成します。形式を設定し、それを使用してバッファの内容を読み書きします。
さまざまな型付き配列のデータを格納するために使用されるバイナリ データの生のバッファーを表します。 ArrayBuffer を直接読み書きすることはできませんが、生のバッファーを型付き配列または DataView オブジェクトに渡すことで、必要に応じて解釈できます。

これはバイナリ データの生のバッファです。JavaScript は型指定が弱い言語ですが、それ自体、データの型とサイズに制限があります。ある種のデータ構造を通じてバッファの内容を順序付ける必要があります。 （書き込んでください）。

生バッファーの作成

生のバッファーは ArrayBuffer コンストラクターを通じて作成できます:

コードをコピー コードは次のとおりです:

varbuffer = new ArrayBuffer(30);

Chrome コンソールから確認できます:

バッファ インスタンスには、バッファのサイズを取得するために使用される byteLength 属性と、IE11 と ios6 でのみサポートされ、バッファ長をインターセプトするために使用されるスライス メソッドがあります。

コードをコピーします コードは次のとおりです:

ArrayBuffer スライス(
符号なしロングビギン
符号なしロングエンド オプション
);

このデモをテストできます:

コードをコピーします コードは次のとおりです:

varbuffer = new ArrayBuffer(12);
var x = 新しい Int32Array(バッファ);
x[1] = 1234;
var スライス = バッファ.スライス(4);
var y = 新しい Int32Array(スライス);
console.log(x[1]); console.log(y[0]);
x[1] = 6789;
console.log(x[1]); console.log(y[0]);

データ配列

型付き配列型は、インデックス付けおよび操作できる ArrayBuffer オブジェクトのさまざまなビューを表します。 すべての配列型は固定長です。

コードをコピー コードは次のとおりです:

名前 サイズ (バイト単位) 説明

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 は符号なし整数、Float は浮動小数点型です。これらは C 言語の基本的な概念ですので、詳しい説明は省略します。これらの視覚化構造はすべて似ているため、この記事では Float32Array 型についてのみ説明し、読者は 1 つの例から推測することができます。

Float32Array は、各要素が 32 ビット (4 バイト) の浮動小数点データであることを除いて、Array と非常によく似ています。 Float32Array が作成されると、そのサイズは変更できません。

Float32Array を直接作成できます:

コードをコピーします コードは次のとおりです:

var x = 新しい Float32Array(2);
x[0] = 17;
console.log(x[0]); // 17
console.log(x[1]); // 0
console.log(x.length); // 2

このような概念が必要です。これは配列ですが、配列内の各要素は Float 32 ビット データ型です。別の例:

コードをコピーします コードは次のとおりです:

var x = new Float32Array([17, -45.3]);
console.log(x[0]); // 17
console.log(x[1]); // -45.29999923706055
console.log(x.length); // 2

配列の値を Float32Array オブジェクト x に直接代入し、保存する前に 32 ビット浮動小数点数に変換します。

このタイプの配列の各要素は同じ型であるため、スタック モデルではすべてスタックにプッシュされます。したがって、データ配列は参照型ではなく値型です。これは注目を集めるはずであり、次の例からも反映されています:

コードをコピー コードは次のとおりです:

var x = new Float32Array([17, -45.3]);
var y = 新しい 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、y の値は変更されていません

x の値を y にコピーし、x[0] を変更します。y[0] は変更されません。

上記の方法に加えて、他の方法でもデータ配列を作成できます。

コードをコピー コードは次のとおりです:

varbuffer = 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

これが 7 を返す理由を説明してください。

コードをコピーします コードは次のとおりです:

ArrayBuffer(12)
- - - - - - - - - - - - -
|0|1|2|3|4|5|7|8| - - - - - - - - - - - - -
                                                                                            x (Float32Array)
オフセット：0
byteLength：4
長さ:2

ArrayBuffer (12)

- - - - - - - - - - - - -
|0|1|2|3|4|5|7|8| - - - - - - - - - - - - -
                                                                                              y

作成者: バレット・リー

上の図を読んでも、まだ質問がありますか?これ以上説明する必要はないと思います。 ArrayBuffer の単位は 1、Float32Array の単位は 4 と考えることができます。

DataView オブジェクト

DataView オブジェクトはデータをより詳細に操作しますが、上記で説明したさまざまなデジタル化された配列は基本的にアプリケーションの要件を満たすことができるため、ここでは簡単な例を挙げて簡単に説明します。

コードをコピー

コードは次のとおりです: varbuffer = new ArrayBuffer(12); var x = 新しい 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

ご興味がございましたら、http://www.javascripture.com/DataView にアクセスして詳細をご覧ください。

XHR2 の ArrayBuffer

ArrayBuffer は、WebSocket、WebAudio、Ajax など、フロントエンドでビッグデータを処理する場合、またはデータ処理パフォーマンスを向上させたい場合には、特に広く使用されており、ArrayBuffer は不可欠です。

XHR2 は新しいものではありません。関連機能を使用したことはあっても、これが XHR2 のコンテンツであることは知らなかったかもしれません。最も重要なのは、xhr.responseType です。その機能は、応答のデータ形式を設定することです。オプションのパラメーターは、「text」、「arraybuffer」、「blob」、または「document」です。 xhr.responseType = '' を設定 (または省略) すると、デフォルトの応答が「text」になることに注意してください。ここにそのような対応があります:

コードをコピー コードは次のとおりです:

リクエストレスポンス
テキスト DOMString
配列バッファ ArrayBuffer
ブロブ ブロブ
ドキュメント ドキュメント

例を挙げてください:

コードをコピーします コードは次のとおりです:

var xhr = 新しい 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 に設定したので、データ配列を使用して取得したデータを受け入れることができます。

概要

この記事では、主にスタック モデルにおける Array の格納方法を紹介し、Web 開発においてデータとデータ ストレージが重要な部分である ArrayBuffer のバイナリ データ型についても詳しく説明します。注意！

この記事の説明に誤りがある可能性がありますので、修正してください。