JSON.stringify() 入门：将数据序列化为 JSON 字符串 (json.stringify()和json.parse)

JSON.stringify() 函数用于将 JavaScript 值转换为 JSON 字符串。JSON (JavaScript 对象符号) 是一种轻量级的数据格式，易于在应用程序之间传输和存储数据。

语法

JSON.stringify(value, replacer, space)

其中： value： 要序列化的 JavaScript 值。它可以是对象、数组、字符串、数字或布尔值。 replacer： 可选参数，是一个函数或数组，用于自定义序列化过程。 space： 可选参数，指定生成的 JSON 字符串中的缩进量。

示例 1：序列化简单值

const value = {name: "John",age: 30
};const json= JSON.stringify(value);console.log(json); // {"name":"John","age":30}

示例 2：使用 replacer 函数

replacer 函数可以在序列化过程中替换或删除属性。

const value = {name: "John",age: 30,password: "secret"
};const replacer = (key, value) => {if (key === "password") {return undefined;} else {return value;}
};const json = JSON.stringify(value, replacer);console.log(json); // {"name":"John","age":30}

示例 3：使用空间选项

space 选项可以使生成的 JSON 字符串更容易阅读。

const value = {name: "John",age: 30,address: {street: "Main Street",city: "Anytown"}
};const json = JSON.stringify(value, null, 2);console.log(json);
/
{"name": "John","age": 30,"address": {"street": "Main Street","city": "Anytown"}
}
/

JSON.parse()

JSON.parse() 函数用于将 JSON 字符串解析为 JavaScript 值。

JSON.parse() 的语法如下：

JSON.parse(tExt, reviver)

其中： text： 要解析的 JSON 字符串。 reviver： 可选参数，是一个函数，用于自定义解析过程。

示例：将 JSON 字符串解析为 JavaScript 对象：

const json = '{"name":"John","age":30}';const obj = JSON.parse(json);console.log(obj); // {name: "John", age: 30}

结论

JSON.stringify() 和 JSON.parse() 是将 JavaScript 数据存储和传输为 JSON 字符串的强大工具。通过使用 replacer 和 space 选项，您可以定制序列化和解析过程以满足您的特定需求。

---

关于JSON.parse(JSON.stringfy(object))进行深拷贝的坑~

((object))就是利用 将js对象序列化（JSON字符串），再使用来反序列化（还原）js对象；序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输。 关于使用时需要注意以下几点： 1、如果object里面有 时间对象 ，则后再的结果，时间将只是字符串的形式。 而不是时间对象； 2、如果object里有 RegExp、Error对象 ，则序列化的结果将只得到空对象； 3、如果obj里有 函数、undefined、symbol ，则序列化的结果会把函数或 undefined丢失； 4、如果obj里有 NaN、Infinity和-Infinity ，则序列化的结果会变成null 5、()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有 构造函数 生成的， 则使用((obj))深拷贝后，会丢弃对象的 constructor ； 6、如果对象中存在 循环引用 的情况也无法正确实现深拷贝；

手写JSON.parse和JSON.stringify

理解了有限状态机，编写各类解析器变得简单，关键在于设计状态转换的逻辑。 手写有两大实现路径，第一种是入门级，相对容易；第二种则是利用状态机解析字符流，这需要了解一些编译原理，否则理解起来可能较为困难。 初级版本的直接使用eval函数实现，但要注意在JSON字符串前后加上括号，否则会被误认为是代码块并报错。 高级版本的主要利用有限状态机进行分词，然后根据分词数据构建JSON对象。 分词阶段的状态设计相对复杂，可以从简单的状态开始，逐步增加难度以完善代码。 以下版本仅考虑了一些简单场景，特别是嵌套数组，直接将其视为一个token，不支持内部嵌套数组，以便于理解。 将分词数组拼接成JSON，主要使用栈来缓存正在处理的对象。 在处理内部嵌套的引用类型值时，需要记住父对象的key（子对象处理完毕后再赋值给父对象的key）。 这里我在读取到key时，会在当前对象上存储key值，注意需要使用symbol类型添加属性，否则可能会覆盖对象中同名属性。 在设置完对应key的属性值后，再删除自己添加的这个symbol属性。 也可以通过一个栈来存储每次读取到的key，每次设置值时出栈即为当前要操作的key。 以下是测试效果的简版，旨在展示核心原理。 它未处理许多异常情况，主要利用递归方法处理值中的对象和数组，其他基本数据类型则直接转换为对应的toString形式拼接。

一文彻底弄懂JSON.parse()与JSON.stringify()

深入理解 () 和 () 的功能和用法，对于对象与JSON字符串的交互至关重要。 这两个方法在转换和序列化过程中起着核心作用。

(): 从JSON字符串到对象

() 是将JSON字符串解析为JavaScript对象的关键工具。 最常见的用法是将字符串转换为包含数据的对象。 然而，在特殊情况下，如计算员工高温费，可通过reviver函数实现属性过滤或删除。 需要注意的是，如果输入的JSON格式有误，它会抛出SyntaxError异常。

(): 从对象到JSON字符串

与之相对，() 负责将JavaScript对象转换为JSON字符串。 使用时，可以指定特定属性进行序列化，或者处理数组和非数组对象的转换规则。 遇到循环引用或BigInt类型时，会引发TypeError异常。 MDN文档提供了详细的行为规范，包括值的序列化规则和异常处理。

其他应用场景

关于vue中JSON.parse(JSON.stringify(...))使用深拷贝问题

在Vue开发中，((...)) 的组合使用常常被用来实现深拷贝操作，这里我们来详细探讨一下。 首先，() 和 () 分别有其独特的功能：- () 是将一个JSON格式的字符串解析成JavaScript对象，例如：原始字符串: var str = {name:huahua,age:22};解析操作: (str);这会得到一个对象: var obj = {name:hua,age: 26};- 而 () 则是将JavaScript对象转换成JSON格式的字符串。 当你直接对一个对象执行 ()，得到的字符串其实是一个浅拷贝，因为字符串只是引用了原始对象的地址。 为了实现深拷贝，即创建一个全新的对象并复制所有属性，可以先将对象转为字符串，再解析回对象，这样就创建了独立的新对象，即：深拷贝示例: = (())这样做的效果是，即使原始对象（）有嵌套的对象或数组，深拷贝也会为这些内容创建新的副本，确保在修改vueData时不会影响到原始对象（）。 总的来说，这是一种在Vue中实现对象深度复制的有效方法。

前端 JavaScript 对象与 json 字符串进行转换

JavaScript对象可通过使用()函数转换为JSON字符串。 比如，我们有一个JavaScript对象：转换结果如下：JSON字符串转对象JSON字符串能够通过()函数转换回JavaScript对象。 例如，我们有一个JSON字符串：转换结果如下：需要注意的是，JSON字符串必须符合JSON规范，否则会引发异常。 例如，以下JSON字符串中，属性名不应使用单引号：当使用()方法时，将抛出异常“Uncaught SyntaxError”。

---

---

相关标签： 和json.parse、 JSON.stringify、 json.stringify、 将数据序列化为、 字符串、 入门、 JSON、

上一篇：JSONstringify实用指南高效转换JavaScript

下一篇：JSONstringify的艺术将JavaScript对象转换