JSON 入门指南 想了解json的朋友可以看下

JSON 入门指南

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，常用于前后端数据传输。本文将为大家介绍 JSON 的基本语法以及常见的操作方法。

JSON 基本语法

JSON 的数据格式有两种：

• 对象 (Object)：一个对象是一个键(key)/值(value)对集合，用 {} 表示。
• 数组 (Array)：一个数组是一个有序的值(value)列表，用 [] 表示。

键(key)必须是字符串(string)类型，值(value)可以是字符串(string)、数字(number)、布尔值(boolean)、Null、对象(object)、数组(array)，甚至还可以是函数(function)。

以下是 JSON 基本语法的示例：

{
  "name": "Alice",
  "age": 25,
  "isMarried": false,
  "address": {
    "city": "Beijing",
    "country": "China"
  },
  "hobbies": ["reading", "traveling"]
}

JSON 常见操作方法

将字符串转换为 JSON 对象

当我们从后端接收到一个 JSON 格式的字符串，需要将其转换为 JSON 对象，可以使用 JSON.parse() 方法，如下所示：

const jsonStr = '{ "name": "Bob", "age": 30 }';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // 输出 { name: 'Bob', age: 30 }

将 JSON 对象转换为字符串

当我们需要将一个 JSON 对象转换为 JSON 格式的字符串，可以使用 JSON.stringify() 方法，如下所示：

const jsonObj = { name: 'Bob', age: 30 };
const jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr); // 输出 '{"name":"Bob","age":30}'

示例说明

示例一：发送带有 JSON 数据的 POST 请求

向后端发送 POST 请求，并携带 JSON 数据可以使用以下方法：

const data = { name: 'Tom', age: 25 };
fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

示例二：使用 JSON 数据初始化表格

通过遍历 JSON 数据，我们可以很容易地将数据初始化为表格，如下所示：

const data = [
  { name: 'Alice', age: 25, isMarried: false },
  { name: 'Bob', age: 30, isMarried: true },
  { name: 'Charlie', age: 20, isMarried: false },
];

const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');

const headerRow = document.createElement('tr');
headerRow.innerHTML = '<th>Name</th><th>Age</th><th>Is Married</th>';
thead.appendChild(headerRow);

data.forEach(item => {
  const tableRow = document.createElement('tr');
  const nameCell = document.createElement('td');
  nameCell.innerText = item.name;
  const ageCell = document.createElement('td');
  ageCell.innerText = item.age;
  const isMarriedCell = document.createElement('td');
  isMarriedCell.innerText = item.isMarried ? 'True' : 'False';
  tableRow.appendChild(nameCell);
  tableRow.appendChild(ageCell);
  tableRow.appendChild(isMarriedCell);
  tbody.appendChild(tableRow);
});
table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(table);

以上就是本文的内容，希望能帮助大家更好地了解和使用 JSON。