javascript之json知识讲解

谈起JSON大家都应该不陌生，说白点JSON就是一种数据格式。

JSON只能表示以下三种类型的值，即简单值，对象，数组。

其中简单值包括String，Boolean，Number，null，并不包含undefined。

JSON对象有两个方法，parse 和 stringify。

 

序列化选项

JSON.stringify()序列化javascript对象，接收三个参数，第一个参数接收要序列化的对象，

第二个参数接收一个数组，使用了数组后结果中将只包含数组中列出的属性，如果不做处理，传入null即可。

第二个参数还可以接收一个function作为参数，该函数的提供两个参数，第一个参数为序列化的javascript对象的键值，第二个是键对应的值。

第三个参数是控制序列化的缩进和空白符，也可以定义其他格式的缩进符（如果缩进参数是一个字符串而非数值，则这个字符串将在 JSON 字符串中被用作缩进字符）。

var obj = {
      a: 1,
      b: {
        c: 2
      },
      d: undefined,
      arr: [3,4],
      fn: function () {
      }
    }
console.log(JSON.stringify(obj))
// {"a":1,"b":{"c":2},"arr":[3,4]}

注意：上面的js对象序列化输出的结果不包含function类型的数据，也不包含值为undefined的字段。

再来看一个例子：

var obj = {
      a: 1,
      b: {
        c: 2
      },
      d: undefined,
      arr: [3,4],
      fn: function () {
      }
    }
    console.log(JSON.stringify(obj, ['a', 'c']))
// {"a":1}

注意：上面这个例子只加了第二个参数，但结果并没有包含c这个属性，因为序列化只能过滤当前对象的属性。

当第二个参数接收的是function类型时：

var obj = {
      a: 1,
      b: {
        c: 2,
      },
      d: undefined,
      arr: [3,4],
      fn: function () {
      }
    }
    console.log(JSON.stringify(obj, function (key, value) {
      if (typeof value == 'number') {
        value++;
      }
      return value;
    }))

// {"a":2,"b":{"c":3},"arr":[4,5]}

这个例子将要序列化的对象，类型为number的数据统一加上1。

接下来看下第三个参数的作用，当值为null, undefined, NaN, true，false，零，或者小于0的数，跟没有传递这个参数输出一致。

第三个参数是每个级别缩进的空格数，传入2时的输出：

{
  "a": 2,
  "b": {
    "c": 3
  },
  "arr": [
    4,
    5
  ]
}

当传入字符串 ++ 时：(字符串会被当成缩进符号)

{
++"a": 2,
++"b": {
++++"c": 3
++},
++"arr": [
++++4,
++++5
++]
}

还有一种情况是我们可以为任何对象添加toJSON方法：

看下面这个例子：

var obj = {
      firstName: 'zhang',
      lastName: 'san',
      toJSON: function () {
        return this.firstName + ' ' + this.lastName;
      }
    }
    var str = JSON.stringify(obj);
    console.log(str)

// "zhang san"

可以把toJSON看做是函数过滤器，以此执行顺序为 toJSON => 第二个参数过滤 => 第三个参数。

 

解析选项

JSON.parse()方法也可以接收另一个参数，该参数是一个函数（还原函数），函数有两个参数-键值（key, value）。

var obj = {
      firstName: 'zhang',
      lastName: 'san',
      date: new Date()
    }
    var str = JSON.stringify(obj);
    console.log(str)
    var obj2 = JSON.parse(str, function (key, value){
      if (key == 'date') {
        return new Date(value)
      }
      return value;
    });
    console.log(obj2);

// {"firstName":"zhang","lastName":"san","date":"2019-05-24T08:13:26.417Z"}

// {firstName: "zhang", lastName: "san", date: Fri May 24 2019 16:13:26 GMT+0800 (中国标准时间)}