发布于 2026-01-06 1 阅读
0

JSON是谁?

JSON是谁?

 

JSON 是一种轻量级的文本数据格式,全称为JavaScript 对象表示法。这种格式在网络数据传输和本地存储中非常流行。此外,它还是一种独立的数据格式,可以被其他编程语言使用。

JSON 通常以两种不同的格式表示:JSON 字符串或 JSON 对象。JSON 对象与 JavaScript 对象非常相似,区别在于其键和值需要用双引号括起来。它们通常存储在.json扩展名为 .json 的文件中。

 

// phillip.json
{
  "name": "Phillip",
  "age": 29,
  "languages": ["JavaScript", "Python", "C++"],
  "appearance": {
    "hairColor": "black",
    "eyeColor": "Brown"
  }
}

JSON 对象也是有效的 JavaScript 对象!

 


网络响应中的 JSON

调用 API 时,通常会收到 JSON 格式的响应。让我们使用 fetch 从 phillip.json 文件中获取一些数据,并将其保存到同一目录下的 JavaScript 文件中。

 

// index.js
fetch("./phillip.json").then(response => console.log(response)) // response object

 

将接收到的数据输出到控制台会得到一个 HTTP 响应对象,而不是我们想要的 JSON 数据。要获取所需内容,我们需要使用 HTTP 响应对象提供的内置 `.json()` 方法。该方法会返回一个包含 JSON 数据的 Promise 对象。

 

// index.js
fetch("./phillip.json")
  .then(response => response.json())
  .then(data => console.log(data)) // phillip object!

 


使用 stringify() 和 parse() 将 JSON 存储在 localStorage 中

LocalStorage 是一个便捷的存储数据(键值对)的选项,尤其适合在应用关闭后仍需保留数据的情况。你可以把它想象成一个本地数据库。但需要注意的是:对象和数组不能存储在 localStorage 中

// Set an item and immediately get it back
fetch("./phillip.json")
  .then(response => response.json())
  .then(data => {
    localStorage.setItem("profile", data)
    localStorage.getItem("profile") // [object Object] - what is this???
});

 

这时, JSON.stringify()方法就派上用场了。这个方法可以将 JSON 对象转换为字符串,从而使我们能够将数据存储到 localStorage 中。

 

fetch("./phillip.json")
  .then(response => response.json())
  .then(data => {
    localStorage.setItem("profile", JSON.stringify(data))
    localStorage.getItem("profile") // '{"name":"Phillip","age":29,...'
});

 

让我们开始规划未来。最终,我们希望提取存储的 JSON 字符串并将其转换回 JSON 对象。JSON.parse ()可以帮助我们实现这一点。

 

...

const profile = localStorage.getItem("profile")
JSON.parse(profile) // {name: "Phillip", age: 29,...} - phillip object!

 


概括

以下是我们讨论过的要点列表。

  • 用于在网络中传输数据的文本数据格式。
  • 通常以对象或字符串的形式存在。
  • 可以借助 JSON 方法存储在 localStorage 中。
  • JSON.stringiy() 将 JSON 对象转换为字符串
  • JSON.parse() 将 JSON 字符串转换为对象

感谢阅读!!!😄😆 希望这篇文章能帮助你对 JSON 有更深入的了解!

文章来源:https://dev.to/shimphillip/who-is-json-13h6