API介紹

前端 File 上傳、下載，Canvas 保存圖片，Ajax 和 Fetch 二進制流傳輸，PDF 預(yù)覽，瀏覽器上 WebAssembly 的應(yīng)用 等等都需要用到 ArrayBuffer 和 Blob 。文件就具體介紹一下這些對象的相互轉(zhuǎn)換。

FileReader 對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。

Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進制的格式進行讀取，也可以轉(zhuǎn)換成 ReadableStream 來用于數(shù)據(jù)操作。Blob 表示的不一定是 JavaScript 原生格式的數(shù)據(jù)。File 接口基于 Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。

ArrayBuffer 對象代表儲存二進制數(shù)據(jù)的一段內(nèi)存，它不能直接讀寫，只能通過視圖（TypedArray 視圖和 DataView 視圖)來讀寫，視圖的作用是以指定格式解讀二進制數(shù)據(jù)。

Uint8Array 對象是 ArrayBuffer 的一個數(shù)據(jù)類型（8 位不帶符號整數(shù)）。

TextEncoder 接受代碼點流作為輸入，并提供 UTF-8 字節(jié)流作為輸出。

TextDecoder 接口表示一個文本解碼器，一個解碼器只支持一種特定文本編碼，例如 utf-8、iso-8859-2、koi8、cp1261，gbk 等等。解碼器將字節(jié)流作為輸入，并提供代碼點流作為輸出。

注意： 二進制數(shù)組并不是真正的數(shù)組，而是類似數(shù)組的對象。

字符與ArrayBuffer，Uint8Array相互轉(zhuǎn)換

TextEncoder => ArrayBuffer

let encoder = new TextEncoder();

// 字符 轉(zhuǎn) Uint8Array
let uint8Array = encoder.encode("你好啊");

// Uint8Array 轉(zhuǎn) ArrayBuffer
let arrayBuffer = uint8Array.buffer

Blob => ArrayBuffer

let str = 'hello，你好嗎？'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
blob.arrayBuffer().then(buffer=>{
  // ArrayBuffer
  console.log(buffer)
  let text = utf8decoder.decode(buffer)
  // String
  console.log(text)
})

FileReader => ArrayBuffer

let str = 'hello，你好嗎？'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
let fr = new FileReader()
fr.readAsArrayBuffer(blob)
fr.onload = function(res) {
  // ArrayBuffer
  let buffer = fr.result
  console.log(buffer)
  let text = utf8decoder.decode(buffer)
  // String
  console.log(text)
}

以上就是ArrayBuffer Uint8Array Blob與文本字符相互轉(zhuǎn)換示例的詳細內(nèi)容，更多關(guān)于ArrayBuffer Uint8Array Blob轉(zhuǎn)換文本字符的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論