ArrayBuffer、Uint8Array、Blob與文本字符相互轉換的方法

本篇內容介紹了“ArrayBuffer、Uint8Array、Blob與文本字符相互轉換的方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

API介紹

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

FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

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

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

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

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

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

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

字符與ArrayBuffer，Uint8Array相互轉換

TextEncoder => ArrayBuffer

let encoder = new TextEncoder();

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

// Uint8Array 轉 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與文本字符相互轉換的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！