前端 JavaScript 中 JSON.stringify() 的基本用法

本文主要是介绍前端 JavaScript 中 JSON.stringify() 的基本用法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

## 前言 在开发工作中，我们可能会碰到这样的需求：需要将某个对象内容弹窗显示或者保存在文件中，这时候如果你直接弹窗的话，很可能就是下面这样的： 因为很多接口它对参数有要求，比如只能是字符串之类的。 这时候，就需要我们将对象转换为字符串进行输出，`JSON.stringify()` 方法就可以帮我们实现将对象转为字符串的过程。 ## 方法描述 `JSON.stringify()` 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。 ## 语法 ```javascript JSON.stringify(value[, replacer [, space]]) ``` ### **参数说明**： - *value* 将要序列化成 一个 JSON 字符串的值。 - *replacer*(可选) - 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理； - 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中； - 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。 - *space(可选)* 指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。 - 如果省略space，则将生成返回值文本，而没有任何额外空格。 - 如果 space是一个数字，则返回值文本在每个级别缩进指定数目的空格。 如果 space 大于 10，则文本缩进 10 个空格。 - 如果 space是一个非空字符串（例如“\t”），则返回值文本在每个级别中缩进字符串中的字符。 - 如果 space 是长度大于 10个字符的字符串，则使用前 10 个字符。 ### 返回值 一个表示给定值的JSON字符串。 ### 常规用法 ```javascript console.log(JSON.stringify({name: "obj"})) // '{"name": "obj"}' ``` ## repalacer 参数 replacer 参数可以是一个函数或者一个数组。作为函数，它有两个参数，键（key）和值（value），它们都会被序列化。 在开始时, `replacer` 函数会被传入一个空字符串作为 `key` 值，代表着要被 `stringify` 的这个对象。随后每个对象或数组上的属性会被依次传入。 函数应当返回JSON字符串中的value, 如下所示: - 如果返回一个 Number，转换成相应的字符串作为属性值被添加入 JSON 字符串。 - 如果返回一个 String，该字符串作为属性值被添加入 JSON 字符串。 - 如果返回一个 Boolean， "true" 或者 "false" 作为属性值被添加入 JSON 字符串。 - 如果返回任何其他对象，该对象递归地序列化成 JSON 字符串，对每个属性调用 replacer 方法。除非该对象是一个函数，这种情况将不会被序列化成 JSON 字符串。 - 如果返回 undefined，该属性值不会在 JSON 字符串中输出。 有以下对象： ```javascript const data = [ { name: "person1", sex: 0, age: 18, isStudent: true }, { name: "person2", sex: 1, age: 25, isStudent: false }, { name: "person3", sex: 0, age: 15, isStudent: true } ] ``` 接下来我们针对这个对象做各种需求实现。 ### 只输出姓名和性别 ```javascript const res = JSON.stringify(data, ["name", "sex"]) console.log(res); // `[{"name":"person1","sex":0},{"name":"person2","sex":1},{"name":"person3","sex":0}]` ``` > `JSON.stringify()` 提供了分离出自己需要的那部分数据。 ### 将性别转为中文字符 ```javascript const res = JSON.stringify(data, (key, value) => { if (key == 'sex') { return ["女", '男'][value]; } return value; }) console.log(res); // `[{"name":"person1","sex":"女","age":18,"isStudent":true},{"name":"person2","sex":"男","age":25,"isStudent":false},{"name":"person3","sex":"女","age":15,"isStudent":true}]` ``` > `JSON.stringify()` 提供了回调函数做一个映射关系。 ## space 参数 ```javascript const res = JSON.stringify(data, ["name", "sex"],4) console.log(res); ``` 输出如下：  这里使用了 4 个空格作为层级缩进。 > 注意：使用 “\t” 得到的结果和使用 4 个空格得到的结果看起来很像，但实际不是一回事。 ## 总结 `JSON.stringify()` 方法可以通过参数控制输出的数据和格式，灵活应用它会大大提高我们的工作效率。 > 学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！ > > 我是〖编程三昧〗的作者 **隐逸王**，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！ > > 你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！ > > 知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！ 

这篇关于前端 JavaScript 中 JSON.stringify() 的基本用法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！