一文彻底搞懂JSON数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了一文彻底搞懂JSON数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是JSON，为什么需要JSON，JSON的3种形式，JSON常用的方法等

1、JSON是什么？

TIP
JSON指的是全称是：javascript对象表示法

JSON是Ajax发送和接收数据的一种格式

JSON是一种轻量级的数据交互格式，其为字符串类型(面试题会考到)

JSON是一种语法，用来序列化对象、数组、数值、字符串、布尔值和null，但不能是undefined

2、序列化和反序列化

为什么要序列化？

目的是为了对象可以跨平台存储和网络传输，而网络传输的方式就是IO，而IO支持的数据格式就是字节数组

单方面将对象转成字节数组还不够，传输过去后还要约定一种规则将字节数组转化为对象

通俗讲就像将一栋房子从一个地方运到另一个地方，序列化就是将房子拆成一块块放到车上，再另一个地方根据图纸拼装起来就是返序列化

3、为什么需要JSON

TIP
前后端通信的过程种需要交换数据，如果将前端JS的数据（比数组和对象等）直接传给后端，后端是无法解析的

因为后端语言比如java、php、node.js、python等都有各自的语法

前端是JS语法

因此对于前后端而言，对于数据的写法各自是不同的，因此互不相认

这时候就需要一种双方都认识的数据格式进行中转，而JSON这种数据格式因表现优秀，目前90%以上都用JSON进行中转

js（前端）--------> JSON--------->java/python等

4、JSON的3种形式

简单值形式、对象形式、数组形式
JSON数据文件的后缀名是：.json
JSON文件中不能写任何注释

4.1、JSON简单值写法

JSON的简单值形式对应着JS中的基础数据类型：数字、字符串、布尔值、null

特别注意：不能是undefined类型，不然会报错

JSON中的字符串必须要用双引号，单引号也会报错

以下每条代码演示都是一个单独JSON文件，以便演示文件里面能写的数据类型

"我是字符串"

true

null

json数据,web前端-网络请求,json,javascript,前端

4.2 、JSON对象形式

JSON的对象对应的是JS中的对象，主要区别如下

JSON中对象的属性名必须用双引号，属性值如果是字符串也必须要用双引号

JSON对象的属性值并不能是undefined

以下是text.json文件

{
    "username":"柳学生",
    "password":123456,
    "sex":"male",
    "bobby":["轮滑","羽毛球"],
    "family":{
        "father":"Liu",
        "monder":"美女"
    }
}

json数据,web前端-网络请求,json,javascript,前端
以下JS变量中保存的是字符串符合JSON格式的有

特别注意：json本身就是一个字符串，有一定格式要求的字符串

let strJson1 = '{"name":1,"age":32}'; // 正确的JSON字符串
let strJson2 = `{"name":1,"age":32}`; // 正确的JSON字符串
let strJson3 = "{'name':1,'age':32}"; // 错误的JSON字符串
let strJson4 = `{'name':1,'age':32}`; // 错误的JSON字符串

4.3、JSON数组形式

JSON的数组形式对应着js中的数组，但也有以下区别

数组中字符串必须用双引号

数组中成员有对象类型，则需要满足JSON对象格式要求

不支持undefined类型

[
  {
    id: 1,
    username: "学生1",
    phone: "123456",
    email: "123@163.com",
  },
  {
    id: 2,
    username: "学生2",
    phone: "156984",
    email: "666@163.com",
  },
  {
    id: 3,
    username: "星辰大海",
    phone: "18966",
    email: "888@163.com",
  },
]

5、JSON的常用方法

方法	说明
JSON.stringify()	可以将js基本数据类型、对象或者数组转化为JSON格式的字符串
JSON.parse()	可以将JSON格式的字符串转化为js对应的数据类型

注：通常用来转化对象和数组

JSON.parse()方法将JSON数据格式转化为对应的数据类型

<script>
        let num = JSON.parse('1');
        console.log(num,typeof num);

        let boo = JSON.parse('true');
        console.log(boo,typeof boo);

        let n = JSON.parse('null');
        console.log(n,typeof n);

        let arr = JSON.parse('[null,123,"我是json",{"username":"张三"}]');
        console.log(arr,typeof arr);

        let obj = JSON.parse('{"username":"李四","password":"123456@163.com"}');
        console.log(obj,typeof obj);

    </script>

json数据,web前端-网络请求,json,javascript,前端

JSON.stringify()方法将其它数据类型转化为JSON数据格式

        let number = JSON.stringify(123);
        console.log(number,typeof number);

        let n2 = JSON.stringify(null);
        console.log(n2,typeof n2);

        let boolear = JSON.stringify(true);
        console.log(boolear,typeof boolear);

        let arr2 = JSON.stringify(["好玩","好看",123]);
        console.log(arr2,typeof arr2);

        let obj2 = JSON.stringify({hobby:'轮滑'});
        console.log(obj2,typeof obj2);