エス6ノート・・・アラビバッファー

ArayBufferArrayBufferオブジェクト、TypedArrayビュー、DataViewビューは、JavaScriptがバイナリデータを操作するインターフェースである.これらのオブジェクトは以前から存在しています.独立した規格(2011年2月発表)に属しています.ES 6はそれらをECMAScript規格に組み入れて、新しい方法を追加しました.これらは配列の構文でバイナリデータを処理するので、総称してバイナリ配列と呼ばれます.
このインターフェースのオリジナルの設計目的はWebGLプロジェクトと関連があります.WebGLとは、ブラウザとグラフィックスカードとの間の通信インターフェースを指し、JavaScriptとグラフィックスカードとの間の大量のリアルタイムのデータ交換を満たすために、それらの間のデータ通信はバイナリでなければならず、従来のテキスト形式ではない.テキストフォーマットは32ビットの整数を伝え、両端のJavaScriptスクリプトとグラフィックカードはフォーマット変換され、非常に時間がかかります.この場合、C言語のようにバイトを直接操作し、4バイトの32ビットの整数をバイナリ形式でそのままグラフィックカードに送る仕組みがあれば、スクリプトの性能は大幅に向上する.
バイナリ配列はこのような背景のもとで誕生した.これはC言語の配列に似ています.開発者は配列の下に表示された形式でメモリを直接操作し、JavaScriptがバイナリデータを処理する能力を大いに強化しました.開発者はJavaScriptを通じてオペレーティングシステムの元のインターフェースとバイナリ通信することができます.
バイナリ配列は3種類のオブジェクトから構成されます.
(1)ArrayBufferオブジェクト:メモリの中のバイナリデータの一部を表し、「ビュー」で動作することができます.「ビュー」は配列インターフェースを展開しており、これは配列の方法でメモリを操作できることを意味している.
(2)TypedArrayビュー:合計9種類のビュー、たとえばUint8Array(符号なし8ビット整数)配列ビュー、  Int16Array(16ビット整数)配列図、  Float32Array(32ビット浮動小数点)配列図など.
(3)DataViewビュー:最初のバイトがUint 8(符号なし8ビット整数)、2番目、3バイトがInt 16(16ビット整数)、4バイト目がFloat 32(32ビット浮動小数点)などの複合フォーマットのビューをカスタマイズすることができ、また、バイト順をカスタマイズすることができる.
簡単に言えば、ArrayBufferオブジェクトはオリジナルのバイナリデータを表し、TypedArayビューはシンプルなタイプのバイナリデータを読み、書き込みます.DataView表示は複雑なタイプのバイナリデータを読み書きします.
TypedArayビューでサポートされているデータタイプは全部で9種類あります(DataViewビューはUint8C以外の8種類がサポートされています).
データの種類
バイト長
意味
対応するC言語のタイプ
Int 8
1
8ビット符号付き整数
signed char
Uint 8
1
8ビット符号なし整数
unsigned char
Uint 8 C
1
8ビット符号なし整数(オートフィルタオーバー)
unsigned char
Int 16
2
16ビット符号付き整数
ショート?ト
U int 16
2
16ビット符号なし整数
unsigned shart
Int 32
4
32ビット符号付き整数
要点
Uint 32
4
32ビットの符号なし整数
unsigned int
Float 32
4
32ビット浮動小数点
float
Float 64
8
64ビット浮動小数点
ドビー
なお、バイナリ配列は本物の配列ではなく、配列のようなオブジェクトです.
多くのブラウザで動作するAPIは、バイナリ配列でバイナリデータを操作しています.以下はその中のいくつかです.

File API

XMLtpRequest

Fetch API

Canvas

WebSockets

ArayBuffer対象
概要ArrayBufferオブジェクトは、バイナリデータを格納するメモリの一部を表しており、直接に読み書きすることができず、ビュー(TypedArrayビューおよびDataViewビュー)でしか読み書きできない.ビューの役割は、バイナリデータを指定形式で解読することである.ArrayBufferも構造関数であり、データを保存できる連続メモリ領域の一部を割り当てることができる.

const buf = new ArrayBuffer(32);

上記のコードは、1セグメント32バイトのメモリ領域を生成し、各バイトの値はデフォルトでは0です.ArrayBufferコンストラクションのパラメータは、必要なメモリサイズ(単位バイト)です.
この内容を読むためには、ビューを指定する必要があります.DataViewビューの作成には、ArrayBufferオブジェクトのインスタンスをパラメータとして提供する必要があります.

const buf = new ArrayBuffer(32);
const dataView = new DataView(buf);
dataView.getUint8(0) // 0

上記のコードは、セグメント32バイトのメモリに対して、DataViewビューを作成し、その後、符号なしの8ビットの整数形式で、最初から8ビットのバイナリデータを読み取り、結果として0を得る.元のメモリのArrayBufferオブジェクトのため、デフォルトのすべてのビットは0である.
別のTypedArayビューは、DataViewビューとの違いは、構造関数ではなく、構成関数のセットであり、異なるデータフォーマットを表しています.

const buffer = new ArrayBuffer(12);

const x1 = new Int32Array(buffer);
x1[0] = 1;
const x2 = new Uint8Array(buffer);
x2[0]  = 2;

x1[0] // 2

上のコードは同じセグメントのメモリに対して、それぞれ2つのビューを確立します.32ビットの符号付き整数(Int32Arrayアーキテクチャー関数)と8ビットの符号なし整数(Uint8Arrayアーキテクチャー関数).2つのビューは同じメモリであるため、1つのビューは下のメモリを修正し、別のビューに影響を与えます.
TypedArayビューの構造関数は、ArrayBufferの例をパラメータとして受け入れるだけでなく、メモリの下のArrayBufferの例を生成し、このメモリの割り当てを完了しながら、通常の配列をパラメータとして受け入れることができる.

const typedArray = new Uint8Array([0,1,2]);
typedArray.length // 3

typedArray[0] = 5;
typedArray // [5, 1, 2]

上のコードはTypediarrayビューのUint8Arrayコンストラクションを使用して、シンボルなしの8ビットの整数ビューを新たに作成しました.
ArayBuffer.prototype.byteLengthUint8Array例のArrayBuffer属性は、割り当てられたメモリ領域のバイト長を返します.

const buffer = new ArrayBuffer(32);
buffer.byteLength
// 32

割り当てたいメモリ領域が大きいと、割り当てが失敗する可能性があります.

if (buffer.byteLength === n) {
  //   
} else {
  //   
}

ArayBuffer.prototype.slice()byteLengthの例には、メモリ領域の一部をコピーして新しいArrayBufferオブジェクトを生成するslice方法がある.

const buffer = new ArrayBuffer(8);
const newBuffer = buffer.slice(0, 3);

上記コードコピーArrayBufferオブジェクトの最初の3バイト(0から3バイト目の前まで)は、新しいbufferオブジェクトを生成します.ArrayBuffer方法は、2つのパラメータを受け取り、1番目のパラメータは、コピー開始のバイト番号(バイトを含む)を表し、2番目のパラメータは、コピーオフのバイト番号(バイトを含まない)を表し、2番目のパラメータを省略すると、元sliceオブジェクトの最後までデフォルトである.ArrayBuffer方法に加えて、sliceオブジェクトはメモリを直接読む方法を提供しません.上にビューを作成し、ビューを通して読み書きすることができます.
ArayBuffer.isView()ArrayBufferは、パラメータがsliceであるかどうかを示すブール値を返す静的な方法ArrayBufferがあります.この方法は、TypedArayのインスタンスまたはArrayBufferの例であるかどうかを判断するのに大きく相当します.

const buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer) // false

const v = new Int32Array(buffer);
ArrayBuffer.isView(v) // true