JavaScript 的JSON数据格式

目录

JSON对象

任务描述

相关知识

什么是JSON对象

JSON对象与Javascript对象的区别

在JavaScript中使用JSON对象

编程要求

JSON数组

任务描述

相关知识

JSON属性对应的值(value)是一个数组

数组的一些操作

编程要求

JSON字符串

任务描述

相关知识

JSON字符串

JSON字符串到JavaScript对象

JSON对象转换为JSON字符串

编程要求

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
    }

编程要求

本关的编程任务是补全右侧代码片段中BeginEnd中间的代码,具体要求如下:

  • 定义一个JSON对象JSONObject,它有三个属性:key1key2key3,它们的值分别是参数abc

  • 删除其中名字为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
}

编程要求

本关的编程任务是补全右侧代码片段中BeginEnd中间的代码,具体要求如下:

  • 已知myJson的第三个属性的值是一个数组,参数a是一个数字,要求将数组中前a个元素(这些元素都是字符串类型)拼接起来,元素之间用,隔开,返回拼接后的字符串;

  • 比如a2的时候,你需要返回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对象,bc为可选参数。  

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 个空格。

编程要求

本关的编程任务是补全右侧代码片段中BeginEnd中间的代码,具体要求如下:

  • 先将JSON字符串JSONString转换为JavaScript对象JSONObject

  • 然后将JSONObjectkey1属性的值设置为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 **********/
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值