JavaScript的Blob對象

、Blob（Binary Large Object）定義：二進制類型的大對象數據，在 JavaScript 中 Blob 對象表示不可變的原始數據。

2、語法：

var aBlob=new Blob(blobParts, options);

其中：blobParts是一個由 ArrayBuffer、Blob、DOMString 等對象構成的數組；options是一個可選項，由type和endings組成，type代表了被放入到 blob 中的內容的 MIME 類型，endings用于指定包含行結束符 \n 的字符串如何被表示（native表示行結束符\n被更改為適合宿主操作系統的換行符，transparent會保持 blob 中保存的行結束符不變）。

定義Blob

3、Blob屬性和方法：兩個只讀屬性size和type，其中size屬性用于表示數據的大?。ㄒ宰止潪閱挝唬?，type 屬性為MIME 類型的字符串。slice([start[, end[, contentType]]])返回一個源指定范圍內的Blob 對象；stream()返回一個讀取 blob 內容的ReadableStream；text()返回一個 Promise 對象且包含 blob 所有內容的 UTF-8 格式的 USVString；arrayBuffer()返回一個 Promise 對象且包含 blob 所有內容的二進制格式的 ArrayBuffer。

Blob屬性和方法

4、Blob URL/Object URL 是一種偽協議，允許 Blob作為鏈接的URL源，如a.href、img.src等。

創建 Blob URL：url=URL.createObjectURL(Blob)，覽器器為 URL.createObjectURL 生成的 URL 存儲了一個 URL → Blob 映射，此類 URL 較短，例如

blob:http://domain/b3ad7623-60bb-4eff-9b9d-f925438b97c7

Blob 本身仍駐留在內存中，在不需要時，可以調用URL.revokeObjectURL(url)來刪除引用。

5、base64也可以作為<img src=/>的源，格式為

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

其中mediatype 是個MIME 類型的字符串，如 image/png，默認值為 text/plain;charset=US-ASCII，例如：

indow.localStorage 介紹

只讀的localStorage 屬性允許你訪問一個Document 源（origin）的對象 Storage；存儲的數據將保存在瀏覽器會話中。

localStorage 類似 sessionStorage，但其區別在于：存儲在 localStorage 的數據可以長期保留；而當頁面會話結束——也就是說，當頁面被關閉時，存儲在 sessionStorage 的數據會被清除。

測試樣例

localStorage功能僅限于處理字符串鍵/值對。

解決方法是在存儲對象之前將其字符串化，然后在檢索它時對其進行解析：

let obj={ name: "頭條", user: "新浪潮" };

window.localStorage.setItem("obj", JSON.stringify(obj));

let getObj=window.localStorage.getItem("obj");

console.log("getObj: ", JSON.parse(getObj));

只能在瀏覽器的控制臺測試哦

JavaScript中的對象是擁有屬性和方法的數據，今天小編將為大家帶來大數據編程入門：JavaScript對象。

真實生活中的對象，屬性和方法

真實生活中，手機是一個對象，并且有它的屬性，如品牌和顏色等，方法有開機關機等。

比如對象為手機（phone），屬性有：

phone.name=Redmi

phone.color=black

phone.size=6.67inch

phone.processor=phegda1200

方法有：

phone.start()

phone.working()

phone.call()

phone.stop()

所有的手機都有這些屬性，但是每款手機的屬性都不一樣；以及所有手機都擁有這些方法，但是它們被執行的時間可能會不一樣。

JavaScript對象

在JavaScript中，幾乎所有的事物都是對象。

注意：在JavaScript中，對象非常重要。理解對象后，就可以理解JavaScript。

在下面的代碼中變量為phone，所設置的值為”Redmi”:

var phone=“Redmi”;

一個對象也是一個變量，但是一個對象可以包含多個值（多個變量），并且每個值都以name:value的形式呈現。

var phone={name:”Redmi”,color:”black”};

在上面的示例中，兩個值（“Redmi”,”black”）賦予變量phone。

注意：在JavaScript中的對象是變量的容器。

對象定義

可以在JavaScript中使用字符定義和創建對象：

<!DOCTYPE html>

<html>

<head>

<title>Miuku</title>

</head>

<body>

<p>創建 JavaScript 對象。</p>

var person={firstName:"路飛", lastName:"夢奇", age:20, eyeColor:"blue"};

document.getElementById("demo").innerHTML=

person.firstName + " 現在 " + person.age + " 歲.";

</script>

</body>

</html>

運行結果：

在JavaScript中定義對象可以跨越多行，不強制要求空格和換行：

<!DOCTYPE html>

<html>

<head>

<title>Miuku</title>

</head>

<body>

<p>創建 JavaScript 對象。</p>

var person={

firstName : "路飛",

lastName : "夢奇",

age : 20,

eyeColor : "black"

};

document.getElementById("demo").innerHTML=

person.firstName + " 現在 " + person.age + " 歲。";

</script>

</body>

</html>

運行結果：

對象屬性

可以說“JavaScript對象是變量的容器”。

然而，我們通常認為“JavaScript對象是鍵值對的容器”。

鍵值對通常寫為name:value（鍵和值用冒號分隔）。

鍵值對在JavaScript對象中通常稱為對象屬性。

注意：在JavaScript中的對象是屬性變量的容器。

對象鍵值對的寫法類似于：

PHP 中的關聯數組

Python 中的字典

C 語言中的哈希表

Java 中的哈希映射

Ruby 和 Perl 中的哈希表

訪問對象屬性

在JavaScript中可以通過兩種方式來訪問對象屬性：

示例1:

<!DOCTYPE html>

<html>

<head>

<title>Miuku</title>

</head>

<body>

<p>

有兩種方式可以訪問對象屬性：

</p>

<p>

你可以使用 .property 或 ["property"].

</p>

var person={

firstName : "索隆",

lastName : "羅羅諾亞",

id : 1

};

document.getElementById("demo").innerHTML=

person.firstName + " " + person.lastName;

</script>

</body>

</html>

運行結果：

示例2：

<!DOCTYPE html>

<html>

<head>

<title>Miuku</title>

</head>

<body>

<p>

有兩種方式可以訪問對象屬性:

</p>

<p>

你可以使用 .property 或 ["property"]。

</p>

var person={

firstName: "索隆",

lastName : "羅羅諾亞",

id : 5566

};

document.getElementById("demo").innerHTML=

person["firstName"] + " " + person["lastName"];

</script>

</body>

</html>

運行結果：

對象方法

對象的方法定義函數并作為對象的屬性存儲。

通過添加()調用對象方法（作為函數）。

此實例訪問person對象的fullname()方法：

<!DOCTYPE html>

<html>

<head>

<title>Miuku</title>

</head>

<body>

<p>創建和使用對象方法。</p>

<p>對象方法作為一個函數定義存儲在對象屬性中。</p>

var person={

firstName: "索隆",

lastName : "羅羅諾亞",

id : 5566,

fullName : function()

{

return this.firstName + " " + this.lastName;

}

};

document.getElementById("demo").innerHTML=person.fullName();

</script>

</body>

</html>

運行結果：

如果要訪問person對象的fullname屬性，它將作為定義函數的字符串返回：

<!DOCTYPE html>

<html>

<head>

<title>Miuku</title>

</head>

<body>

<p>創建和使用對象方法。</p>

<p>對象方法是一個函數定義,并作為一個屬性值存儲。</p>

var person={

firstName: "路飛",

lastName : "夢奇",

id : 9,

fullName : function()

{

return this.firstName + " " + this.lastName;

}

};

document.getElementById("demo1").innerHTML="不加括號輸出函數表達式：" + person.fullName;

document.getElementById("demo2").innerHTML="加括號輸出函數執行結果：" + person.fullName();

</script>

</body>

</html>

運行結果：

訪問對象方法

可以使用以下語法創建對象方法：

methodName : function() {

// 代碼

}

可以使用下面的語法訪問對象：

objectName.methodName()

通常，fullname()是作為person對象的方法，而fullname是一個屬性。

如果使用fullname屬性，而不添加()，它將返回函數的定義：

objectName.methodName

有許多方法可以創建、使用和修改JavaScript對象。

同樣的，還有許多方法可以創建、使用和修改屬性和方法。

以上就是關于大數據編程入門：JavaScript對象的全部內容了，希望這篇文章可以幫助到大家~

在線咨詢

上一篇：vue 跳轉傳值，另個頁面接收
下一篇：2599 元起的天璣 9300+，Redmi K70

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript的Blob對象

indow.localStorage 介紹

測試樣例

您的項目需求