目录
JSON对象
任务描述
本关任务:练习在JavaScript
中定义JSON
对象。
相关知识
JSON
既然是用来传递数据的,必然要先存储数据,存储数据需要采用一定的数据格式,JSON
常用的数据格式有JSON
对象、JSON
数组和JSON
字符串。
什么是JSON对象
JSON
对象(通常叫JSON
)是一种文本数据的交换格式,用于存储和传输数据。示例如下: {"name:"Jerry", "age":15}
这就是一个简单的json
对象,它的规则是:
- 数据以键/值对的形式存在;
- 数据之间用逗号间隔;
- 大括号表示保存对象;
- 方括号表示保存数组。
JSON对象与Javascript对象的区别
在实训四里面,我们讲过JavaScript
中的自定义对象。而JSON
是基于JavaScript
语法的,所以JSON
中也有对象的概念,但是和JavaScript
中的对象有一些小的区别。 定义一个JavaScript
对象:
var myObject = {
id:1,
name:"Peter Bruce",
"first name":"Bruce",
display:function() {
console.log(this.name);
}
}
定义一个JSON
对象:
{"id":1,"name":"Peter Bruce","first name":"Bruce"}
三点区别:
-
JSON
对象的属性名(key
)必须被包含在双引号之中,而JavaScript
对象除了有空格的属性名、中间有连字符-
的属性名必须在双引号之中外,其它随意; -
不能在
JSON
对象中定义方法,而在JavaScript
对象中可以; -
JSON
对象可以被很多语言操作,而JavaScript
对象只有JS
自己可以识别。
定义JSON对象的方法如下:用一个{}
包含在内,内部是若干个属性名和属性值构成的键值对,键值对之间用,
隔开,属性名和属性值之间用:
隔开,属性值可以是以下任意一种数据类型的数据:数字、字符串、JSON
数组、JSON
对象、null
。如:
{"a":1,"b":2.12,"c":true,"d":"string","e":null};
属性值是JSON
数组或者JSON
对象的情况稍复杂,后面的关卡将介绍。
在JavaScript中使用JSON对象
支持JSON
的语言都能够使用JSON
对象,这里仅介绍在JavaScript
中如何使用JSON
对象。
- 在
JavaScript
中定义一个JSON
对象:var jsonObject = {"name":"js","number":2};
-
操作属性,使用
.
或者[]
:console.log(jsonObject.name);//读属性,输出js console.log(jsonObject["name"]);//读属性,输出js jsonObject.name = "javascript";//写属性,给name属性赋值javascript
-
删除属性,使用
delete
:var jsonObject = {"name":"js","number":2}; delete jsonObject.name;//删除name属性
-
遍历属性,使用
for-in
循环:var jsonObject = {"name":"js","number":2}; for(att in jsonObject) { console.log(jsonObject[att]);//依次输出js、2 }
编程要求
本关的编程任务是补全右侧代码片段中Begin
至End
中间的代码,具体要求如下:
-
定义一个
JSON
对象JSONObject
,它有三个属性:key1
、key2
和key3
,它们的值分别是参数a
、b
和c
; -
删除其中名字为
key3
的属性; -
删除完成后,遍历其余的所有属性,返回各属性的值连接成的字符串,中间用
,
隔开;
function mainJs(a,b,c) {
//请在此处编写代码
/********** Begin **********/
var jo = { "key1": a, "key2": b, "key3": c };
delete jo.key3;
var s = "";
for (var att in jo) {
s += jo[att] + ",";
}
return s.substring(0, s.length - 1);
/********** End **********/
}
JSON数组
任务描述
本关任务:定义并操作JSON
键值对中的值。
相关知识
JSON属性对应的值(value)是一个数组
JSON
键值对中的值(value
)可以是一个数组,比如:
{
"country":"China",
"population":"1.3billion",
"bigCity":["Peking","Shanghai","ShenZhen","HongKong"]
}
属性bigCity
的值有多个,放在一个数组里面。
上面例子里面,数组的每一个元素都是字符串。其实,数组的每一个元素还可以是另外一个json
对象。比如:
{
"class":"高三一班",
"studentNumber":70,
"score":[
{"name":"LiMing","score":128},
{"name":"ZhangHua","score":134},
{"name":"ShenLu","score":112}
]
}
上面的score
属性的值是一个数组,这个数组的每一个元素是一个json
对象。
数组的一些操作
读写元素:
var myJson = {
"country":"China",
"population":"1.3billion",
"bigCity":["Peking","Shanghai","ShenZhen","HongKong"]
}
console.log(myJson.bigCity[1]);//打印出Shanghai
myJson.bigCity[0] = "GuangZhou";//第一个元素被赋值为GuangZhou
遍历:
var myJson = {
"country":"China",
"population":"1.3billion",
"bigCity":["Peking","Shanghai","ShenZhen","HongKong"]
}
for(var i = 0;i < myJson.bigCity.length;i++) {
console.log(myJson.bigCity[i]); // 依次输出Peking,Shanghai,ShenZhen,HongKong
}
编程要求
本关的编程任务是补全右侧代码片段中Begin
至End
中间的代码,具体要求如下:
-
已知
myJson
的第三个属性的值是一个数组,参数a
是一个数字,要求将数组中前a
个元素(这些元素都是字符串类型)拼接起来,元素之间用,
隔开,返回拼接后的字符串; -
比如
a
为2
的时候,你需要返回js,java
。
var myJson = {
"category":"computer",
"detail":"programming",
"language":[
"js","java","php","python","c"
]
}
function mainJs(a) {
a = parseInt(a);
//请在此处编写代码
/********** Begin **********/
var s = "";
for (var i = 0; i < a; i++){
s += myJson.language[i] + ",";
}
return s.substring(0, s.length - 1);
/********** End **********/
}
JSON字符串
任务描述
本关任务:练习JSON
字符串和JavaScript
对象的相互转换。
相关知识
在前端和后台之间传递数据可以使用JSON
,但是实际上传递的是JSON
字符串,而JSON
对象是不可以直接进行传递的。
JSON字符串
JSON
字符串就是在JSON
对象两边套上'
形成的字符串,如:
var JSONObject = {"k1":"v1","k2":"v2"}; // JSON对象
var JSONString1 = '{"k1":"v1","k2":"v2"}'; // JSON字符串
上面的JSONSring1
就是JSON
字符串,可以直接从前端传到后台或者后台传到前端。 当JavaScript
收到从后台传来的JSON
字符串后,怎么把它变成JSON
对象方便处理呢?
JSON字符串到JavaScript对象
JSON.parse(a,b)
方法将JSON
字符串a
转换为JavaScript
对象。b
是一个可选的函数参数。
var JSONString1 = '{"k1":"v1","k2":"v2"}';
console.log(JSON.parse(JSONString1)); // 输出Object {k1: "v1", k2: "v2"}
函数参数b
按从里到外的顺序作用在对象的所有属性上,最后一个作用的是对象本身:
//对象的每一个属性的值加1
var text = '{ "key1":1, "key2":2, "key3":2.2}';
var obj = JSON.parse(text, function (key, value) {
if(key === '') // 当遇到对象本身时,不进行加1操作
return value;
return value+1; // 对属性值加1
});
console.log(obj); // 输出Object {key1: 2, key2: 3, key3: 3.2}
如上面所示,函数的参数有两个,其中key
表示属性的名字,value
表示属性的值,当遇到对象本身时,key
的值为''
,即空字符串。
JSON对象转换为JSON字符串
JSON.stringify(a,b,c)
,a
是待转换的JSON
对象,b
和c
为可选参数。
var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);//JSON对象转换为JSON字符串
参数b
为函数时,该函数按照从里到外的顺序处理JSON
对象的每一个属性,最后一个处理的是JSON
对象本身,处理完后再转为JSON
字符串:
//对象的所有属性值加1,再转为字符串
var JSONObject = {"k1":1,"k2":2.2};
var JSONString = JSON.stringify(JSONObject,function(k,v){
if(k === '')//处理到了JSON对象本身
return v;
return v+1;//所有的属性的值加1
});
console.log(JSONString);//输出{"k1":2,"k2":3.2}
参数b
还可以是数组,数组存储的是属性的名字,
var str = ["name":"Tom","age":16];
var obj1 = JSON.stringify(str);
var obj2 = JSON.stringify(str,null,4);
console.log(obj1); //输出{"name":"Tom","age":16}
console.log(obj2); //输出
// {
// "name": "Tom",
// "age": 16
// }
用来指定只转换哪些属性:
//转换对象中特定的属性
var JSONObject = {"k1":1,"k2":2.2,"k3":3};
var JSONString = JSON.stringify(JSONObject,["k1","k2"]);
console.log(JSONString);//输出{"k1":1,"k2":2.2}
这里简单介绍一下c
:
var str = ["name":"Tom","age":16];
var obj1 = JSON.stringify(str);
var obj2 = JSON.stringify(str,null,4);
console.log(obj1); //输出{"name":"Tom","age":16}
console.log(obj2); //输出
// {
// "name": "Tom",
// "age": 16
// }
参数c
:文本添加缩进、空格和换行符,如果 c
是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 c
大于 10
,则文本缩进 10
个空格。
编程要求
本关的编程任务是补全右侧代码片段中Begin
至End
中间的代码,具体要求如下:
-
先将
JSON
字符串JSONString
转换为JavaScript
对象JSONObject
; -
然后将
JSONObject
的key1
属性的值设置为mainJs()
函数的参数a
; -
最后将
JSONObject
转换为JSON
字符串,并返回该字符串;
var JSONString = '{"key1":"value1","key2":"value2"}';
function mainJs(a) {
//请在此处编写代码
/********** Begin **********/
var JSONObject = JSON.parse(JSONString);
JSONObject.key1 = a;
return JSON.stringify(JSONObject);
/********** End **********/
}