DataViewオブジェクトとは何か、およびその使用方法を確認してください
DataView
へのビューですArrayBuffer、 お気に入り型付き配列、ただしこの場合、配列内のアイテムはさまざまなサイズとタイプを持つことができます。
次に例を示します。
const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
これはバッファのビューであるため、開始するバイトと長さを指定できます。
const view = new DataView(buffer, 10) //start at byte 10
const view = new DataView(buffer, 10, 30) //start at byte 10, and add 30 items
これらの追加の引数を追加しない場合、ビューは位置0から始まり、バッファーに存在するすべてのバイトをロードします。
バッファにデータを追加するために使用できる一連のメソッドがあります。
setInt8()
setInt16()
setInt32()
setUint8()
setUint16()
setUint32()
setFloat32()
setFloat64()
これらのメソッドの1つを呼び出す方法は次のとおりです。
const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
view.setInt16(0, 2019)
デフォルトでは、データはを使用して保存されますビッグエンディアン表記。この設定を上書きして、3番目のパラメーターを追加することでリトルエンディアンを使用できます。true
値:
const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
view.setInt16(0, 2019, true)
ビューからデータを取得する方法は次のとおりです。
getInt8()
getInt16()
getInt32()
getUint8()
getUint16()
getUint32()
getFloat32()
getFloat64()
例:
const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
view.setInt16(0, 2019)
view.getInt16(0) //2019
以来DataView
はArrayBufferView
、次の3つの読み取り専用プロパティがあります。
buffer
元のArrayBufferを指しますbyteOffset
そのバッファのオフセットですbyteLength
内容の長さ(バイト単位)です
覚えておくべきことの1つは、型付き配列ではエンディアンを制御できないということです。システムのエンディアンを使用します。一般に、これは問題なく機能します。これは、前述の主な使用例は、マルチメディアAPIの1つを使用して配列をローカルで使用することであるためです。
型付き配列のデータを別のシステムに転送する場合、ビッグエンディアンを使用し、リトルエンディアンを使用すると、データが正しくエンコードされない可能性があります。
この種の制御が必要な場合は、DataView完璧な選択です。
私の無料ダウンロードJavaScriptビギナーズハンドブック
その他のブラウザチュートリアル:
- HTML5で利用できるいくつかの便利なトリック
- CMSベースのWebサイトをオフラインで機能させる方法
- プログレッシブウェブアプリの完全ガイド
- Fetch API
- プッシュAPIガイド
- チャネルメッセージングAPI
- サービスワーカーのチュートリアル
- キャッシュAPIガイド
- 通知APIガイド
- IndexedDBに飛び込む
- セレクターAPI:querySelectorおよびquerySelectorAll
- 延期と非同期でJavaScriptを効率的にロードする
- ドキュメントオブジェクトモデル(DOM)
- Web Storage API:ローカルストレージとセッションストレージ
- HTTPCookieのしくみを学ぶ
- 履歴API
- WebP画像形式
- XMLHttpRequest(XHR)
- 詳細なSVGチュートリアル
- データURLとは
- Webプラットフォームを学ぶためのロードマップ
- CORS、クロスオリジンリソースシェアリング
- Webワーカー
- requestAnimationFrame()ガイド
- Doctypeとは何ですか
- DevToolsコンソールとコンソールAPIの操作
- 音声合成API
- プレーンJavaScriptでDOMreadyイベントを待つ方法
- DOM要素にクラスを追加する方法
- querySelectorAllからDOM要素をループする方法
- DOM要素からクラスを削除する方法
- DOM要素にクラスがあるかどうかを確認する方法
- DOMノード値を変更する方法
- querySelectorAllから返されたDOM要素のリストにクリックイベントを追加する方法
- WebRTC、リアルタイムWeb API
- JavaScriptで要素のスクロール位置を取得する方法
- DOM要素を置き換える方法
- 入力ファイルフィールドの画像のみを受け入れる方法
- なぜブラウザのプレビューバージョンを使用するのですか?
- Blobオブジェクト
- ファイルオブジェクト
- FileReaderオブジェクト
- FileListオブジェクト
- ArrayBuffer
- ArrayBufferView
- URLオブジェクト
- 型付き配列
- DataViewオブジェクト
- BroadcastChannel API
- Streams API
- FormDataオブジェクト
- ナビゲーターオブジェクト
- GeolocationAPIの使用方法
- getUserMedia()の使用方法
- ドラッグアンドドロップAPIの使用方法
- Webページのスクロールを操作する方法
- JavaScriptでのフォームの処理
- キーボードイベント
- マウスイベント
- タッチイベント
- DOM要素からすべての子を削除する方法
- バニラJavascriptを使用してHTML属性を作成する方法
- JavaScriptを使用してチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
- JavaScriptを使用してクリップボードにコピーする方法
- JavaScriptを使用してボタンを無効にする方法
- ブラウザでページを編集可能にする方法
- URLSearchParamsを使用してJavaScriptでクエリ文字列値を取得する方法
- ページからすべてのCSSを一度に削除する方法
- insertAdjacentHTMLの使用方法
- Safari、終了する前に警告する
- JavaScriptを使用してDOMに画像を追加する方法
- フォームをリセットする方法
- GoogleFontsの使い方