JavaScript JSON

西电卢本伟

已于 2022-04-09 15:41:34 修改

阅读量1k

点赞数 1

分类专栏： JavaScript笔记文章标签： javascript

于 2022-04-09 15:35:49 首次发布

本文链接：https://blog.csdn.net/lbwnbnbnbnbnbnbn/article/details/124059755

版权

JavaScript笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

JavaScript对象
什么是 JSON?

JavaScript对象

在了解 JSON 之前，我们先来了解一下 JavaScript 对象，这俩有着不解之缘

对象定义

JavaScript 对象是拥有属性和方法的数据。它跟 C 中的结构体和 C++ 的类很像。在 JavaScript中，几乎所有的事物都是对象。

可以使用字符来定义和创建 JavaScript 对象：

var person = {firstName:"lbw", lastName:"nb", age:30, eyeColor:"brown"};

可以跨越多行定义，空格跟换行不是必须的：

var person = {
	firstName:"lbw", 
	lastName:"nb", 
	age:30, 
	eyeColor:"brown"
};

上述可以看到对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对（键值对）呈现

对象属性

JavaScript 对象是变量的容器但是，也可以说 JavaScript 对象是键值对的容器。通过上面了解到键值对通常写法为name:value (键与值以冒号分割)。而键值对在 JavaScript 对象通常称为对象属性。如何访问呢？
方式一：

person.lastName;

方式二：

person["lastName"];

对象方法

对象内可以定义方法，并作为对象的属性存储。形式是以函数定义的，但又与规整的函数不太同，例如：

var person = {
	firstName:"lbw", 
	lastName:"nb", 
	age:30, 
	eyeColor:"brown"，
	fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

为了满足键值对的格式，对象方法使用函数名：function(参数){函数体}的格式，而不是规整的function 函数名(参数){函数题}的格式

如何调用呢？

<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "lbw",
    lastName : "nb",
    age:30, 
	eyeColor:"brown"，
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
</script>

输出结果：

不加括号输出函数表达式：function() { return this.firstName + " " + this.lastName; }
加括号输出函数执行结果：lbw nb

可见，fullName作为 person 对象的属性，直接访问它将作为一个定义函数的字符串返回，若要执行该函数，则需要加上括号

什么是 JSON?

了解完对象之后，解释 JSON 就容易很多。~~或许会更晕？~~

JSON 英文全称 JavaScript Object Notation，是一种轻量级的数据交换格式，是独立的语言。JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据。
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

还是有点抽象，别急慢慢往下看

JSON 定义

以下 JSON 语法定义了 sites 对象：3 条网站信息（对象）的数组：

{"sites":[
    {"name":"Baidu", "url":"www.baidu.com"},
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

语法规则为：数据为键/值对；数据由逗号分隔；花括号保存对象；方括号保存数组，数组可以包含多个对象

JSON 对象和数组

JSON 对象保存在花括号内，就像在 JavaScript 中, 对象可以保存多个键/值对：

{"name":"Baidu", "url":"www.baidu.com"}

JSON 数组保存在方括号内，就像在 JavaScript 中，数组可以包含对象：

"sites":[
    {"name":"Baidu", "url":"www.baidu.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

所以上述 JSON 定义就很明了了，site 是 JSON 对象，此对象又包含三个网站对象组成的数组

JSON 与 JS 对象的关系

通过上面的了解，会发现 JSON 和 JS对象好像没有什么区别，甚至会觉得两个就是一个东西。但其实，可以这么理解：JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，JSON本质是一个字符串。

比如：

var obj = {a: 'Hello', b: 'World'}; //这是一个js对象，注意js对象的键名也是可以使用引号包裹的,这里展示就不用引号包含了
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

这样应该就很好理解了，其实可以类比有的编程语言里的 toString() 方法，将对象转换为字符串表示

JSON.parse()

了解两者的关系以后，JavaScript 还提供了两者相互转换的函数

JSON.parse() 方法将 JSON 文本格式数据转换为 JavaScript 对象，语法是：

JSON.parse(text[, reviver])

参数说明：

text：必需，一个有效的 JSON 字符串

reviver：可选，一个转换结果的函数，将为对象的每个成员调用此函数

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h2>从 JSON 对象中创建 JavaScript 对象</h2>

<p id="demo"></p>

<script>
var obj = JSON.parse('{ "name":"baidu", "alexa":10000, "site":"www.baidu.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
document.write(typeof obj);
</script>

</body>
</html>

输出结果：

从 JSON 对象中创建 JavaScript 对象
baidu：www.baidu.com

object

上述 JSON对象经过函数JSON.parse()转换成了 JS 对象，可以看见正确输出obj 对象的属性并显示类型为object

JSON.stringify()

JSON.stringify() 方法将 JavaScript 对象转换为字符串，语法：

JSON.stringify(value[, replacer[, space]])

参数说明：

value：必需，要转换的 JavaScript 值（通常为对象或数组）

replacer：可选，用于转换结果的函数或数组。如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：“”。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组

space：可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<h2>将 JavaScript 对象转换为 JSON 字符串</h2>

<p id="demo"></p>

<script>

    var obj = { "name":"baidu", "alexa":10000, "site":"www.baidu.com"};
    var myJSON = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJSON;
    document.write(typeof obj + "<br>");
    document.write(typeof myJSON);

</script>

</body>
</html>

输出结果：

将 JavaScript 对象转换为 JSON 字符串
{"name":"baidu","alexa":10000,"site":"www.baidu.com"}

object
string

上述 obj 对象经过函数JSON.stringify()转换成了字符串，可以看见转换前 obj 类型为 object，转换后为 string

西电卢本伟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript JSON

js对象、js json
复制链接

扫一扫

专栏目录