JSON

一、概述

JSON全称JavaScript Object Notation，是一种轻量级的数据交互格式

JSON是一门独立的语言。用于存储和传输数据的格式，通常用于服务器向网页传输数据

JSON采用了JavaScript的语法，意味着JavaScript中处理JSON数据不需任何特殊的API或工具包

注意：

• JSON和JavaScript是两门不同的语言
• JSON的格式仅仅是一个文本，可以被任何编程语言读取以及作为数据格式传递

Json是js对象的字符串表示法，它使用文本表示一个js对象的信息，本质是一个字符串。

 在js语言中，一切都是对象。因此，任何支持的类型都可以通过Json表示，例如字符串、数字、对象、数组等

 

例子：

 {
            "people": [{
                "name": "张三",
                "sxe": "nv"
            }, {
                "name": "李四",
                "sxe": "nv"
            }]
        }

 

二、Json的3种形式

1.简单值形式

JSON 的简单值形式就对应着 JS 中的基础数据类型

    数字、字符串、布尔值、null

 

注意事项

    ① JSON 中没有 undefined 值

    ② JSON 中的字符串必须使用双引号

    ③ JSON 中是不能注释的

例子：

<script>
        const xhr = new XMLHttpRequest();

        xhr.onreadystatechange = () => {
            if (xhr.readyState != 4) return

            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                console.log(xhr.responseText);
                console.log(typeof xhr.responseText);
            }
        };

        xhr.open('GET', './plain.json');

        xhr.send(null);
</script>

plain.json：

"str"

 

2.对象形式

JSON 的对象形式就对应着 JS 中的对象

 

注意事项：

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

    JSON 中只要涉及到字符串，就必须使用双引号

    不支持 undefined

例子：

  <script>
        const xhr = new XMLHttpRequest();

        xhr.onreadystatechange = () => {
            if (xhr.readyState != 4) return

            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                console.log(xhr.responseText);
                console.log(typeof xhr.responseText);
            }
        };

        xhr.open('GET', './obj.json');

        xhr.send(null);
</script>

obj.json:

{
    "name": "张三",
    "age": 18,
    "hobby": ["足球", "乒乓球"],
    "family": {
        "father": "张老大",
        "mother": "李四"
    }
}

 

3.数组形式

JSON 的数组形式就对应着 JS 中的数组

 

注意事项:

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

    JSON 中只要涉及到字符串，就必须使用双引号

    不支持 undefined

例子：

 <script>
        const xhr = new XMLHttpRequest();

        xhr.onreadystatechange = () => {
            if (xhr.readyState != 4) return;

            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                console.log(xhr.responseText);
                console.log(typeof xhr.responseText);
            }
        };


        xhr.open('GET', './arr.json', true);

        xhr.send(null);
</script>

arr.json:

[
  {
    "id": 1,
    "username": "张三",
    "comment": "666"
  },
  {
    "id": 2,
    "username": "李四",
    "comment": "999 6翻了"
  }
]

 

三、Json解析方法

描述：Json是js对象的字符串表现形式，本质是一种轻量级的数据交换格式。

 <script>
        var obj = '{"name":"张三","age":18}';
        console.log(obj);
        console.log(typeof obj);
</script>

注意：

        (1)JSON键值对是用来保存js对象的一种方式，和js对象的写法大同小异，键值对组合中键名写在前面并用双引号""包裹，使用冒号分隔

        (2)JSON字符串统一采用单引号，而JSON字符串内容中如果出现引号则为双引号。

方法：

 (1)JSON.parse(后台传输过来的数据)

反序列化方法(有时候也被称为JSON数据解析，简称JSON解析)

作用：能够把JSON字符串，转换成JS数据类型(js对象)

<script>
        //JSON解析过程：把JSON字符串转换成js对象。
        var JSONstr2 = '{"stuInfo":[{"name":"beixi"},{"name":"zhangsan"}],"feature":[18,20]}';

        var JsonObj = JSON.parse(JSONstr2);

        console.log(JsonObj.stuInfo[0].name);
        console.log(typeof JsonObj);
</script>

(2)JSON.stringify(要向后台传输的数据)

序列化方法(有时候也被称为JSON数据封装或数据加密)

作用：能够把JS数据类型转换成JSON字符串

<script>
        //JSON封装过程:把js对象转换称JSON字符串
        var obj = {
            pname: 'beixi',
            page: 18,
            pHeight: '70kg'
        }

        //转换
        var JsonStr = JSON.stringify(obj);

        console.log(JsonStr);
        console.log(typeof JsonStr);
</script>

说明：

• JSON在实践开发过程中通常会在两个地方被用到：一是发送请求的时候，会将数据封装成为一个JSON字符串再发送；二是在接收请求来的数据时，使用JSON来将数据信息转换为实践可用的数据类型

例子：

storage.json:

const storage = window.localStorage;

// 设置
const set = (key, value) => {
    // {
    //   username: 'alex'
    // }
    storage.setItem(key, JSON.stringify(value));
};

// 获取
const get = key => {
    // 'alex'
    // {
    //   "username": "alex"
    // }
    return JSON.parse(storage.getItem(key));
};

// 删除
const remove = key => {
    storage.removeItem(key);
};

// 清空
const clear = () => {
    storage.clear();
};

export {set, get, remove, clear };

 <script style="module">
        // 3.使用 JSON.parse() 和 JSON.stringify() 封装 localStorage 
        import {get,
            set,
            remove,
            clear
        } from './storage.js';

        set('username', 'alex');
        console.log(get('username'));

        set('zs', {
            name: '张三',
            age: 18
        });

        console.log(get('zs'));
        // remove('username');
        // clear();
</script>