JavaScript におけるさまざまなバイナリオブジェクトの関係の詳細な説明

序文

現代の JavaScript はより複雑なシナリオに直面する必要があり、バイナリ転送を含むより多くの種類のデータ転送があります。データ処理を容易にし、効率を向上させるために、ArrayBuffer オブジェクトが作成されました。

しかし、実際に使ってみると、ArrayBuffer だけでなく、TypedArray、DataView、Blob、FileReader などの一連のオブジェクトがあり、それらの関係について混乱してしまうことがあります。なぜこんなにたくさんの物体があるのですか?私はこれらの疑問を念頭に置いて情報を検索し、関係性を整理しようとしました。

さまざまなオブジェクト間の関係

配列バッファ

ArrayBuffer は JavaScript で最も基本的なバイナリオブジェクトであり、連続したメモリ空間をバイト単位で記述します。

定数バッファ = 新しいArrayBuffer(32);

このようにして、32 バイトのメモリ領域を作成し、buffer.byteLength を使用してその長さを確認できます。

ArrayBuffer オブジェクトで実行できる操作は非常に少なく、編集もできません。データを編集する必要がある場合は、TypedArrayと

データビュー。

型付き配列

TypedArray は型付き配列です。TypedArray 自体はデータを保存しませんが、ArrayBuffer データを表示するために特に使用されます。そのため、TypedArray と呼ばれます。これは特定のコンストラクターの名前ではなく、コンストラクターのグループの一般的な名前です。

Int8Array: 1ビット、8ビット符号付き整数
Uint8Array: 1 ビット、8 ビット符号なし整数
Uint8ClampedArray: 1 ビット、8 ビット符号なし整数
Int16Array: 2 ビット、16 ビット符号なし整数
Uint16Array: 2 ビット、16 ビット符号なし整数
Int32Array: 4ビット、32ビットの符号なし整数
Uint32Array: 4ビット、32ビットの符号なし整数
Float32Array: 4 ビット、32 ビット非 IEEE 浮動小数点
Float64Array: 8 ビット、64 ビット IEEE 浮動小数点
BigInt64Array: 8 ビット、64 ビットのバイナリ符号付き整数
BigUint64Array: 8 ビット、64 ビットの符号なし整数

作成時に、length、typedArray、ArrayBuffer、array を渡すことができます。もちろん、何も渡さないこともできます。

定数uint1 = 新しいUint8Array(8);
定数 uint2 = 新しい Uint16Array(新しい Uint8Array(8));
const uint3 = 新しい Uint8Array(新しい ArrayBuffer(8));
定数uint4 = 新しいUint8Array([1, 2, 3]);
const uint5 = 新しい Uint8Array();

上記の typedArray では、作成時に渡された ArrayBuffer を除いて、新しいプロセス中に最下層に新しい ArrayBuffer が作成されます。 arr.buffer を使用して、参照する ArrayBuffer にアクセスできます。

通常の配列に対するすべての操作は TypedArray でも使用できます。しかし、ArrayBuffer は連続したメモリ範囲を記述するため、値を削除することはできず、0 を割り当てることしかできません。concat メソッドを使用する方法はありません。

Uint8ClampedArray

Uint8ClampedArray は少し特殊で、正のオーバーフローと負のオーバーフローを異なる方法で処理します。

その他の範囲外データについては、右端（最下位ビット）部分のみが保持され、オーバーフローデータは破棄されます。ただし、Uint8ClampedArray では、範囲外データは 255 として保存され、負の数は 0 として保存されます。

文字間の変換

TypedArray は文字列を直接渡さないので、最初に文字列をトランスコードする必要があります。

文字列 → Unit8Array

 const 文字列 = "こんにちは";
Uint8Array.from(string.split(""), (e) => e.charCodeAt(0));

Unit8Array → 文字列

 // TextDecoder オブジェクトを使用します const u8 = Uint8Array.of(72, 101, 108, 108, 111);
新しい TextDecoder().decode(u8);
// fromCharCode を使用して変換 const u8 = Uint8Array.of(72, 101, 108, 108, 111);
Array.from(u8, (e) => String.fromCharCode(e)).join("");

データビュー

uint2 変数を除き、上記のデータはすべて単一のデータ型です。uint2 オブジェクトは、複合ビューと呼ばれる 1 つのメモリセクションに 2 種類のデータを格納します。 JavaScript のデータ型はそれほど単純ではないことが多く、TypedArray だけで操作すると面倒になるため、DataView オブジェクトがあります。 DataView には TypedArray よりも多くの操作メソッドがあります。

const バッファ = 新しいArrayBuffer(8);
const dataView = 新しい DataView(バッファ);

getInt8、getUint8、getInt16、getUint16、getInt32、getUint32、getFloat32、getFloat64 メソッドを提供します。

パラメータは 2 つあり、最初のパラメータはセクションの位置、2 番目のパラメータはバイト順序ですが、これは必須ではありません。戻り値は対応する位置のバイトデータです。

定数d1 = dataView.getUint8(1);
定数 d2 = dataView.getUint8(1, true);

バイト位置は分かりやすく、バイト順序は「バイト順序の理解」で読むことができます。一般的には、次のようになります。

ビッグエンディアン: 上位バイトが最初に来て、下位バイトが最後に来ます。これは人間が数字を読み書きする方法です。
リトルエンディアン: 下位バイトが最初に来て、上位バイトが最後に来ます。つまり、0x1122 の形式で保存されます。

デフォルトでは、ビッグエンディアンバイトオーダーが使用されます。リトルエンディアンバイトオーダーを使用する場合は、true を渡す必要があります。

このようにして、基本的なバイナリの読み取りおよび書き込みソリューションが得られます。ただし、実際のアプリケーションシナリオではより複雑なデータが含まれることが多いため、Blob や FileReader などのオブジェクトは特定のシナリオに合わせて派生されます。

ブロブ

Blob は Binary Large Object の略です。

ArrayBuffer と Blob の違いは、ArrayBuffer は純粋なバイナリデータであるのに対し、Blob は MIME タイプを持つバイナリデータである点です。また、String、ArrayBuffer、TypedArray、DataView、Blob から Blob オブジェクトを簡単に生成できます。

const blob1 = new Blob(["hello"], { type: "text/plain" });
const blob2 = new Blob([new Uint8Array([72, 101, 108, 108, 111]), " ", "world"], { type: "text/plain" });

財産：

size: 読み取るオブジェクトのサイズ（バイト単位）。
タイプ: 読み書きするMIMEタイプ

方法：

slice: Blob セグメントを抽出します。

メールアドレス

開発中は、画像のバイナリデータを取得し、それを base64 に変換して src に書き込むことができますが、データ量が多い場合やビデオデータの場合は、許容される長さを超えてしまいます。 URL.createObjectURL を使用すると、リソース URL を簡単に作成できます。

定数 url = URL.createObjectURL(blob1);

blob:https://example.com/a6728d20-2e78-4497-9d6c-0ed61b93f11e のようなリソース URL が生成され、これを src に直接書き込んで使用できます。

使用されていないときに参照を破棄し、メモリ使用量を解放するには、URL.revokeObjectURL(url) を使用します。

データの読み取り

データを表示するには、2 つの方法があります。

最初のメソッドは、Response オブジェクトを使用して文字列データまたは arrayBuffer データを直接読み取ります。

const responseText = 新しい Response(blob2).text() を待機します。
const responseBuf = 新しい Response(blob2).arrayBuffer() を待機します。

2 番目の方法では、FileReader オブジェクトを使用します。

const リーダー = 新しい FileReader();
reader.onload = 関数 (e) {
    console.log(リーダーの結果);
};
リーダー。テキストとして読み込みます(blob2)。

ファイル

File は Blob から継承し、ファイル関連の属性情報を追加します。

名前: ファイル名
lastModified: 最終変更時刻のタイムスタンプ
lastModifiedDate: 最終更新日時の日付オブジェクト
webkitRelativePath: ファイルへのパス。このプロパティは、入力でディレクトリが選択されたときに設定されます。これは非標準の機能です。

ファイルリスト

FileList オブジェクトは、File オブジェクトのコレクションです。通常、次の場所に表示されます:

<input type="file"> コントロール（files 属性は FileList）
ドラッグイベントで生成されたDataTransferオブジェクト。ファイルプロパティはFileListになります。

財産：

length: 現在の FileList 内のファイル数を取得できます。

方法：

item(index): 指定されたインデックス位置のファイルデータを取得するために使用できます。通常は、代わりに FileList[index] を直接使用します。

ファイルリーダー

FileReader は Blob セクションで説明しました。実際、FileReader オブジェクトは、拡張された File オブジェクトを含む Blob オブジェクトを読み取るために特に使用されます。

財産：

結果: ファイルの内容。
readyState: 状態。 0: ロードされていません。1: ロード中です。2: ロードが完了しました。
エラー: データを読み込むときにエラーメッセージが表示されます。

イベント：

onload: 正常にロードされた後にトリガーされます。
onerror: 読み込みエラーが発生したときにトリガーされます。
onabort: 読み込みが中断されたときにトリガーされます。
onloadend: 読み込みが完了した後にトリガーされます。
onloadstart: 読み込みが開始されたときにトリガーされます。
onprogress: 読み込み中にトリガーされます。

方法：

readAsText(blob, "utf-8"): データをテキスト形式で返します。2 番目のパラメータでテキストのエンコーディングを設定できます。
readAsDataURL(blob): データをデータ URL として返します。
readAsArrayBuffer(blob): データをArrayBufferとして返します。
中止: 操作を中止します。

上記の例のように、データはテキスト形式で返されます。

const リーダー = 新しい FileReader();
reader.onload = 関数 (e) {
    console.log(リーダーの結果);
};
リーダー。テキストとして読み込みます(blob2)。

要約する

これで、JavaScript のさまざまなバイナリオブジェクト関係に関するこの記事は終了です。JS バイナリオブジェクト関係に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQLで時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明

>>: Nginx ベースの Mencached キャッシュ構成の詳細な説明