JSON详细教程

JSON

语法

JSON 语法的类型：

• **简单值：**字符串、数值、布尔值和 null 可以在 JSON 中出现，特殊值 undefined 不可以。
• **对象：**第一种复杂数据类型，对象表示有序键/值对。每个值可以是简单值，也可以是复杂值。
• **数组：**第二种复杂数据类型，数组表示可以通过数值索引访问的值的有序列表。数组值可以是任意类型。

对象

JavaScript 的对象：

let xkcMsg = {
  name: "小卡车",
  age: 20,
};

JSON 表示的对象：

{
    "name": "小卡车",
    "age": 20
}

数组

JavaScript 的数组：

let hobby = ["LOL"];

JSON 表示的数组：

["LOL"]

对象和数组混合使用：

[
    {
        "id": 1,
        "name": "小卡车",
        "age": 20,
        "hobby": ["LOL"]
    },
    {
        "id": 2,
        "name": "xkc",
        "age": 20,
        "hobby": ["看书"]
    }
]

JSON 对象

JSON 对象有两个方法：stringify() 和 parse()。分别可以将 JavaScript 序列化为 JSON 字符串；将 JSON 解析为原生 JavaScript 值。

let xkcMsg = {
  name: "小卡车",
  age: 20,
};
let jsonText = JSON.stringify(xkcMsg);
console.log(jsonText); // {"name":"小卡车","age":20}
let json = JSON.parse(jsonText);
console.log(json); // { name: '小卡车', age: 20 }

序列化选项

JSON.stringify() 方法除了要序列化的对象，还可以接收两个参数。第一个参数是过滤器，可以是数组或者函数；第二个参数是用于缩进结果 JOSN 字符串的选项。

过滤结果

如果第二个参数是数组，则执行 JSON.stringify() 方法会返回包含该数组中各个元素的对象属性。

let xkcMsg2 = {
  name: "小卡车",
  age: 20,
  hobby: ["LOL"],
};
let jsonText2 = JSON.stringify(xkcMsg2, ["name", "hobby"]);
console.log(jsonText2); // {"name":"小卡车","hobby":["LOL"]}

如果第二个参数是一个函数。则提供的函数接收两个参数：属性名和属性值。

let xkcMsg3 = {
  name: "xkc",
  age: 18,
  hobby: [],
};
let jsonText3 = JSON.stringify(xkcMsg3, (key, value) => {
  switch (key) {
    case "name":
      return "小卡车";
    case "age":
      return 20;
    case "hobby":
      return value.concat("LOL");
    default:
      return value;
  }
});
console.log(jsonText3); // {"name":"小卡车","age":20,"hobby":["LOL"]}

如果对象中有属性的值为 undefined 的话，该属性会被忽略。

let xkcMsg4 = {
  name: "小卡车",
  age: 20,
  hobby: undefined,
};
let jsonText4 = JSON.stringify(xkcMsg4);
console.log(jsonText4); // {"name":"小卡车","age":20}

第三个参数是控制缩进和空格。如果参数是数值。最大缩进值是 10 ，大于 10 会自动设置为 10。

let xkcMsg5 = {
  name: "小卡车",
  age: 20,
  hobby: undefined,
};
let jsonText5 = JSON.stringify(xkcMsg5, null, 4);
console.log(jsonText5);
/*
{
    "name": "小卡车",
    "age": 20
}
*/

第三个参数如果是字符串，则使用该字符串来进行缩进。

let xkcMsg6 = {
  name: "小卡车",
  age: 20,
  hobby: undefined,
};
let jsonText6 = JSON.stringify(xkcMsg6, null, "--");
console.log(jsonText6);
/*
{
--"name": "小卡车",
--"age": 20
}
*/

toJSON() 方法

需要在 JSON.stringify() 之上自定义 JSON 序列化。可以在被序列化对象中添加 toJSON() 方法。

toJSON() 可以与过滤函数一起使用。

把对象传入 JSON.stringify() 时执行的步骤：

1. 调用 toJSON() 方法获取实际的值，否则返回默认的序列化。
2. 如果提供第二个参数，则传入过滤函数的值便是第 1 步骤中返回的值。
3. 第 2 步骤返回的每个值进行相应的序列化。
4. 如果提供第三个参数，则使用第三个参数进行缩进。

let xkcMsg1 = {
  name: "xkc",
  age: 20,
  hobby: ["听歌", "LOL"],
  test: undefined,
  toJSON: function () {
    console.log("xkcMsg1");
    return this.hobby;
  },
};
let jsonText1 = JSON.stringify(
  xkcMsg1,
  (key, value) => {
    switch (value) {
      case "LOL":
        return "打" + value;
      default:
        return value;
    }
  },
  2
);
console.log(jsonText1);
/*
xkcMsg1
[
  "听歌",
  "打LOL"
]
*/

解析选项

JSON.parse() 方法可以接收一个额外的参数，函数会针对每个键值都调用一次，为区别于传给 JSON.stringify() 的起过滤作用的替代函数，被成为还原函数。

如果还原函数中返回 undefined 则删除相应的键。

let xkcMsg7 = {
  name: "小卡车",
  age: 20,
  hobby: ["LOL", "听歌"],
};
let jsonText7 = JSON.stringify(xkcMsg7);
let xkcMsg7New = JSON.parse(jsonText7, (key, value) => {
  if (value === "LOL") {
    return "打" + value ;
  } else if (key === "age") {
    return undefined;
  } else {
    return value;
  }
});
console.log(xkcMsg7New);
/*
{ name: '小卡车', hobby: [ '打LOL', '听歌' ] }
*/