External Brain

JSON in JS

4 min read

JSON = (Javascript Object Notation) data interchange format.

  • used for exchanging data between a server and web application
  • JSON files {key: value} or [value1, value2, value3]

JSON.stringfy() → Converts a JS object to a JSON string. JSON.parse() → Converts a JSON string to a JS object.

JSON = JavaScript Object Notation 一种轻量级的数据交换格式（data interchange format） 主要用于： - 服务器与网页（或应用）之间交换数据 - 储存和传输结构化数据

//JSON 数组（array）格式：用于储存列表型数据。
//注意：**字符串必须用双引号 “ “ 包裹**。
["Spongebob", "Patrick", "Squidward", "Sandy"]
//JSON 对象（object）格式：用于储存键值对数据。
//JSON 的 key 一定要加双引号 " "，值可以是字符串、数字、布尔值、数组或嵌套对象。
{
	"name": "Spongebob",
	"age": 30,
	"isEmployed": true,
	"hobbies": ["Jellyfishing", "karate"]
}
//JSON 数组 + 对象的组合：
//常用于表示“多条数据”的情况，例如用户列表、商品清单等。
[{
	"name": "Spongebob",
	"age": 30,
	"isEmployed": true,
},
{
	"name": "Patrick",
	"age": 27,
	"isEmployed": false,
},
{
	"name": "Squidward",
	"age": 56,
	"isEmployed": true,
},
{
	"name": "Sandy",
	"age": 10,
	"isEmployed": false,
}]

JSON 在 JavaScript 中的使用

// ======================== 示例 JSON 字符串 ========================
 
// JSON 数组
const jsonNames = `["Spongebob", "Patrick", "Squidward", "Sandy"]`;
 
// JSON 对象
const jsonPerson = `{
  "name": "Spongebob",
  "age": 30,
  "isEmployed": true,
  "hobbies": ["Jellyfishing", "karate"]
}`;
 
// JSON 数组 + 对象
const jsonPeople = `[{
  "name": "Spongebob",
  "age": 30,
  "isEmployed": true
},
{
  "name": "Patrick",
  "age": 27,
  "isEmployed": false
},
{
  "name": "Squidward",
  "age": 56,
  "isEmployed": true
},
{
  "name": "Sandy",
  "age": 10,
  "isEmployed": false
}]`;

在 JS 中需要用反引号 “ 或引号 ’…’ 包裹。 要想在代码中操作 JSON 数据，必须先把它转换为 JS 对象。

// ======================== JS ↔ JSON 转换 ========================
 
// 将 JS 对象转换为 JSON 字符串
const jsonString = JSON.stringify(people);
 
// 将 JSON 字符串解析（转换）为 JS 对象
const parsedData = JSON.parse(jsonPerson);
console.log(parsedData);
方法功能示例
JSON.stringify(obj)将 JS 对象转换为 JSON 字符串{name: “Bob”} → ’{“name”: “Bob”}‘
JSON.parse(jsonStr)将 JSON 字符串解析为 JS 对象’{“name”:“Bob”}’ → {name: “Bob”}

从外部 JSON 文件读取数据

fetch("person.json")                 //从本地或服务器请求一个 JSON 文件
  .then(response => response.json()) //解析响应为 JS 对象（自动执行 JSON.parse）
  .then(value => 
    value.forEach(value => console.log(value.age)) //遍历数组并输出每个人的 age
  )
  .catch(error => console.log(error)); //捕获并输出错误（如网络失败）
  • fetch() 是浏览器提供的 HTTP 请求 API，用于从外部获取数据。
  • 它返回一个 Promise 对象，因此使用 .then() 链式调用。
  • .json() 会自动将响应体解析为 JS 对象（就像自动执行 JSON.parse() 一样）。
  • .catch() 用于捕获请求或解析过程中的错误。

Graph View

Backlinks