一文搞懂轻量级的数据交换格式——JSON

JSON 的基本概念

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写。它独立于语言，但与 JavaScript 对象表示法相似。

JSON 实例

• 简单的 JSON 字符串实例:

"{\"name\": \"小张\", \"age\": 25, \"city\": \"San Francisco\"}"

• 包含数组的 JSON 字符串实例:

"{\"name\": \"小张\", \"age\": 30, \"hobbies\": [\"reading\", \"traveling\", \"photography\"]}"

• 嵌套的 JSON 字符串实例:

"{\"name\": \"小王\", \"age\": 35, \"address\": {\"street\": \"123 Main St\", \"city\": \"Seattle\", \"zip\": \"98101\"}}"

• 包含 null 值的 JSON 字符串实例:

"{\"name\": \"小李\", \"age\": null, \"city\": \"Los Angeles\"}"

• 包含嵌套数组和对象的 JSON 字符串实例:

"{\"name\": \"小赵\", \"age\": 40, \"friends\": [{\"name\": \"Friend 1\", \"age\": 38}, {\"name\": \"Friend 2\", \"age\": 42}]}"

JSON 格式化后为 JavaScript 对象

在 JavaScript 中，JSON 格式化后的数据结构与 JavaScript 对象非常相似。以下是一些示例：

1. 简单的 JSON 对象:

{
  "name": "小张",
  "age": 25,
  "city": "San Francisco"
}

2. 包含数组的 JSON 对象:

{
  "name": "大张",
  "age": 30,
  "hobbies": ["reading", "traveling", "photography"]
}

3. 嵌套的 JSON 对象:

{
  "name": "小赵",
  "age": 35,
  "address": {
    "street": "123 Main St",
    "city": "Seattle",
    "zip": "98101"
  }
}

4. 包含 null 值的 JSON 对象:

{
  "name": "小王",
  "age": null,
  "city": "Los Angeles"
}

5. 包含嵌套数组和对象的 JSON 对象:

{
  "name": "小李",
  "age": 40,
  "friends": [
    {
      "name": "Friend 1",
      "age": 38
    },
    {
      "name": "Friend 2",
      "age": 42
    }
  ]
}

JSON 语法规则

• 数据为键/值对
• 数据由逗号分隔
• 大括号保存对象
• 方括号保存数组

JSON 数据示例

• 字符串值:

{
  "name": "小张"
}

• 数字值:

{
  "age": 25
}

• 布尔值:

{
  "isStudent": true
}

• Null 值:

{
  "address": null
}

• 数组值:

{
  "hobbies": ["reading", "traveling", "photography"]
}

• 嵌套对象值:

{
  "address": {
    "street": "123 Main St",
    "city": "Seattle"
  }
}

JSON 字符串转换为 JavaScript 对象

在 JavaScript 中，可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。

示例代码

1. 使用 JSON.parse() 方法:

const jsonString = '{"name": "小张", "age": 25}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject);

注意JSON.parse()不允许用逗号结尾下面，写法是错误的：

// both will throw a SyntaxError
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse('{"foo" : 1, }');

2. 使用 try-catch 处理异常:

const jsonString = '{"name": "小张", "age": 25';
try {
  const jsonObject = JSON.parse(jsonString);
  console.log(jsonObject);
} catch (error) {
  console.error('Invalid JSON string:', error);
}

3. 处理数组类型的 JSON 字符串:

const jsonArrayString = '["apple", "banana", "cherry"]';
const jsonArray = JSON.parse(jsonArrayString);
console.log(jsonArray);

4. 处理嵌套对象类型的 JSON 字符串:

const nestedJsonString = '{"name": "小张", "address": {"city": "San Francisco"}}';
const nestedJsonObject = JSON.parse(nestedJsonString);
console.log(nestedJsonObject);