JSON.stringify() 的隐藏力量：深度剖析其非凡功能

2024-01-26 11:35:43

整理 JSON 数据，让代码焕发新机

在处理复杂的 JSON 数据时，代码的可读性至关重要。JSON.stringify() 函数不仅能将 JavaScript 对象转换为 JSON 字符串，还能通过其第三个参数来格式化输出，使数据结构一目了然。使用 null 和空格数量（如 2）作为参数，可以生成易于阅读的格式化 JSON 字符串。

const messyJSON = {
  "name": "John",
  "age": 30,
  "address": {
    "street": "Main Street",
    "city": "New York",
    "state": "NY"
  },
  "hobbies": ["coding", "basketball", "reading"]
};

const formattedJSON = JSON.stringify(messyJSON, null, 2);
console.log(formattedJSON);

深度复制对象，轻松告别复制烦恼

深度复制对象是开发中常见的需求。JSON.stringify() 结合 JSON.parse() 可以实现这一功能，创建一个与原始对象完全独立的新对象。

const originalObject = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    city: "New York",
    state: "NY"
  }
};

const clonedObject = JSON.parse(JSON.stringify(originalObject));

跨窗口通信，让数据畅通无阻

在不同窗口或 iframe 之间传递数据时，JSON.stringify() 可以将对象转换为字符串，通过 window.postMessage() 发送，然后在接收窗口使用 JSON.parse() 解析。

const parentWindow = window.open("about:blank");
parentWindow.postMessage(JSON.stringify({ message: "Hello from the parent window" }), "*");

数据存储与传输，安全高效一触即达

在本地存储或网络传输数据时，JSON.stringify() 将对象转换为字符串，节省空间并简化解析过程。

const data = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    city: "New York",
    state: "NY"
  }
};

const JSONString = JSON.stringify(data);
localStorage.setItem("userData", JSONString);

轻松实现克隆，无需再为对象复制苦恼

创建对象的副本而不影响原对象，可以使用 JSON.stringify() 和 JSON.parse() 组合来实现深度克隆。

const originalObject = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    city: "New York",
    state: "NY"
  }
};

const clonedObject = JSON.parse(JSON.stringify(originalObject));