title: JSON
categories: Javascript
tag:

  • json
    date: 2021-12-03 10:35:34

JSON 数据存储

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 作为存储格式；

JSON 基本语法

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

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

JSON 序列化

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

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

在 ES5 中引用了 JSON 全局对象，该对象有两个常用的方法：

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

JSON 序列化实现深拷贝

  1. const obj = {
  2.   name: 'why',
  3.   age: '18',
  4.   friend: { name: 'kkk' }
  5. }
  6. const objString = JSON.stringify(obj)
  7. const info = JSON.parse(objString)
  8. console.log(info)
  9. console.log(info === obj) //false
  11. info.friend.name = 'dh'
  12. console.log(obj.friend.name) //kkk 还是之前那一个
  13. console.log(info.friend.name) //dh

注意：这种方法它对函数是无能为力的

  • 创建出来的 info 中是没有 foo 函数的，这是因为 stringify 并不会对函数进行处理；
  • 我们后续会讲解如何编写深拷贝的工具函数，那么这样就可以对函数的拷贝进行处理了；