JSON的基本使用

1.json的由来

json是一种重要的数据格式，不是编程语言，一种可以在服务器与客户端之间传输的数据格式。

全称是JavaScript Object Notation（JavaScript对象符号）

• json是由Douglas Crockford构想和设计的一种轻量级资料交换格式，算是Javascript的一个子集
• 虽然json提出来的时候是主要应用于JavaScript中，但是目前已经独立于编程语言，可以在各个编程语言中使用

其他的传输格式

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

2.json基本语法

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

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

不能写注释、没有undefined类型

3.json序列化与反序列化

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

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

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

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

var obj = {
        name: "zzz",
        age: 18,
        height: 1.7,
        friend:{
          name: "sss"
        }
      }
      console.log(obj.name, obj.age)
      //将obj对象进行序列化
      var objJSONString = JSON.stringify(obj)
      console.log(objJSONString)

      //将对象存储到localStorage
      localStorage.setItem("info", objJSONString)

      var item = localStorage.getItem("info")

      //将字符串转回到对象（反序列化）
      var newObj = JSON.parse(item)
      console.log(newObj);

4.stringify参数

参数replace中可以传入一个函数，可以修改值

 如果指定了一个 replacer 函数 ，则可以 选择性地替换值 ；

 如果 指定的 replacer 是数组 ，则可 选择性地仅包含数组指定的属性 ；

var objJSONString = JSON.stringify(obj, function() {
        if(key === "name"){
            return "qqq"
        }
        return value
    })

参数space中传入数字，代表空格的数量

var objJSONString = JSON.stringify(obj, function() {
        if(key === "name"){
            return "qqq"
        }
        return value
    }, 4)

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

var obj = {
        name: "zzz",
        age: 18,
        height: 1.7,
        friend:{
          name: "sss"
        },
        toJSON:function() {
          return "qqq"
        }
      }
      const objString = JSON.stringify(obj)
      console.log(objString);

5.parse参数

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