JavaScript の型付き配列について 1 つの記事で学ぶ

この記事では、JavaScript の型付き配列について説明し、その構成、通常の配列との違い、Web 開発での使用方法について説明します。

JavaScript では、配列が本質的に動的であり、任意の JavaScript オブジェクトを保持できることを理解するには、誰もが配列に十分精通している必要があります。ただし、C などの別の言語を使用したことがある場合は、配列は本質的に動的ではないことを知っているはずです。そして、その配列には特定のデータ型のみを保存できます。これにより、パフォーマンスの観点から配列の効率が向上します。ただし、配列のダイナミズムと保存される情報の種類の多様化によって、実際に JavaScript 配列が非効率になるわけではありません。 JavaScript エンジンの最適化のおかげで、JavaScript での配列の実行速度は実際に非常に高速になります。

Web アプリケーションがますます強力になるにつれて、Web アプリケーションに生のバイナリ データを処理させて操作させる必要が生じ始めています。 JavaScript 配列ではこれらの生のバイナリ データを処理できないため、JavaScript の型付き配列を導入しました。

型付き配列

型付き配列は配列とよく似たオブジェクトですが、生のバイナリ データをメモリ バッファに書き込むためのメカニズムを提供します。この機能はすべての主要なブラウザで十分にサポートされており、ES6 では JavaScript コア フレームワークに統合されており、map()、filter() などの配列メソッドにもアクセスできます。型付き配列について詳しく学ぶには、この記事の最後に記載されているリソースを参照することを強くお勧めします。

Composition

型付き配列は、 Buffer と View という 2 つの主要な部分で構成されます。

Buffer

Buffer は、データ ブロックを表す ArrayBuffer 型のオブジェクトです。この生のバイナリ データ ブロックは、個別にアクセスしたり変更したりすることはできません。アクセスまたは変更できないデータ オブジェクトをどのように使用できるのか疑問に思われるかもしれません。実際、ビューはバッファの読み取りおよび書き込みインターフェイスです。

View

View は、ArrayBuffer に格納されている生のバイナリ コンテンツにアクセスして変更できるようにするオブジェクトです。 。一般に2つの見方があります。

TypedArray オブジェクトのインスタンス

これらのタイプのオブジェクトは通常の配列とよく似ていますが、単一タイプの数値データのみを格納します。たとえば、Int8、Uint8、Int16、Float32 は型付き配列のデータ型です。タイプ内の数字は、データタイプに割り当てられたビット数を表します。たとえば、Int8 は 8 ビット整数を表します。

型付き配列のデータ型の詳細については、リファレンス ドキュメントを参照してください。

DataView オブジェクト

DataView のインスタンスは、 getter / setter 任意のデータをバッファーに読み書きするための API。これにより、特に単一の型付き配列で複数のデータ型を処理する必要がある場合に、開発が大幅に容易になります。

DataView を使用するもう 1 つの利点は、データのエンディアンを制御できることです。型付き配列ではプラットフォームのエンディアンが使用されます。もちろん、プログラムがローカルで実行されている場合、デバイスは入力配列と同じエンディアンを使用するため、これは問題にはなりません。 Intel はリトル エンディアンを使用するため、ほとんどの場合、型付き配列はリトル エンディアンになります。 Intel はコンピューターのプロセッサーによく使われているため、ほとんどの場合問題になりません。ただし、リトル エンディアンでエンコードされたデータがビッグ エンディアン エンコードを使用するデバイスに送信されると、読み取り中にエラーが発生し、最終的にはデータ損失につながる可能性があります。 DataView を使用するとエンディアンの方向を制御できるため、必要に応じて使用できます。

通常の配列との違い

前述したように、通常の JavaScript 配列は JavaScript エンジンによって最適化されているため、型付き配列を使用する必要はありません。これではあまりアップグレードされないからです。ただし、型付き配列には通常の配列とは異なる機能がいくつかあり、それが型付き配列を選択する理由である可能性があります。

• 生のバイナリ データを処理できるようにします
• 処理するデータ型が制限されているため、エンジンは通常の配列よりも型付き配列を最適化するほうが簡単です。実際には、通常の配列が最適化されるためです。 、非常に複雑なプロセスです。
• エンジンはさまざまな理由で最適化しないことを決定する可能性があるため、通常の配列が常に最適化されるという保証はありません。

Web 開発での使用

XMLHttpRequest API

応答タイプに基づいて # を使用できます ## ArrayBuffer フォームでデータ応答を受信します。

const xhr = new XMLHttpRequest();
xhr.open('GET', exampleUrl);
xhr.responseType = 'arraybuffer';

xhr.onload = function () {
    const arrayBuffer = xhr.response;
    // 处理数据
};

xhr.send();

Fetch API

XMLHttpRequest API と同様に、Fetch API を使用すると、

ArrayBuffer で応答を受信することもできます。必要なのは、フェッチ API 応答で arrayBuffer() メソッドを使用することだけです。ArrayBuffer を使用して解決された Promise を受け取ります。

fetch(url)
.then(response => response.arrayBuffer())
.then(arrayBuffer => {
   // 处理数据
});

HTML Canvas

HTML5 Canvas 要素を使用すると、動的な 2D 形状とビットマップ イメージをレンダリングできます。この要素は、JavaScript を使用して描画されるグラフィックのコンテナとしてのみ機能します。

canvas の 2D コンテキストを使用すると、ビットマップ データを

Uint8ClampedArray のインスタンスとして取得できます。アクセル博士が提供したサンプル コードを見てみましょう。

const canvas = document.getElementById('my_canvas');
const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const uint8ClampedArray = imageData.data;

WebGL

WebGL を使用すると、高性能のインタラクティブな 3D および 2D グラフィックスをレンダリングできます。生のピクセル データを処理してキャンバス上に必要なグラフィックを出力する際に​​、型付き配列に大きく依存します。

WebGL の基本について詳しくは、

この記事をご覧ください。

Web Socket

Web Socket を使用すると、生のバイナリ データを BLOB または配列バッファの形式で送受信できます。

const socket = new WebSocket("ws://localhost:8080");
socket.binaryType = "arraybuffer";

// 监听 message
socket.addEventListener("message", function (event) {
    const view = new DataView(event.data);
    // 处理接收数据
});

// 发送二进制数据
socket.addEventListener('open', function (event) {
    const typedArray = new Uint16Array(7);
    socket.send(typedArray.buffer);
});

初心者には型付き配列の詳細な理解は必要ないかもしれませんが、中級および上級の JavaScript 開発に移行する場合、型付き配列は不可欠です。これは主に、型付き配列の使用を必要とするより複雑なアプリケーションを開発する必要があるためです。

型付き配列の詳細については、以下に添付されているリソース リンクを参照してください。

お読みいただきありがとうございます。プログラミングが楽しくなることを祈っています。 ！

リソース

• JavaScript 型付き配列 - MDN ドキュメント

• アクセル博士による JS の探索

元のアドレス: https://blog.bitsrc.io/javascript-typed-arrays-ccfa5ae8838d

原著者: Mahdhi Rezvi

プログラミング関連の知識の詳細については、

プログラミング入門をご覧ください。 ！

以上がJavaScript の型付き配列について 1 つの記事で学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。