JSON.stringify() 应用场景：数据存储、通信和更多 (json.stringify)

简介

JSON.stringify() 是 JavaScript 中一个强大的函数，用于将 JavaScript 对象或值转换为 JSON（JavaScript 对象表示法）字符串。它是一种广泛使用的格式，用于在网络应用程序和 API 之间传输和存储数据。

应用场景

1. 数据存储

JSON.stringify() 通常用于将 JavaScript 对象存储在数据库或本地存储中。例如，您可以将用户数据对象转换为 JSON 字符串，然后将其存储在 localStorage 中。

const userData = {id: 1,name: "John Doe",email: "johndoe@example.com"
};localStorage.setItem("user", JSON.stringify(userData));

2. 通信

JSON.stringify() 在网络应用程序中广泛用于数据通信。它用于将数据从客户端发送到服务器端，反之亦然。例如，您可以将表单数据转换为 JSON 字符串，然后使用 AJAX 请求将其发送到服务器端。

const formData = {name: "John Doe",email: "johndoe@example.com"
};const xhr = new XMLHttpRequest();
xhr.open("POST", "/submit-form");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(formData));

3. 传输复杂数据结构

JSON.stringify() 支持将复杂的 JavaScript 数据结构（如数组、对象和嵌套对象）转换为 JSON 字符串。这使得在应用程序之间传输此类数据变得容易。

const dataStructure = {users: [{id: 1,name: "John Doe",email: "johndoe@example.com"},{id: 2,
name: "Jane Doe",email: "janedoe@example.com"}]
};const jsonString = JSON.stringify(dataStructure);

4. 数据格式化

JSON.stringify() 可用于格式化 JavaScript 数据。这在调试和日志记录等情况下很有用。

const userData = {id: 1,name: "John Doe",email: "johndoe@example.com"
};console.log(JSON.stringify(userData, null, 2));

此代码将以缩进和换行格式化 JSON 字符串，使其更易于阅读。

5. 与其他语言集成

JSON 是一种独立于语言的格式，可以轻松地与其他编程语言集成。JSON.stringify() 可用于将 JavaScript 数据转换为 JSON 字符串，以便与这些语言共享。

// Python 代码
import jsonjs_object = {"id": 1, "name": "John Doe"}
json_string = json.dumps(js_object)

参数

JSON.stringify() 函数接受两个可选参数：

• replacer ：一个可选的函数，用于自定义对象如何转换为 JSON。
• space ：一个可选的数字，指定 JSON 字符串中缩进空格的数量。如果为 0，则不会缩进。

示例

// 将对象转换为缩进格式的 JSON 字符串
const userData = {id: 1,name: "John Doe",email: "johndoe@example.com"
};const jsonString = JSON.stringify(userData, null, 2);
console.log(jsonString);

// 自定义对象转换规则
const replacer = (key, value) => {if (typeof value === "function") {return value.toString();} else {return value;}
};const obj = {id: 1,name: "John Doe",email: "johndoe@example.com",func: () => {}
};const jsonString = JSON.stringify(obj, replacer);
console.log(jsonString);

结论

JSON.stringify() 是 JavaScript 中一个强大的工具，用于将 JavaScript 数据转换为 JSON 字符串。它在各种应用场景中发挥着至关重要的作用，包括数据存储、通信、传输复杂数据结构、数据格式化以及与其他语言集成。通过了解和使用 JSON.stringify()，您可以更有效地管理和共享数据。

---

JSON. stringify()的问题？

后台输出的是[object Object]，看不到具体的内容，此时只需在前端页面上利用()将该传输数据转换成与json文件中格式一致就可以解决问题。

代码如下：

(date) //data

注() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串。

扩展资料：

[object Object]进一步获得值的方法：

1、对象中有数组，数组中有对象的情况

data={total:3,rows:[{name:老四,},{name:老六,电

提取“老四”： var da=[0];

2、对象中有数组的情况

data={rows:[2,4,5,6,8]}

提取数组：var da=;或者 var da=data[rows];

强大的JSON.stringify，你真的会使用吗?

强大的 方法在开发中扮演着重要角色，但你是否真正掌握了它的用法呢？本文将带你深入理解其三个参数以及九个特性。 首先， 不仅仅是一个简单的转换工具。 MDN 描述它能将 JavaScript 对象或值转化为 JSON 字符串，通过replacer 函数可以定制化序列化过程。 replacer 函数接收键和值，可以过滤、替换或选择性地保留对象属性。 replacer 参数允许我们对对象进行更精细的控制。 例如，它可以过滤数组中的值，或者在转换过程中忽略某些特殊值，如 undefined、函数、Symbol。 此外，toJSON 方法的实现也能影响序列化结果。 在实际应用中，要注意 对象、循环引用、BigInt 和可枚举属性的处理方式。 尽管它能用于 localStorage 的数据存储和属性过滤，但深拷贝时需谨慎，因为它可能无法处理循环引用的问题。 利用 的灵活性，你可以实现对象的 map 函数、删除属性、进行简单的对象判断，甚至数组对象去重。 然而，由于 JSON 字符串化的特性，某些情况下可能需要额外处理，比如处理数组中的对象顺序问题。 最后，小包提醒大家，作为前端开发者，熟练掌握 是至关重要的。 别忘了关注我的知乎号和公众号“小包学前端”，共同进步，迎接更美好的未来。 让我们一起期待疫情早日结束，世界恢复和平安宁。

【面试题】JSON.stringify()妙用，你真的知道吗？

【面试题】()的实用技巧，你真正掌握了吗？

()是JavaScript中一个强大的工具，用于将JavaScript对象转换为易于阅读的JSON字符串，便于存储和前后端数据交换。它接受三个参数：

例如，当存储数组或对象到本地存储时，()可以避免将复杂类型存储为[object,object]，提高数据的可读性。 在向后端传递参数时，通过转换为字符串形式，可以确保数据格式一致。

此外，()还能用于数组去重、深拷贝和对象属性顺序控制。 通过设置replacer参数，可以实现按特定属性顺序输出，或仅保留部分属性。 例如，判断数组或对象是否相等时，()的第二个参数就派上用场了。

要美化输出，可以传入一个数字作为第三个参数，如(obj, null, 2)会添加2个空格的缩进。 这样，JSON字符串看起来更加整洁。

总之，了解并熟练运用()的这些技巧，能让你在开发过程中更得心应手。

深入理解JSON.stringify()

在实际开发中有着丰富的应用场景，尽管你可能已经熟悉了它的基本用法，但其实它隐藏着更多实用特性。 这些特性往往在不经意间发挥作用，值得深入理解。 如果你觉得这个话题略显枯燥，让我们通过几个有趣的场景来探索。 例如，深拷贝时，的deepCopy功能（如`((obj/arr))`）在处理引用类型数据时至关重要，它能确保新生成的对象与原对象在内存上独立，互不影响。 在服务端数据存储中，也十分关键。 比如，存储的canvas模板数据和Vue-amap的SVG路径信息，这时就需要序列化存储。 另外，localStorage和sessionStorage存储的数据必须先转化为字符串，否则可能出现存储失效的问题。 当从服务端接口获取Canvas或SVG数据时，能帮助解析这些数据，并在和vue-amap等组件中正确渲染。 此外，还能过滤数据和格式化输出，包括设置缩进，使其更易于阅读。 不过，遇到自引用对象时，会抛出“cyclic object value”错误，这时需要特殊处理，比如使用库。 对于具有相同属性但顺序不同的对象，的结果可能出乎意料，这需要额外注意。 在实际操作中，可能会遇到诸如数据库存储后属性消失、axios请求参数undefined消失等问题，这可能是由于replacer函数的过滤、属性设置或数据类型的特殊性导致的。 与localStorage的配合使用时，确保数据为字符串是关键。 通过上述内容，你应该对有了更深入的认识。 在遇到问题时，记得检查replacer、对象属性和数据类型，找出问题的根源。 加入我们的技术讨论小组，一起交流学习，提升前端开发技能吧！

JSON.stringify() 的使用

复制粘贴一下 ()三个参数的含义：

返回值：返回包含 JSON 文本的字符串。 从上面的参数说明中可以看到，第二个参数可以是一个函数或者数组，这给了我们很大的发挥空间。

stringify() 的第一个和第三个参数都好理解，所以下面主要说的是第二个参数。

当第二个参数为数组时，可作为条件筛选使用。 例如有如下对象：

如果我们只需要name属性，则可以这样：

这个特性只对对象的根属性生效，例如：

即使第二层上也有name属性，但在筛选时并不会选中。 当对一个数组进行转换时，会筛选数组第一层的每个值，例如：

基本上数组的用法就是如此了。

函数的发挥空间是很大的，理所当然地用法也就比较多了。 当第二个参数为函数时，stringify() 会给函数传递两个参数，参数值为每一个成员的键和值。 但跟数组参数不同的是，函数会处理所有层级上的每一个成员。 例如：

所有符合条件的内容都被修改了（注意『小红』是『小刚』的下一层）。 正是因为函数的这个特性，我们可以很方便地实现一些可能比较麻烦的功能。 比如上面的例子，如果不使用 stringify() 方法而想要修改所有层级上的age属性的值，就需要需要进行深循环。

上面的例子中，如果想要复制一份arr的数据，通常是进行深拷贝，但其实也可以使用stringify()，只需要配合 () 即可：

stringify() 不能处理值为函数的成员，当某个成员的值为函数时，在转换过程中会被自动排除，例如：

同样的，() 方法是不能处理函数格式的字符串的。

---

---

相关标签： 通信和更多、 数据存储、 JSON.stringify、 应用场景、 json.stringify、

上一篇：JSONstringify与JSONparseJSON数据序列化与

下一篇：JSONstringify最佳实践避免常见陷阱和优化