JSON数据格式的基本使用-JSON序列化

短命女 2023-10-02 19:47 40阅读 0赞

#### 文章目录 ####

*   *  1.JSON的由来
     *  2.JSON基本语法
     *  3. JSON序列化
     *  4.Stringify方法的补充
     *   *  4.1 replace参数
         *  4.2 space参数
     *  5.parse方法的补充

### 1.JSON的由来 ###

在目前的开发中，JSON是一种**非常重要的数据格式**，它并**不是编程语言**，而是一种**可以在服务器和客户端之间传输的数据格式。**

**JSON的全称是JavaScript Object Notation（JavaScript对象符号）：**

*  JSON是由**Douglas Crockford构想和设计的一种轻量级资料交换格式**，算是**JavaScript的一个子集**；
 *  但是虽然**JSON被提出来的时候是主要应用JavaScript中**，但是目前已经**独立于编程语言**，**可以在各个编程语言中使用**；
 *  很多编程语言都实现了将**JSON转成对应模型的方式**；

**其他的传输格式：**

*  **XML**：在早期的网络传输中主要是使用XML来进行数据交换的，但是这种格式在解析、传输等各方面都弱于JSON，所以目前已经很  
    少在被使用了；
 *  **Protobuf**：另外一个在网络传输中目前已经越来越多使用的传输格式是protobuf，但是直到2021年的3.x版本才支持JavaScript，所  
    以目前在前端使用的较少；

**目前JSON被使用的场景也越来越多：**

*  网络数据的传输JSON数据；
 *  项目的某些配置文件；
 *  非关系型数据库（NoSQL）将json作为存储格式；

### 2.JSON基本语法 ###

**JSON的顶层支持三种类型的值：**

*  **简单值**：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
 *  **对象值**：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
 *  **数组值**：数组的值可以是简单值、对象值、数组值；

{
        
      "name": "coder",
      "age": 18,
      "friend": {
        
        "name": "kobe"
      }
    }

### 3. JSON序列化 ###

**某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串，这样方便对其进行处理：**

*  比如我们希望将一个对象保存到localStorage中；
 *  但是如果我们直接存放一个对象，这个对象会被转化成 \[object Object\] 格式的字符串，并不是我们想要的结果；

**JSON序列化方法**

*  **stringify方法**：将JavaScript类型转成对应的JSON字符串；
 *  **parse方法**：解析JSON字符串，转回对应的JavaScript类型；

**那么上面的代码我们可以通过如下的方法来使用：**

### 4.Stringify方法的补充 ###

#### 4.1 replace参数 ####

**JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串：**

*  如果指定了一个 **replacer 函数**，则可以选择性地替换值；
 *      var obj = {
              
          name: "coder",
          age: 18,
          friend: {
              
            name: "kobe",
          },
        };
        
        // 将字符串name值变为change再转为字符串
        var objJSONString = JSON.stringify(obj, function (key, value) {
              
          if (key === "name") {
              
            return "change";
          }
          return value;
        });
        console.log(objJSONString); // {"name":"change","age":18,"friend":{"name":"change"}}
 *  如果指定的 **replacer 是数组**，则可选择性地仅包含数组指定的属性；
 *      var obj = {
              
          name: "coder",
          age: 18,
          friend: {
              
            name: "kobe",
          },
        };
        
        // 只将数组中的属性转为字符串
        var objJSONString = JSON.stringify(obj, ["age"]);
        console.log(objJSONString); // {"age":18}

#### 4.2 space参数 ####

space参数表示以多少个空格进行换行, 使JSON字符串方便阅读

var obj = {
        
      name: "coder",
      age: 18,
      friend: {
        
        name: "kobe",
      },
    };
    
    // 只将数组中的属性转为字符串
    var objJSONString = JSON.stringify(obj, null, 2);
    console.log(objJSONString);

**如果对象本身包含toJSON方法，那么会直接使用toJSON方法的结果：**

### 5.parse方法的补充 ###

**JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。**

*  提供可选的 **reviver 函数**用以在返回之前对所得到的对象执行变换(操作)。

**JSON的方法可以帮我们实现对象的深拷贝：**

*  但是目前我们还没有了解什么是对象的拷贝、浅拷贝、深拷贝的概念；
 *  我们会在JavaScript高级中学习；