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

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)。

関連資料

  • MDN関連キーワード
  • モダン JavaScript チュートリアル パート 3: バイナリ データ、ファイル
  • Ruan Yifeng JavaScript チュートリアル ブラウザ モデル関連の章

要約する

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

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

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

推薦する

アコーディオン効果を実現するJavaScript

この記事では、アコーディオン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

初心者のための入門チュートリアル⑤:ウェブサイト登録はとても簡単、簡単な登録のヒント

スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...

24 の実用的な JavaScript 開発のヒント

目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...

Nodejs と Socket.IO を組み合わせて Websocket の即時通信を実現

目次WebSocketを使用する理由ソケット.ioオープンソースプロジェクト効果プレビューアプリイン...

Linux システムで crontab を使用して MySQL データベースを定期的にバックアップする方法

システムの crontab を使用して定期的にバックアップ ファイルを実行し、バックアップ結果を日付...

時間のかかるDockerエラーのトラブルシューティングプロセス記録

目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...

Alibaba Cloud ECS サーバーでポート 8080 を開く方法

セキュリティ上の理由から、Alibaba Cloud Server ECS にはデフォルトで独自のセ...

CSS 不透明度子要素が親要素の透明度を継承するためのソリューションの詳細な説明

プロジェクト ページの作成中に、子要素が親要素の透明度を継承するという問題に遭遇しました。多くのドキ...

CSS の複雑なセレクターと CSS のフォントスタイルと色属性の詳細な説明

これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...

MySQLカーソルの使い方と機能の詳細な説明

[mysqlカーソルの使い方と機能]例:現在、テーブル A、B、C の 3 つのテーブルがあります。...

aタグ内のテキストを非表示にして画像を表示するには?360モードレンダリングに対応

多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...

MySQL 8.0.11 MacOS 10.13 のインストールと設定方法のグラフィックチュートリアル

MacにMySQLデータベースをインストールし、環境変数を設定する手順を参考までに記録します。具体的...

SQL ファジー クエリ レポート: ORA-00909: パラメータの数が無効です。解決策

あいまいクエリにOracleデータベースを使用する場合、コンソール エラーは次の図に表示されます。理...

1つの記事でJavaScriptのクロージャ関数について学ぶ

目次変数のスコープ閉鎖の概念クロージャの使用クロージャのデメリット最後に、クロージャのメリットとデメ...

Ubuntu 20.04でルートアカウントを有効にする方法

Ubuntu 20.04 をインストールした後、デフォルトでは root アカウントのログイン権限が...