JavaScript_javascript スキルにおける ArrayBuffer の詳細な紹介-jsチュートリアル-php.cn

すべての 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 のバイナリデータ型についても詳しく説明します。注意！

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