這篇文章主要介紹“二進(jìn)制相關(guān)數(shù)據(jù)類型有哪些”，在日常操作中，相信很多人在二進(jìn)制相關(guān)數(shù)據(jù)類型有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”二進(jìn)制相關(guān)數(shù)據(jù)類型有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到徽縣網(wǎng)站設(shè)計(jì)與徽縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋徽縣地區(qū)。

二進(jìn)制相互轉(zhuǎn)換圖

二進(jìn)制相關(guān)數(shù)據(jù)類型

在介紹常見(jiàn)的二進(jìn)制數(shù)據(jù)處理之前，先簡(jiǎn)單介紹下幾種二進(jìn)制相關(guān)的數(shù)據(jù)類型

ArrayBuffer && TypedArray

TypedArray 是 ES6+ 新增的描述二進(jìn)制數(shù)據(jù)的類數(shù)組數(shù)據(jù)結(jié)構(gòu)。但它本身不可以被實(shí)例化，甚至無(wú)法訪問(wèn)，你可以把它理解為 Abstract Class 或者 Interface。而基于 TypedArray，有如下數(shù)據(jù)類型：

•  Uint8ArrayUint 及 Unsigned Int 代表數(shù)組的每一項(xiàng)是無(wú)符號(hào)整型8 代表數(shù)據(jù)的每一項(xiàng)占 8 個(gè)比特位，即一個(gè)字節(jié)

•  Int8Array

•  Uint16Array

•  Int16Array

•  ...

通過(guò) Uint8Array，即可知道 Uint16Array，Int8Array 所代表的意義。

const array = new Int32Array([1, 2, 3])  // .length 代表數(shù)組的大小  // 3  array.length   // .btyeLength 代表數(shù)據(jù)所占字節(jié)大小  // 12  array.byteLength

ArrayBuffer 代表二進(jìn)制數(shù)據(jù)結(jié)構(gòu)，「并且只讀」，需要轉(zhuǎn)化為 TypedArray 進(jìn)行寫操作。

const array = new Int16Array([1, 2, 3])  // TypedArray -> ArrayBuffer  array.buffer  // ArrayBuffer -> TypedArray  new Int16Array(array.buffer)  // buffer.length 代表數(shù)據(jù)所占用字節(jié)大小  array.buffer.length === array.byteLength

連接多個(gè) TypedArray

TypedArray 沒(méi)有像數(shù)組那樣的 Array.prototype.concat 方法用來(lái)連接多個(gè) TypedArray。不過(guò)它提供了 TypedArray.prototype.set 可以用來(lái)間接連接字符串

  ?    可以參考 MDN 文檔：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set    ?

// 在位移 offset 位置放置 typedarray  typedarray.set(typedarray, offset)

原理就是先分配一塊空間足以容納需要連接的 TypedArray，然后逐一在對(duì)應(yīng)位置疊加

function concatenate(constructor, ...arrays) {    let length = 0;    for (let arr of arrays) {      length += arr.length;    }    let result = new constructor(length);    let offset = 0;    for (let arr of arrays) {      result.set(arr, offset);      offset += arr.length;    }    return result;  }  concatenate(Uint8Array, new Uint8Array([1, 2, 3]), new Uint8Array([4, 5, 6]))

同時(shí)您還需要對(duì)資源的獲取有大致的了解，如 XHR，fetch，通過(guò)文件上傳。

Blob

Blob 是瀏覽器端的類文件對(duì)象。操作 Blob 需要使用數(shù)據(jù)類型 FileReader。

FileReader 有以下方法，可以把 Blob 轉(zhuǎn)化為其它數(shù)據(jù)

•  FileReader.prototype.readAsArrayBuffer

•  FileReader.prototype.readAsText

•  FileReader.prototype.readAsDataURL

•  FileReader.prototype.readAsBinaryString 

const blob = new Blob('hello'.split(''))  // 表示文件的大小  blob.size  const array = new Uint8Array([128, 128, 128])  const blob2 = new Blob([array])  function readBlob (blob, type) {    return new Promise(resolve => {      const reader = new FileReader()      reader.onload = function (e) {        resolve(e.target.result)      }      reader.readAsArrayBuffer(blob)    })  }  readBlob(blob, 'DataURL').then(url => console.log(url))

數(shù)據(jù)輸入

數(shù)據(jù)輸入或者叫資源的請(qǐng)求可以分為以下兩種途徑

•  通過(guò) url 地址請(qǐng)求網(wǎng)絡(luò)資源

•  通過(guò)文件上傳請(qǐng)求本地資源

fetch

fetch 應(yīng)該是大家比較熟悉的，但大多使用環(huán)境比較單一，一般用來(lái)請(qǐng)求 json 數(shù)據(jù)。其實(shí)， 「它也可以設(shè)置返回?cái)?shù)據(jù)格式為 Blob 或者 ArrayBuffer。」

fetch 返回一個(gè)包含 Response 對(duì)象的 Promise，Response 有以下方法

•  Response.prototype.arrayBuffer

•  Response.prototype.blob

•  Response.prototype.text

•  Response.prototype.json

  ?    詳情可以查看 MDN 文檔 https://developer.mozilla.org/en-US/docs/Web/API/Response   ?

fetch('/api/ping').then(res => {    // true    console.log(res instanceof Response)    // 最常見(jiàn)的使用    return res.json()   // 返回 Blob    // return res.blob()    // 返回 ArrayBuffer   // return res.arrayBuffer()  })

另外，萬(wàn)能的 Response API 既可以可以使用 TypedArray，Blob，Text 作為輸入，又可以使用它們作為輸出。

「這意味著關(guān)于這三種數(shù)據(jù)類型的轉(zhuǎn)換完全可以通過(guò) Response」

xhr

「xhr 可以設(shè)置 responseType 接收合適的數(shù)據(jù)類型」

const request = new XMLHttpRequest()  request.responseType = 'arraybuffer'  request.responseType = 'blob'

File

本地文件可以通過(guò) input[type=file] 來(lái)上傳文件。

<input type="file" id="input">

當(dāng)上傳成功后，可以通過(guò) document.getElementById('input').files[0] 獲取到上傳的文件，即一個(gè) File 對(duì)象，它是 Blob 的子類，可以通過(guò) FileReader 或者 Response 獲取文件內(nèi)容。

數(shù)據(jù)輸出

或者叫數(shù)據(jù)展示或者下載，數(shù)據(jù)經(jīng)二進(jìn)制處理后可以由 url 表示，然后通過(guò) image, video 等元素引用或者直接下載。

Data URL

Data URL 即 Data As URL。所以， 「如果資源過(guò)大，地址便會(huì)很長(zhǎng)。」 使用以下形式表示。

data:[<mediatype>][;base64],<data>

先來(lái)一個(gè) hello, world。把以下地址粘入地址欄，會(huì)訪問(wèn)到 hello, world

data:text/html,<h2>Hello%2C%20World!</h2>

Base64 編碼與解碼

Base64 使用大小寫字母，數(shù)字，+ 和 / 64 個(gè)字符來(lái)編碼數(shù)據(jù)，所以稱為 Base64。經(jīng)編碼后，文本體積會(huì)變大 1/3

在瀏覽器中，可以使用 atob 和 btoa 編碼解碼數(shù)據(jù)。

// aGVsbG8=  btoa('hello')

Object URL

可以使用瀏覽器新的 API URL 對(duì)象生成一個(gè)地址來(lái)表示 Blob 數(shù)據(jù)。

// 粘貼生成的地址，可以訪問(wèn)到 hello, world  // blob:http://host/27254c37-db7a-4f2f-8861-0cf9aec89a64  URL.createObjectURL(new Blob('hello, world'.split('')))

下載

data:application/octet-stream;base64,5bGx5pyI

資源的下載可以利用 FileSaver[1] 。

這里也簡(jiǎn)單寫一個(gè)函數(shù)，用來(lái)下載一個(gè)鏈接

function download (url, name) {    const a = document.createElement('a')    a.download = name    a.rel = 'noopener'    a.href = url    // 觸發(fā)模擬點(diǎn)擊    a.dispatchEvent(new MouseEvent('click'))    // 或者 a.click(  }

二進(jìn)制數(shù)據(jù)轉(zhuǎn)換

二進(jìn)制數(shù)據(jù)轉(zhuǎn)換

以上是二進(jìn)制數(shù)據(jù)間的轉(zhuǎn)換圖，有一些轉(zhuǎn)換可以直接通過(guò) API，有些則需要代碼，以下貼幾種常見(jiàn)轉(zhuǎn)換的代碼

String to TypedArray

根據(jù)上圖，由字符串到 TypedArray 的轉(zhuǎn)換，可以通過(guò) 「String -> Blob -> ArrayBuffer -> TypedArray」 的途徑。

關(guān)于代碼中的函數(shù) readBlob 可以回翻環(huán)節(jié) 數(shù)據(jù)類型 - Blob[2]

const name = '山月'  const blob = new Blob(name.split(''))  readBlob(blob, 'ArrayBuffer').then(buffer => new Uint8Array(buffer))

也可以通過(guò) Response API 直接轉(zhuǎn)換 「String -> ArrayBuffer -> TypedArray」

const name = '山月'  new Response(name).arrayBuffer(buffer => new Uint8Array(buffer))

這上邊兩種方法都是直接通過(guò) API 來(lái)轉(zhuǎn)化，如果你更像了解如何手動(dòng)轉(zhuǎn)換一個(gè)字符串和二進(jìn)制的 TypedArray

String to TypedArray 2

使用 enodeURIComponent 把字符串轉(zhuǎn)化為 utf8，再進(jìn)行構(gòu)造 TypedArray。

function stringToTypedArray(s) {    const str = encodeURIComponent(s)    const binstr = str.replace(/%([0-9A-F]{2})/g, (_, p1) => {      return String.fromCharCode('0x' + p1)    })    return new Uint8Array(binstr.split('').map(x => x.charCodeAt(0)))  }

實(shí)踐

1. 如何上傳本地圖片并在網(wǎng)頁(yè)上展示

由以上整理的轉(zhuǎn)換圖得出途徑

本地上傳圖片 -> Blob -> Object URL

2. 如何拼接兩個(gè)音頻文件

由以上整理的轉(zhuǎn)換圖得出途徑

fetch請(qǐng)求音頻資源 -> ArrayBuffer -> TypedArray -> 拼接成一個(gè) TypedArray -> ArrayBuffer -> Blob -> Object URL

3. 如何把 json 數(shù)據(jù)轉(zhuǎn)化為 demo.json 并下載文件

json 視為字符串，由以上整理的轉(zhuǎn)換圖得出途徑

Text -> DataURL

除了使用 DataURL，還可以轉(zhuǎn)化為 Object URL 進(jìn)行下載。關(guān)于下載的函數(shù) download，可以參考以上環(huán)節(jié) 數(shù)據(jù)輸出-下載[3]

Text -> Blob -> Object URL

可以把以下代碼直接粘貼到控制臺(tái)下載文件

const json = {    a: 3,    b: 4,    c: 5  }  const str = JSON.stringify(json, null, 2)  // 方案一：Text -> DataURL  const dataUrl = `data:,${str}`  download(dataUrl, 'demo.json')  // 方案二：Text -> Blob -> ObjectURL  const url = URL.createObjectURL(new Blob(str.split('')))  download(url, 'demo1.json')

到此，關(guān)于“二進(jìn)制相關(guān)數(shù)據(jù)類型有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

本文題目：二進(jìn)制相關(guān)數(shù)據(jù)類型有哪些
文章轉(zhuǎn)載：http://www.chinadenli.net/article40/joegeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、微信公眾號(hào)、全網(wǎng)營(yíng)銷推廣、微信小程序、網(wǎng)站建設(shè)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)