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 介绍

测试样例

您的项目需求