JavaScript の型付き配列について 1 つの記事で学ぶ-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2021-07-29 18:51:02

転載

1823 人が閲覧しました

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

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

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 開発に移行する場合、型付き配列は不可欠です。これは主に、型付き配列の使用を必要とするより複雑なアプリケーションを開発する必要があるためです。

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

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