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