JavaScript Blob對象原理及用法詳解
Blob是JavaScript內建對象,表示不可變的原始數(shù)據(jù),類似文件的對象。
blob是表示原始數(shù)據(jù)的不可變對象,這些數(shù)據(jù)不一定是JavaScript原生格式的,文件接口基于Blob,繼承Blob功能并將其擴展為支持用戶系統(tǒng)上的文件。
Blob有很多用途:
可以從網(wǎng)絡的內容創(chuàng)建。
可以保存到磁盤或從磁盤讀取。
例如,它們是FileReader API中使用的File的基礎數(shù)據(jù)結構。
我們可以使用 Blob() 構造函數(shù)從其他非blob對象和數(shù)據(jù)構造Blob。
Blob構造函數(shù)
Blob構造函數(shù)允許從其他對象創(chuàng)建Blob。例如,從字符串構造Blob。
let hero = {name: 'Batman'}
let blobObject = new Blob([jsON.stringify(hero, null, 2)], { type: 'application/json' });
console.log(blobObject);
現(xiàn)在,如果我們在瀏覽器中運行此文件,我們將在瀏覽器控制臺中看到以下輸出。

Blob size 屬性
Blob.size 屬性返回Blob或File的大小(以字節(jié)為單位)。
var sizeInBytes = blob.size
參見以下示例。
let hero = {name: 'Batman'}
let blobObject = new Blob([JSON.stringify(hero, null, 2)],{ type: 'application/json' });
console.log(blobObject.size);
將會輸出:22
Blob.slice() 方法
Blob.slice() 函數(shù)用于創(chuàng)建新的Blob對象,該對象包含源Blob的指定字節(jié)范圍內的數(shù)據(jù)。
instanceOfBlob.slice([start [, end [, contentType]]]);
參見以下代碼。
let hero = {name: 'Batman'}
let blobObject = new Blob([JSON.stringify(hero, null, 2)], { type: 'application/json' });
console.log(blobObject.slice(10, 16, { type: 'application/json' }));
輸出

總結
使用二進制遠程文件時,Blob非常有用。
Blob可能非常大,即也可能包含音頻和視頻數(shù)據(jù)??梢詣討B(tài)創(chuàng)建它們,并使用Blob URL用作文件。我們可以通過多種不同方式使用它們,以使它們更有用。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
一個級聯(lián)菜單代碼學習及removeClass與addClass的應用
最近在學些web前段的知識,看見博客園首頁左側的一個級聯(lián)菜單,很是好奇,于是想自己實現(xiàn)以下,代碼書寫很簡潔而且易懂,感興趣的朋友可以了解下,希望本文對你學習級聯(lián)菜單有所幫助2013-01-01
TypeScript使用axios庫進行高效的網(wǎng)頁數(shù)據(jù)抓取
在當今的互聯(lián)網(wǎng)時代,數(shù)據(jù)已成為企業(yè)最寶貴的資產(chǎn)之一,無論是社交媒體分析、市場趨勢預測還是用戶行為研究,高效地獲取和處理網(wǎng)頁數(shù)據(jù)都是至關重要的,本文將通過訪問抖音平臺的案例,介紹如何在TypeScript中使用axios庫進行高效的網(wǎng)頁數(shù)據(jù)抓取2024-08-08
JavaScript使用focus()設置焦點失敗的解決方法
這篇文章主要介紹了JavaScript使用focus()設置焦點失敗的一個解決方法 ,需要的朋友可以參考下2014-09-09
js實現(xiàn)的點擊數(shù)量加一可操作數(shù)據(jù)庫
這篇文章主要介紹了js如何實現(xiàn)的點擊數(shù)量加一操作數(shù)據(jù)庫,需要的朋友可以參考下2014-05-05
js實現(xiàn)ASP分頁函數(shù) HTML分頁函數(shù)
js實現(xiàn)ASP分頁函數(shù) HTML分頁函數(shù)...2006-09-09

