前端 JavaScript 中 JSON.stringify() 的基本用法
前言
在开发工作中,我们可能会碰到这样的需求:需要将某个对象内容弹窗显示或者保存在文件中,这时候如果你直接弹窗的话,很可能就是下面这样的:
因为很多接口它对参数有要求,比如只能是字符串之类的。
这时候,就需要我们将对象转换为字符串进行输出,JSON.stringify()
方法就可以帮我们实现将对象转为字符串的过程。
方法描述
JSON.stringify()
方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性。
语法
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字符串。
常规用法
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 字符串中输出。
有以下对象:
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
}
]
接下来我们针对这个对象做各种需求实现。
只输出姓名和性别
const res = JSON.stringify(data, ["name", "sex"])
console.log(res);
// `[{"name":"person1","sex":0},{"name":"person2","sex":1},{"name":"person3","sex":0}]`
JSON.stringify()
提供了分离出自己需要的那部分数据。
将性别转为中文字符
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 参数
const res = JSON.stringify(data, ["name", "sex"],4)
console.log(res);
输出如下:
这里使用了 4 个空格作为层级缩进。
注意:使用 “\t” 得到的结果和使用 4 个空格得到的结果看起来很像,但实际不是一回事。
总结
JSON.stringify()
方法可以通过参数控制输出的数据和格式,灵活应用它会大大提高我们的工作效率。
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!
知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!