型付き配列と ArrayBuffer_html/css_WEB-ITnose について

は型付き配列 (Typed Array) であり、HTML5 で新しく導入された API です。型付き配列を一言で説明すると、JS がバイナリデータを操作するためのインターフェースです。 ご存知のとおり、バイナリ データを直接操作するとプログラムの効率が向上します。JS は従来の配列に対して多くの最適化を行ってきましたが (JS 配列はオブジェクトとして実装されます)、JS 配列の効率はそれほど高くありませんでした。たとえば、WebGL での画像データ送信でネイティブ JS 配列が使用されている場合、ブラウザはグラフィックス カードと通信するときにそれをバイナリ形式に変換する必要があり、時間がかかります。大量のバイナリ データを操作する必要があるからこそ、ArrayBuffer が登場しました。 Canvas (Canvas ノートの Canvas の基本原理を参照してください) では、getImageDate() メソッドを使用して返される ImageData オブジェクトは、HTML 標準では CanvasPixelArray と呼ばれます。値が処理されるため、ArrayBuffer とは異なります。ビューのタイプ Unit8Array は少し異なりますが、その他はすべて同じです (Unit8Array は 0 ～ 255 の数値のみを処理できますが、CanvasPixelArray はそれ以上の数値を処理できます)。型付き配列の概念については、まだ混乱するかもしれません。私が理解している ArrayBuffer の主要な概念を 1 つずつ整理してみましょう:

View (ビュー)

ほとんどの資料では、次のようにビューについて 1 つの文で説明されています。このブログ (ArrayBuffer: Typed Array) のビューについての説明です:

ArrayBuffer は、さまざまな種類のデータを格納できるメモリ領域です。データが異なれば、「ビュー」と呼ばれる保存方法も異なります。

最初に上記の説明を見たときは、「ビュー」の意味がまだ理解できませんでしたが、ArrayBuffer の概念は一旦置いといて、バイナリ データを操作するためのインターフェイスであると想像してください。 8 ビットなどの 2 進数 1 は 00000001 です。したがって、この 1 を操作するときは、1 の形式で操作する必要があります。すると、ここでの 1 はビューになります。 view はバイナリデータとして理解するのが簡単です。 C 言語を知っていれば、この概念を理解するのは難しくありません。たとえば、C 言語の文字列は実際には数値であるため、ここでの文字列も「ビュー」として理解できます。実際、ここでのビューは型付き配列です。

ArrayBuffer の概念

ArrayBuffer は不透明なメモリ領域です (いわゆる不透明とは、直接操作できないデータ ブロックを意味します)。単位はバイト (Byte) で、その byteLength 属性はそのメモリを返します。サイズ。 JS では、コンストラクターの形式で ArrayBuffer 領域を宣言します。

var a = new ArrayBuffer(10)a.byteLength // =>10

このメモリ領域では、さまざまなビューを使用して任意の数の型付き配列を作成でき、これらの型付き配列は重複することもできます。 8 つの異なる型付き配列 (ビュー) があります。つまり、

Int8Array: 8 ビット符号付き整数、長さ 1 バイト。

• Uint8Array: 8 ビット符号なし整数、長さ 1 バイト。

• Int16Array: 16 ビット符号付き整数、長さ 2 バイト。

• Uint16Array: 16 ビット符号なし整数、長さ 2 バイト。

• Int32Array: 32 ビット符号付き整数、長さ 4 バイト。

• Uint32Array: 32 ビット符号なし整数、長さ 4 バイト。

• Float32Array: 32 ビット浮動小数点数、長さ 4 バイト。

• Float64Array: 64 ビット浮動小数点数、長さ 8 バイト。

• ArrayBuffer 領域の重複現象を説明するこのブログの例 (JavaScript での ArrayBuffer の詳細な紹介) を次に示します。

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

元の記事での著者の説明は単純すぎます。ここで y[0] が 7 となるのは、バッファの 12 バイトのメモリ領域に、0 バイトから長さ 2 の 32 ビット浮動小数点数 x が宣言されているためです（つまり、x (最初の 8 バイト) を占有し、4 番目のバイトから始まる長さ 1 の 32 ビット浮動小数点数 y を宣言すると、ここでの y と x は実際には重複しており、x はすでに 8 バイトを占有しており、y は から始まります。 4バイト目。それらは重なっているため、x を変更すると必然的に y に影響します。ここで、It の型付き配列の最初の要素は 00000111 から始まるため、y も 00000111、つまり 7 になります。

型付き配列と通常の配列の違い

型付き配列は本質的にバイナリデータであり、ArrayBuffer 領域は指定された長さを持っています。これらに基づいて、型付き配列と通常の配列の違いを推測できます。異なる型を混合できる通常の JS 配列とは異なり、すべて数値です。たとえば、次の例の代入は無効です

型付き配列の長さは固定です

• すべての要素は次のように初期化されます。 0

var  a = new Int8Array(3)a[0] = 'hello'a[0] // =>0 显示a[0]依然未定义a[0] = '8'a[0]  // = > 8 但是注意类型的自动转换，当可被转换成数字时，JS会自动将其转成数值

DataView

既然本质是在操作二进制数据，那么就涉及到“高位优先”还是“低位优先”的数据传输问题……

今天太晚啦，明天接着码，未完待续～