JSON.stringify() 和 JSON.parse()

我们知道，JSON.stringify() 和 JSON.parse() 是一对处置惩罚JSON数据的方法，前者是将JSON对象序列化为字符串，而后者是将JSON字符串解析为JSON对象。
但是你有较为深入地去了解过它们吗？它们分别可以传入几个参数以及每个参数对应的作用是什么呢？
一、JSON.stringify()

JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串，是用于调试的最常见函数。

1. const user = {
2.     "name": "Mark Lee",
3.     "age":26
4. }
6. console.log(JSON.stringify(user));
8. // "{"name":"Mark Lee","age":26}"

复制代码

JSON.stringify 根本语法

1. JSON.stringify(value[, replacer [, space]])

复制代码

它可以传入三个参数，
参数1 是需要字符串化的对象，
参数2 是用于指定对象序列化过程中需要被处置惩罚的属性，
参数3 是用于指定输出字符串的缩进格式。
后两个参数是可选的，而我们最常用的就是只传一个参数。
第二个参数（数组）

stringify 函数也可以有第二个参数。它是要在控制台中打印的对象的键数组。看起来很简单？
让我们更深入一点。我们有一个对象 product 并且我们想知道 product 的 name 属性值。
当我们将其打印出来：它会输出下面的效果。

1. {"id":"0001","type":"donut","name":"Cake","ppu":0.55,"batters":{"batter":[{"id":"1001","type":"Regular"},{"id":"1002","type":"Chocolate"},{"id":"1003","type":"Blueberry"},{"id":"1004","type":"Devil’s Food"}]},"topping":[{"id":"5001","type":"None"},{"id":"5002","type":"Glazed"},{"id":"5005","type":"Sugar"},{"id":"5007","type":"Powdered Sugar"},{"id":"5006","type":"Chocolate with Sprinkles"},{"id":"5003","type":"Chocolate"},{"id":"5004","type":"Maple"}]}

复制代码

在日志中很难找到 name 键，由于控制台上显示了很多没用的信息。当对象变大时，查找属性的难度增加。stringify 函数的第二个参数这时就有用了。让我们重写代码并查看效果

1. JSON.stringify(product,['name'])
2. // "{"name":"Cake"}"

复制代码

第二个参数（函数）

我们还可以传入函数作为第二个参数。它根据函数中写入的逻辑来盘算每个键值对。如果返回 undefined，则不会打印键值对。

1. const user = {
2.     "name": "Mark Lee",
3.     "age":26
4. }
5. JSON.stringify(user,(key,value)=>{
6.     if(typeof value === 'string'){
7.         return undefined;
8.     }
9.     return value;
10. })
11. // 结果
12. // "{"age":26}"

复制代码

只有 age 被打印出来，由于函数判断 typeOf 为 String 的值返回 undefined。
第三个参数为数字

第三个参数控制最后一个字符串的间距。如果参数是一个数字，则字符串化中的每个级别都将缩进这个数量的空格字符。

1. const user = {
2.     "name": "Mark Lee",
3.     "age":26
4. }
5. JSON.stringify(user,null,2);
6. //"{
7. //  "name": "Mark Lee",
8. //  "age": 26
9. //}"

复制代码

 第三个参数为字符串

如果第三个参数是 string，那么将使用它来代替上面显示的空格字符。

1. JSON.stringify(user,null,'**')
3. //"{
4. //**"name": "Mark Lee",
5. //**"age": 26
6. //}"

复制代码

二、JSON.parse()

ok!!   了解完了JSON.stringify()，我们再来看看它的逆操作函数JSON.parse()。

1. JSON.parse(text[, reviver])

复制代码

它可以传入两个参数，参数1 是需要被解析的字符串，参数2 是用于修改解析天生的原始值。后一个参数是可选的，而我们最常用的就是只传一个参数。
1. 参数一（text）

该参数必须是符合JSON规范的字符串，如果是其他范例，则会被逼迫范例转换成字符串格式，如果不符合JSON规范，则会报错。

1. JSON.parse('[1,2]');  // [1,2]
2. JSON.parse('null');  // null
3. JSON.parse('false');  // false
4. JSON.parse('{"a":1}');  // {a: 1}
5. JSON.parse('{a:1}');  // Uncaught SyntaxError
6. JSON.parse("{'a':1}");  // Uncaught SyntaxError
7. JSON.parse('undefined');  // Uncaught SyntaxError

复制代码

注意JSON字符串中的key必须有双引号（单引号也不行），不然是不符合JSON规范的。
2. 参数二（reviver）

该参数是个函数，作用雷同于前面JSON.stringify()的第二个参数replacer，同样是对属性进行遍历，同样有key和value两个参数。

1. var str = '{"a": 1, "b":2}';
2. JSON.parse(str, function(key,value){
3.   if(key === 'a') {
4.     console.log(value);   //  1
5.     return function(){}
6.   }
7.   if(key === 'b') {
8.     console.log(value);   //  2
9.     return 'bbb'
10.    }
11.   if(key === '') {
12.     console.log(value);   //  {a: function(){}, b: "bbb"}
13.     return {a:1,c:2}
14.   }
15. });   //  {a: 1, c: 2}

复制代码

前面属性的遍历可以修改输出对象的属性值，但最终输出的值关键还是取决于key为空字符串时的返回值，它可以将之前所有的积极都变为徒劳。

两者联合使用场景

1、localStorage/sessionStorage 存储对象

我们知道 localStorage/sessionStorage 只可以存储字符串，当我们想存储对象的时间，需要使用 JSON.stringify 转换成字符串，获取的时间再 JSON.parse

1. // 存
2. function setLocalStorage(key,val) {
3.     window.localStorage.setItem(key, JSON.stringify(val));
4. };
5. // 取
6. function getLocalStorage(key) {
7.     let val = JSON.parse(window.localStorage.getItem(key));
8.     return val;
9. };

复制代码

2、实现对象深拷贝

1. let myIntro = {
2.   name: 'Gopal',
3.   age: 25,
4.   like: 'FE'
5. }
7. function deepClone() {
8.   return JSON.parse(JSON.stringify(myIntro))
9. }
11. let copyMe = deepClone(myIntro)
12. copyMe.like = 'Fitness'
13. console.log(myIntro, copyMe)
15. // {
16.       name: 'Gopal',
17.       age: 25,
18.       like: 'FE'
19.    }
20.    {
21.       name: 'Gopal',
22.       age: 25,
23.       like: 'Fitness'
24. // }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。