JSON格式基础

最新推荐文章于 2024-04-09 11:11:59 发布

路上捡来的博客

最新推荐文章于 2024-04-09 11:11:59 发布

阅读量1.1k

点赞数

分类专栏：软件开发

本文链接：https://blog.csdn.net/qq_42676335/article/details/115280584

版权

软件开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 什么是JSON？

JSON全称 (JavaScript Object Notation) ,是一种轻量级的数据交换格式。

因为JSON 本身就是参考JavaScript对象的规则定义的，其语法与JavaScript定义对象的语法相同。

简单的说JavaScript是JSON的主场啊，前端必会。

2. JSON的语法规则

1.数组（Array) 使用 []表示

//JSON格式中数组中的每个元素可以不相同
[0,null,false,['二','三','四'],'五']

2.对象(Object)用{}表示。

3.JSON中采用键值对的形式即键名：键值

键名是字符串格式。

键值的类型可以为字符串，数值，布尔值，null,对象以及数组。

//举例 下面是一个JSON格式
{
	"name":"憨八龟",
	"age":27,
	"sex":true,
     "hobbies":["篮球","足球","保龄球","高尔夫球"]

}

3.JSON格式和XML格式的区别

XML

优点：

1.格式统一，符合标准；

2.容易与其他系统进行远程交互，数据共享比较方便。

缺点：

1.XML文件庞大，文件格式复杂，传输占带宽。

2.服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护。

JSON

优点：

1.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小。

2.易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取。

缺点：

1.服务器端和客户端有不同的开发人员。它们必须协商对象的格式，这很容易造成错误。

4. JSON的转换

4.1 JSON.parse 字符串转对象

JSON的parse 方法可以将符和JSON规定的字符串转为对象

格式：JSON.parse(字符串名称，回调)

参数一：需要传入的字符串

参数二（可选）：参数二是一个函数，该函数有两个参数name和value，分别代表转化后键和值，当传入一个字符串后，JSON的每一组键值对都将调用此函数，该函数有返回值

通常由需要时我们会利用第二个参数，在转化为JSON对象的同时对数据做一些处理。

    const str = '{"name":"憨八龟","age":38}';
    
   // JSON.parse 把JSON格式的字符串转为对象
    const obj = JSON.parse(str, (name, value) => {
        
            if (name == "name") { //当属性名称为name时 修改值为憨八龟冲击波
                value = "憨八龟冲击波"
                
            } else if (name == "age") {
                value = 18
            }
        //value必须return回来
            return value
        });

4.2 JSON.stringify对象转字符串

**序列化：**将JavaScript值转为JSON字符串这一过程称为序列化，转化后的值可以通过JSON.parse（）转化回来

格式：JSON.stringify(value,replacer,space)

**value:**需要被转化的值，一般为对象或数组。如果是的话参数有name和value分别代表键和值。

replacer（可选）:值为函数或数组。

如果为函数：则每一组键（属性名）/值（属性值）都会调用此函数，该函数会返回值，如果某一项属性值为undefined,那这一项会被忽略。

如果为数组，只有数组中存在的名称才能够被转换，转化后的数组顺序按replacer数组参数的顺序。

**space（可选）：**该属性只是为了排版，方便阅读。通常是在JSON字符串中添加空白符或制表符等等

replacer参数为函数时：

4.2 参数为函数时.png
参数为数组时：

4.2参数为数组时.png

代码部分

<!--
 * @Author: 张
 * @Description:JSON对象转字符串 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const obj = {
            name: "憨八龟",
            age: 11,
            hello: "你是憨八龟",
            you: undefined
        }

        // 参数一传入的值 参数二 函数或数组 参数三 占位符仅仅为了方便阅读
        const jsonObjStr = JSON.stringify(obj, (name, value) => {
                if (name == "age") {
                    value = 38
                }
                return value
            }, "\t")
            // console.log(jsonObjStr)


        const arr = {
            a: 0,
            b: 1,
            c: 2,
            d: 3
        }

        const jsonArrStr = JSON.stringify(arr, ["c", "a", "b"], "\t")
        console.log(jsonArrStr)
    </script>
</body>

</html>

简单案例2：

   const str = '{"name":"憨八龟","age":38}';
        // JSON.parse 把JSON格式的字符串转为对象
        const obj = JSON.parse(str);
        console.log(obj);
        // JSON.stringify() 把对象转为字符串

        const jsonStr = JSON.stringify(obj)
        console.log(jsonStr);

图：

4.1JSON格式转换.png

5. JSON和XML之间的转换

很多人说JSON的诞生就是为了取代XML的，但是根据目前的情况下，两者各有各的发挥领域。所以我们还是需要学习一下两者之间的转换。

1.Vue转换需要安装和引用插件

npm install x2js

2.在入口函数中引入并挂载到原型

main入口文件

import x2js from 'x2js'
Vue.prototype.$x2js = new x2js()

3.使用方法

//xml转json
this.$x2js.xml2js()
//json转xml
this.$x2js.js2xml()

路上捡来的博客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSON格式基础

1. 什么是JSON？JSON全称 (JavaScript Object Notation) ,是一种轻量级的数据交换格式。因为JSON 本身就是参考JavaScript对象的规则定义的，其语法与JavaScript定义对象的语法相同。简单的说JavaScript是JSON的主场啊，前端必会。2. JSON的语法规则1.数组（Array) 使用 []表示//JSON格式中数组中的每个元素可以不相同[0,null,false,['二','三','四'],'五']2.对象(Object)用{}
复制链接

扫一扫