JSON.stringify怎么用-创新互联
这篇文章将为大家详细讲解有关JSON.stringify怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!为您提供做网站、成都做网站、成都网页设计、微信小程序、成都网站开发、成都网站制作、成都软件开发、app开发定制是成都本地专业的网站建设和网站设计公司,等你一起来见证!基础
JSON.stringify
方法接收一个变量,并将它转换成 JSON 表示形式。
const boy = { name: 'John', age: 23 };JSON.stringify(boy);// {"name":"John","age":23}
JSON 就是纯字符串,它本质上是 JS 的一个子集,所以并不是所有的 JS 对象都能转换为 JSON:
const boy = { name: 'John', age: 23, hobbies: new Map([[0, 'coding'], [1, 'earn money']])}JSON.stringify(boy)// {"name":"John","age":23,"hobbies":{}}
上面的例子中 Map 对象就会被忽略并转换为普通对象。而如果属性是函数的话则这个属性就会被忽略,感兴趣的同学可以试下。
第二个参数
JSON.stringify
可以接收第二个参数,可以称为replacer
替换器。
你可以传入一个字符串数组,这个数组中具有的属性才会被转换,就像一个白名单。
const boy = { name: 'John', age: 23}JSON.stringify(boy, ['name'])// {"name":"John"}
我们可以利用这个特性,只转换需要转换的属性,过滤掉如很长的数组、错误对象等。
这个replacer
参数还可以接收一个函数。这个函数会遍历整个对象,并将键和值传入,让你决定该如何替换它们。
const boy = { name: 'John', age: 23, hobbies: new Map([[0, 'coding'], [1, 'earn money']])}JSON.stringify(boy, (key, value) => { if (value instanceof Map) { return [...value.values()] } return value})// {"name":"John","age":23,"hobbies":["coding","earn money"]}
而如果你返回了undefined
(返回null
不行),就将这个属性移除了:
JSON.stringify(boy, (key, value) => { if (typeof value === 'string') { return undefined } return value})// {"age":23,"hobbies":{}}
第三个参数
第三个参数space
控制了转换后的 JSON 串的间距。
如果参数是数字,则以该数字个数的空格进行缩进:
JSON.stringify(boy, null, 2)// {// "name": "John",// "age": 23,// "hobbies": {}// }
而如果参数是字符串,则以该字符串进行缩进:
JSON.stringify(boy, null, '--')// {// --"name": "John",// --"age": 23,// --"hobbies": {}// }
toJSON 方法
如果我们要转换的对象具有一个toJSON
方法,那么就可以定制自己被序列化的过程。您可以从方法中返回一个新值,而不是序列化该对象,并且此值将被序列化,而不是原始对象。
const boy = { name: 'John', age: 23, hobbies: new Map([[0, 'coding'], [1, 'earn money']]), toJSON() { return { name: `${this.name} (${this.age})`, favorite: this.hobbies.get(0) } }}JSON.stringify(boy)// {"name":"John (23)","favorite":"coding"}
关于“JSON.stringify怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前文章:JSON.stringify怎么用-创新互联
网页地址:http://myzitong.com/article/icess.html