什么是JSON？JSON的介绍和用法

峰兄兄
94 阅读4分钟

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情

在工作中经常用到JSON，但是一直是套用之前的代码模仿着写，从没仔细了解过这个熟悉的陌生人，今天刚好有时间，稍微了解一下JSON的来龙去脉。

一、简介

说白了JSON就是一种存储和传输数据的格式或者叫形式，听起来和XML的介绍一样，两者确实是用来完成同样的任务。下面是百度百科对JSON的介绍：

JSON（JavaScript Object Notation, JS对象标记）是一种轻量级的数据交换格式。它基于 ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON 文件的文件类型是 .json

JSON 文本的 MIME 类型是 application/json

二、JSON vs XML

JSON 与 XML 的相同之处：

  • JSON 和 XML 数据都是 "自我描述" ，都易于理解。
  • JSON 和 XML 数据都有层次的结构
  • JSON 和 XML 数据可以被大多数编程语言使用

JSON 与 XML 的不同之处：

  • JSON 不需要结束标签
  • JSON 更加简短
  • JSON 读写速度更快
  • JSON 可以使用数组

针对 AJAX 应用，JSON 比 XML 数据加载更快，而且更简单。XML需要XML解析器进行解析，而JSON可以使用标准的JS函数进行解析。

三、语法

两种结构形式：

（一）对象形式

1.形式为： {key : value, key : value, key : value, …} key必须是字符串，value可以是字符串、数字、布尔、数组、对象或null，这些JSON的合法数据类型。

比如： {"name" : "峰兄兄", "age" : 28}

2.JSON对象可以通过 jsonObj.key 或者 jsonObj[“key”] 来获取或修改value值

如果要删除某个属性，直接在前面加上delete即可，比如： delete jsonObj.key

3.遍历

可以通过for-in循环遍历所有的key，比如：

for(key in jsonObj1) {    
    console.log(key);
}

（二）数组形式

1.形式为： [value, value, value, …] value和上面一样。

比如： 数组中存对象 [{"name" : "峰兄兄", "age" : 28}, {"name" : "海大富", "age" : 58}]

2.JSON数组可以通过索引获取其中的元素： jsonArray[index]

四、JSON字符串和对象的转换

通常在前端和后端处理时都会使用对象，但是在传输数据时一般又是字符串的形式，所以需要在对象和字符串间进行转换。

（一）字符串转对象

1.JSON.parse(text[, reviver])

let jsonStr = '{"name" : "韦小宝", "age" : 28}';
let jsonObj2 = JSON.parse(jsonStr);

2.第2个参数是可选参数，是一个函数，设置之后会对对象中的每个成员调用该函数，比如：

let jsonObj3 = JSON.parse(jsonStr, function(key, value) {
    if (key == "age") {
        value = value + 2;
    }
    return value;
});
console.log(jsonObj3);

结果为：

3.注意receiver函数必须要写返回值，如果不return的话，最终就是undefined。

（二）对象或数组转字符串

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

2.value就是要转换成字符串的对象或数组。后面两个参数都是可选参数。

3.replacer和上面的receiver的作用相同，不同之处在于他可能是一个函数也可能是一个数组。当它是函数时，和上面的receiver用法相同；当它是数组时，作用是只有在数组中的属性才会被转为字符串，如下：

let jsonObj1 =  {"name" : "峰兄兄", "age" : 28};
let jsonStr3 = JSON.stringify(jsonObj1, ["age", "sex"]);
console.log(jsonStr3);

因为用作过滤的数组中没有“name”，所以转为字符串后结果为：

4.space的作用是给文本添加缩进、空格、换行符或指定字符串，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，最多为10个。space 也可以使用非数字，如：\n。

let jsonArray1 = [{"name" : "峰兄兄", "age" : 28}, {"name" : "海大富", "age" : 58}];
let jsonStr2_1 = JSON.stringify(jsonArray1);console.log(jsonStr2_1);
let jsonStr2_2 = JSON.stringify(jsonArray1, null, 10);
console.log(jsonStr2_2);

结果为：

space使用非数字时，比如换行符或者文字，效果如下：

let jsonStr2_3 = JSON.stringify(jsonObj1, null, "\n");
console.log(jsonStr2_3);
let jsonStr2_4 = JSON.stringify(jsonObj1, null, "帅");
console.log(jsonStr2_4);

五、读取JSON文件

创建一个test.json的JSON文件

[    {"名字":"欧阳锋", "称号":"西毒"},    {"名字":"黄药师", "称号":"东邪"},    {"名字":"洪七公", "称号":"北丐"},    {"名字":"段智兴", "称号":"南帝"}]

（一）原生js

let request = new XMLHttpRequest();
request.open("get", "test.json"); 
request.send(null);
request.onload = function () {
    if (request.status == 200) {
         let json = JSON.parse(request.responseText);
         for(let i=0; i<json.length; i++) {
             console.log(json[i]);
         }
    }}

（二）jQuery

$.ajax({
    url: "test.json",
    type: "GET",
    dataType: "json", //返回数据格式为json
    success: function(data) {
         for(let i=0; i<data.length; i++){
            console.log(data[i]);
        }
    }
})

也可以直接用jQuery中封装好的读取json的函数：

$.getJSON ("test.json", function (data) {
    for(let i=0; i<data.length; i++) {
        console.log(data[i]);
    }
});

上面三种读取json文件的结果是相同的，都为：

------------------------------------------------------------------------------------------------

以上就是关于JSON的介绍和简单的用法示例，如果有所帮助的话，就点个赞鼓励一下呗~

未经许可，禁止转载哦~

avatar
文章
阅读
粉丝