淺談JS的二進(jìn)制家族
概述
Blob: 前端的一個(gè)專門用于支持文件操作的二進(jìn)制對(duì)象
ArrayBuffer:前端的一個(gè)通用的二進(jìn)制緩沖區(qū),類似數(shù)組,但在API和特性上卻有諸多不同
Buffer:Node.js提供的一個(gè)二進(jìn)制緩沖區(qū),常用來處理I/O操作
Blob
我們首先來介紹Blob,Blob是用來支持文件操作的。簡(jiǎn)單的說:在JS中,有兩個(gè)構(gòu)造函數(shù) File 和 Blob, 而File繼承了所有Blob的屬性。
所以在我們看來,F(xiàn)ile對(duì)象可以看作一種特殊的Blob對(duì)象。
在前端工程中,我們?cè)谀男┎僮髦锌梢垣@得File對(duì)象呢? 請(qǐng)看:

(備注:目前 File API規(guī)范的狀態(tài)為Working Draft)
我們上面說了,F(xiàn)ile對(duì)象是一種特殊的Blob對(duì)象,那么它自然就可以直接調(diào)用Blob對(duì)象的方法。讓我們看一看Blob具體有哪些方法,以及能夠用它們實(shí)現(xiàn)哪些功能

Blob實(shí)戰(zhàn)
通過window.URL.createObjectURL方法可以把一個(gè)blob轉(zhuǎn)化為一個(gè)Blob URL,并且用做文件下載或者圖片顯示的鏈接。
Blob URL所實(shí)現(xiàn)的下載或者顯示等功能,僅僅可以在單個(gè)瀏覽器內(nèi)部進(jìn)行。而不能在服務(wù)器上進(jìn)行存儲(chǔ),亦或者說它沒有在服務(wù)器端存儲(chǔ)的意義。
下面是一個(gè)Blob的例子,可以看到它很短
blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
和冗長(zhǎng)的Base64格式的Data URL相比,Blob URL的長(zhǎng)度顯然不能夠存儲(chǔ)足夠的信息,這也就意味著它只是類似于一個(gè)瀏覽器內(nèi)部的“引用“。從這個(gè)角度看,Blob URL是一個(gè)瀏覽器自行制定的一個(gè)偽協(xié)議
Blob下載文件
我們可以通過window.URL.createObjectURL,接收一個(gè)Blob(File)對(duì)象,將其轉(zhuǎn)化為Blob URL,然后賦給 a.download屬性,然后在頁面上點(diǎn)擊這個(gè)鏈接就可以實(shí)現(xiàn)下載了
<!-- html部分 -->
<a id="h">點(diǎn)此進(jìn)行下載</a>
<!-- js部分 -->
<script>
var blob = new Blob(["Hello World"]);
var url = window.URL.createObjectURL(blob);
var a = document.getElementById("h");
a.download = "helloworld.txt";
a.href = url;
</script>
備注:download屬性不兼容IE, 對(duì)IE可通過window.navigator.msSaveBlob方法或其他進(jìn)行優(yōu)化(IE10/11)
運(yùn)行結(jié)果

Blob圖片本地顯示
window.URL.createObjectURL生成的Blob URL還可以賦給img.src,從而實(shí)現(xiàn)圖片的顯示
<!-- html部分 -->
<input type="file" id='f' />
<img id='img' style="width: 200px;height:200px;" />
<!-- js部分 -->
<script>
document.getElementById('f').addEventListener('change', function (e) {
var file = this.files[0];
const img = document.getElementById('img');
const url = window.URL.createObjectURL(file);
img.src = url;
img.onload = function () {
// 釋放一個(gè)之前通過調(diào)用 URL.createObjectURL創(chuàng)建的 URL 對(duì)象
window.URL.revokeObjectURL(url);
}
}, false);
</script>
運(yùn)行結(jié)果

Blob文件分片上傳
- 通過Blob.slice(start,end)可以分割大Blob為多個(gè)小Blob
- xhr.send是可以直接發(fā)送Blob對(duì)象的
前端
<!-- html部分 -->
<input type="file" id='f' />
<!-- js部分 -->
<script>
function upload(blob) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/ajax', true);
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.send(blob);
}
document.getElementById('f').addEventListener('change', function (e) {
var blob = this.files[0];
const CHUNK_SIZE = 20; .
const SIZE = blob.size;
var start = 0;
var end = CHUNK_SIZE;
while (start < SIZE) {
upload(blob.slice(start, end));
start = end;
end = start + CHUNK_SIZE;
}
}, false);
</script>
Node端
app.use(async (ctx, next) => {
await next();
if (ctx.path === '/ajax') {
const req = ctx.req;
const body = await parse(req);
ctx.status = 200;
console.log(body);
console.log('---------------');
}
});
文件內(nèi)容
According to the Zhanjiang commerce bureau, the actual amount of foreign capital utilized in Zhanjiang from January to October this year was
運(yùn)行結(jié)果

本地讀取文件內(nèi)容
如果想要讀取Blob或者文件對(duì)象并轉(zhuǎn)化為其他格式的數(shù)據(jù),可以借助FileReader對(duì)象的API進(jìn)行操作
- FileReader.readAsText(Blob):將Blob轉(zhuǎn)化為文本字符串
- FileReader.readAsArrayBuffer(Blob): 將Blob轉(zhuǎn)為ArrayBuffer格式數(shù)據(jù)
- FileReader.readAsDataURL(): 將Blob轉(zhuǎn)化為Base64格式的Data URL
下面我們嘗試把一個(gè)文件的內(nèi)容通過字符串的方式讀取出來
<input type="file" id='f' />
document.getElementById('f').addEventListener('change', function (e) {
var file = this.files[0];
const reader = new FileReader();
reader.onload = function () {
const content = reader.result;
console.log(content);
}
reader.readAsText(file);
}, false);
運(yùn)行結(jié)果

上面介紹了Blob的用法,我們不難發(fā)現(xiàn),Blob是針對(duì)文件的,或者可以說它就是一個(gè)文件對(duì)象,同時(shí)呢我們發(fā)現(xiàn)Blob欠缺對(duì)二進(jìn)制數(shù)據(jù)的細(xì)節(jié)操作能力,比如如果如果要具體修改某一部分的二進(jìn)制數(shù)據(jù),Blob顯然就不夠用了,而這種細(xì)粒度的功能則可以由下面介紹的ArrayBuffer來完成。
ArrayBuffer
讓我們用一張圖看下ArrayBuffer的大體的功能

同時(shí)要說明,ArrayBuffer跟JS的原生數(shù)組有很大的區(qū)別,如圖所示

下面一一進(jìn)行細(xì)節(jié)的介紹
通過ArrayBuffer的格式讀取本地?cái)?shù)據(jù)
document.getElementById('f').addEventListener('change', function (e) {
const file = this.files[0];
const fileReader = new FileReader();
fileReader.onload = function () {
const result = fileReader.result;
console.log(result)
}
fileReader.readAsArrayBuffer(file);
}, false);
運(yùn)行結(jié)果

通過ArrayBuffer的格式讀取Ajax請(qǐng)求數(shù)據(jù)
通過xhr.responseType = "arraybuffer" 指定響應(yīng)的數(shù)據(jù)類型
在onload回調(diào)里打印xhr.response
前端
const xhr = new XMLHttpRequest();
xhr.open("GET", "ajax", true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
console.log(xhr.response)
}
xhr.send();
Node端
const app = new Koa();
app.use(async (ctx) => {
if (pathname = '/ajax') {
ctx.body = 'hello world';
ctx.status = 200;
}
}).listen(3000)
運(yùn)行結(jié)果

通過TypeArray對(duì)ArrayBuffer進(jìn)行寫操作
const typedArray1 = new Int8Array(8); typedArray1[0] = 32; const typedArray2 = new Int8Array(typedArray1); typedArray2[1] = 42; console.log(typedArray1); // output: Int8Array [32, 0, 0, 0, 0, 0, 0, 0] console.log(typedArray2); // output: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]
通過DataView對(duì)ArrayBuffer進(jìn)行寫操作
const buffer = new ArrayBuffer(16); const view = new DataView(buffer); view.setInt8(2, 42); console.log(view.getInt8(2)); // 輸出: 42
Buffer
Buffer是Node.js提供的對(duì)象,前端沒有。 它一般應(yīng)用于IO操作,例如接收前端請(qǐng)求數(shù)據(jù)時(shí)候,可以通過以下的Buffer的API對(duì)接收到的前端數(shù)據(jù)進(jìn)行整合

Buffer實(shí)戰(zhàn)
例子如下:
Node端(Koa)
const app = new Koa();
app.use(async (ctx, next) => {
if (ctx.path === '/ajax') {
const chunks = [];
const req = ctx.req;
req.on('data', buf => {
chunks.push(buf);
})
req.on('end', () => {
let buffer = Buffer.concat(chunks);
console.log(buffer.toString())
})
}
});
app.listen(3000)
前端
const xhr = new XMLHttpRequest();
xhr.open("POST", "ajax", true);
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.send("asdasdsadfsdfsadasdas");
運(yùn)行結(jié)果
Node端輸出
asdasdsadfsdfsadasdas
以上就是淺談JS的二進(jìn)制家族的詳細(xì)內(nèi)容,更多關(guān)于JS的二進(jìn)制家族的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09
JavaScript實(shí)現(xiàn)窗口抖動(dòng)效果
抖動(dòng)效果在各大網(wǎng)頁上都常遇到,這篇文章主要介紹了JavaScript實(shí)現(xiàn)窗口抖動(dòng)效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
uni-app操作數(shù)據(jù)庫的三種方法總結(jié)
數(shù)據(jù)庫操作的,可以采用多方案,下面這篇文章主要給大家介紹了關(guān)于uni-app操作數(shù)據(jù)庫的三種方法,文中通過實(shí)例代碼和圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
JavaScript中this關(guān)鍵字用法實(shí)例分析
這篇文章主要介紹了JavaScript中this關(guān)鍵字用法,結(jié)合實(shí)例形式總結(jié)分析了javascript中this關(guān)鍵字在不同條件下的指向問題與相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
webpack圖片轉(zhuǎn)為base64的實(shí)現(xiàn)示例
在開發(fā)過程中,圖片轉(zhuǎn)成base64是常有的事,本文主要介紹了webpack圖片轉(zhuǎn)為base64的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12

