js json格式化|极客笔记

js json格式化

什么是JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，也易于机器解析和生成。JSON采用键值对的方式组织数据，并以简洁的方式描述数据结构。它是一种通用的数据格式，很多编程语言都支持对JSON的解析和生成。

JSON由以下几种类型组成：

字符串（string）
数字（number）
布尔值（boolean）
数组（array）
对象（object）
null

JSON字符串的格式

JSON字符串由一对花括号 {} 包围，内部是多个键值对，每个键值对由冒号 : 分隔，不同键值对之间用逗号 , 分隔。键必须是字符串，值可以是字符串、数字、布尔值、数组、对象或null。以下是一个JSON字符串的示例：

{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "hobbies": ["reading", "drawing", "coding"],
  "address": {
    "province": "Beijing",
    "city": "Chaoyang"
  },
  "isMarried": null
}

在上面的示例中，name、age、isStudent、address、isMarried是键，"Alice"、25、true、["reading", "drawing", "coding"]、{"province": "Beijing", "city": "Chaoyang"}、null是对应的值。

JSON的解析和生成

在JavaScript中，可以使用JSON.parse()函数将JSON字符串解析为一个JavaScript对象，也可以使用JSON.stringify()函数将JavaScript对象转换为JSON字符串。

JSON的解析

const jsonString = `{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "hobbies": ["reading", "drawing", "coding"],
  "address": {
    "province": "Beijing",
    "city": "Chaoyang"
  },
  "isMarried": null
}`;

const json = JSON.parse(jsonString);
console.log(json);

运行结果：

{
  name: "Alice",
  age: 25,
  isStudent: true,
  hobbies: ["reading", "drawing", "coding"],
  address: {
    province: "Beijing",
    city: "Chaoyang"
  },
  isMarried: null
}

上面的代码将JSON字符串解析为一个JavaScript对象，并将其输出到控制台。可以看到，json变量中存储了解析后的对象。

JSON的生成

const data = {
  name: "Alice",
  age: 25,
  isStudent: true,
  hobbies: ["reading", "drawing", "coding"],
  address: {
    province: "Beijing",
    city: "Chaoyang"
  },
  isMarried: null
};

const jsonString = JSON.stringify(data);
console.log(jsonString);

运行结果：

{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "hobbies": ["reading", "drawing", "coding"],
  "address": {
    "province": "Beijing",
    "city": "Chaoyang"
  },
  "isMarried": null
}

上面的代码将JavaScript对象 data 转换为JSON字符串，并将其输出到控制台。可以看到，jsonString变量中存储了生成的JSON字符串。

JSON格式化输出

有时候，从网络或文件中获取到的JSON字符串可能是没有缩进和换行的，这样阅读和理解起来比较困难。我们可以使用JSON.stringify()的第三个参数来实现JSON的格式化输出。该参数是一个数字，表示缩进的空格数。

const data = {
  name: "Alice",
  age: 25,
  isStudent: true,
  hobbies: ["reading", "drawing", "coding"],
  address: {
    province: "Beijing",
    city: "Chaoyang"
  },
  isMarried: null
};

const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);

运行结果：

{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "hobbies": [
    "reading",
    "drawing",
    "coding"
  ],
  "address": {
    "province": "Beijing",
    "city": "Chaoyang"
  },
  "isMarried": null
}

上面的代码中，使用JSON.stringify()的第三个参数为2，表示缩进两个空格。输出的JSON字符串已经进行了格式化，每个键值对和数组元素都有了缩进和换行。