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

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类型；

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

var obj = {
  name: "coder",
  age: 18,
  friend: {
    name: "kobe",
  },
};

// 1.将obj对象进行序列化
var objJSONString = JSON.stringify(obj);
console.log(objJSONString); // {"name":"coder","age":18,"friend":{"name":"kobe"}}

// 2.将对象储存到localStorage
localStorage.setItem("info", objJSONString);
// 可以通过getItem获取到存储对象的字符串
var item = localStorage.getItem("info");
console.log(item); // {"name":"coder","age":18,"friend":{"name":"kobe"}}

// 3.将字符串转回到对象(反序列化)
var newObj = JSON.parse(item);
console.log(newObj); // {name: 'coder', age: 18, friend: {…}}

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方法的结果：

var obj = {
  name: "coder",
  age: 18,
  friend: {
    name: "kobe",
  },
  toJSON: function() {
    return "change"
  }
};

// 只将数组中的属性转为字符串
var objJSONString = JSON.stringify(obj, null, 2);
console.log(objJSONString); // change

5.parse方法的补充

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

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

var obj = {
  name: "coder",
  age: 18,
};

var objJSONString = JSON.stringify(obj);

// 转回对象时,并转换某些只,例如将age+2
var newObj = JSON.parse(objJSONString, function (key, value) {
  if (key === "age") {
    return value + 2;
  }
  return value;
});
console.log(newObj); // {name: 'coder', age: 20}

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

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