乐趣区

关于javascript:JSONstringify和JSONparse

jiezi

咱们晓得，JSON.stringify() 和 JSON.parse() 是一对解决 JSON 数据的办法，前者是将 JSON 对象序列化为字符串，而后者是将 JSON 字符串解析为 JSON 对象。

然而你有较为深刻地去理解过它们吗？它们别离能够传入几个参数以及每个参数对应的作用是什么呢？

一、JSON.stringify()

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

// 初始化一个 user 对象
const user = {
    "name": "Mark Lee", 
    "age":26
}
console.log(JSON.stringify(user));
// 后果
// "{"name":"Prateek Singh","age":26}"

一般来说，开发人员应用 stringify 函数的场景较为广泛，就像下面做的那样。但我要通知你一些暗藏的机密，这些小机密会让你开发起来更加轻松。

JSON.stringify 根底语法 

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

它能够传入三个参数，参数 1 是须要字符串化的对象，参数 2 是用于指定对象序列化过程中须要被解决的属性，参数 3 是用于指定输入字符串的缩进格局。后两个参数是可选的，而咱们最罕用的就是只传一个参数。

第一个参数

须要字符串化的对象，且该对象须是平安的 JSON 对象，而对于不平安的 JSON 对象都不能被失常序列化。

1、不平安的 JSON 对象

何为不平安的 JSON 对象？

undefined、function、symbol 和蕴含循环的援用的对象都不合乎 JSON 构造规范，所以它们自身以及蕴含它们的对象都是不平安的 JSON 对象。

那么对于不平安的 JSON 对象，JSON.stringify() 会如何解决它们呢？

1) undefined、function、symbol

独自解决它们，间接返回 undefined。

JSON.stringify(undefined);    //  undefined
JSON.stringify(function(){});    //  undefined
JSON.stringify(Symbol());    //  undefined

蕴含它们的对象，主动将其疏忽。

JSON.stringify({a:1, b:undefined, c:function(){}, [Symbol()]:1});    //  "{"a":1}"

蕴含它们的数组，主动将其转成 null

JSON.stringify([1,undefined,function(){},Symbol()]);    //  "[1,null,null,null]"
2) 蕴含循环援用的对象

如果两个对象之间相互援用，造成一个有限循环，那么无论对其中的哪个对象进行 JSON 字符串化都会间接报错 

var obj1 = {};
var obj2 = {a: obj1};
obj1.a = obj2;
JSON.stringify(obj1);  //  Uncaught TypeError
JSON.stringify(obj2);  //  Uncaught TypeError
2、含有 toJSON() 办法的对象

对该类对象进行 JSON 字符串化，会先调用 toJSON() 办法，而后用它的返回值来进行序列化，而不是将整个对象转换为字符串。

const user = {
    firstName:"Mark",
    lastName:"Lee",
    age:26,
    toJSON(){
        return{fullName:`${this.firstName} + ${this.lastName}`
        };
    }
}
JSON.stringify(user);
//"{"fullName":"Mark + Lee"}"

这里咱们能够看到，它只打印 toJSON 函数的后果，而不是打印整个对象。
再举个栗子:

var obj = {
  a: 1,
  toJSON(){return function(){}}
};
JSON.stringify(obj);  //  undefined

失常依照后面讲的疏忽 function 来说应该要返回 ”{“a”:1}” 才对嘛，为啥是 undefined 呢? 这就是因为蕴含 toJSON() 办法的缘故，只有有它，间接就解决它的返回值。上例中因为 toJSON() 办法返回值是个不平安的 JSON 对象，所以就依照后面 1 中讲的形式来解决了。
上面的栗子看的更分明一些:

var obj = {
  a: 1,
  toJSON(){return [1,undefined,function(){},Symbol()]
  }
};
JSON.stringify(obj);  //  "[1,null,null,null]"

第二个参数（数组）

是的，stringify 函数也能够有第二个参数。它是要在控制台中打印的对象的键数组。看起来很简略？让咱们更深刻一点。咱们有一个对象 product 并且咱们想晓得 product 的 name 属性值。当咱们将其打印进去：它会输入上面的后果。

{"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 函数的第二个参数这时就有用了。让咱们重写代码并查看后果 

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

第二个参数（函数）

咱们还能够传入函数作为第二个参数。它依据函数中写入的逻辑来计算每个键值对。如果返回 undefined，则不会打印键值对。

const user = {
    "name": "Mark Lee", 
    "age":26
}
JSON.stringify(user,(key,value)=>{if(typeof value === 'string'){return undefined;}
    return value;
})
// 后果
// "{"age":26}"

只有 age 被打印进去，因为函数判断 typeOf 为 String 的值返回 undefined。

第三个参数为数字

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

const user = {
    "name": "Mark Lee", 
    "age":26
}
JSON.stringify(user,null,2);
//"{
//  "name": "Mark Lee",
//  "age": 26
//}"

第三个参数为字符串

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

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

二、JSON.parse()

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

JSON.parse(text[, reviver])

它能够传入两个参数，参数 1 是须要被解析的字符串，参数 2 是用于批改解析生成的原始值。后一个参数是可选的，而咱们最罕用的就是只传一个参数。

1. 参数一（text）

该参数必须是合乎 JSON 标准的字符串，如果是其余类型，则会被强制类型转换成字符串格局，如果不合乎 JSON 标准，则会报错。

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

留神 JSON 字符串中的 key 必须有双引号（单引号也不行），不然是不合乎 JSON 标准的。

2. 参数二（reviver）

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

var str = '{"a": 1,"b":2}';
JSON.parse(str, function(key,value){if(key === 'a') {console.log(value);   //  1
    return function(){} 
  }
  if(key === 'b') {console.log(value);   //  2
    return 'bbb'
   }
  if(key === '') {console.log(value);   //  {a: function(){}, b: "bbb"}
    return {a:1,c:2}
  }
});   //  {a: 1, c: 2}

后面属性的遍历能够批改输入对象的属性值，但最终输入的值要害还是取决于 key 为空字符串时的返回值，它能够将之前所有的致力都变为徒劳。

总结

  • 独自字符串化 undefined、function 和 symbol 后果都为 undefined；
  • 字符串化含有 undefined、function 和 symbol 的对象，这些值所在的属性都会被疏忽；
  • 字符串化含有 undefined、function 和 symbol 的数组，这些值都会被转化为 null；
  • 字符串化含有循环援用的对象会报错；
  • 字符串化含有 toJSON() 办法的对象，会间接字符串化该办法执行的返回值；
  • JSON.stringify() 的三个参数作用顺次为 指定须要字符串化的对象、指定对象序列化过程中须要被解决的属性 和 指定输入字符串的缩进格局；

  • JSON.parse() 的两个参数作用顺次为 指定须要被解析的字符串 和 批改解析生成的原始值。

    两者联合应用场景

    1、localStorage/sessionStorage 存储对象

    咱们晓得 localStorage/sessionStorage 只能够存储字符串，当咱们想存储对象的时候，须要应用 JSON.stringify 转换成字符串，获取的时候再 JSON.parse

    // 存
function setLocalStorage(key,val) {window.localStorage.setItem(key, JSON.stringify(val));
};
// 取
function getLocalStorage(key) {let val = JSON.parse(window.localStorage.getItem(key));
  return val;
};

    2、实现对象深拷贝 

    let myIntro = {
name: 'Gopal',
age: 25,
like: 'FE'
}

function deepClone() {return JSON.parse(JSON.stringify(myIntro))
}

let copyMe = deepClone(myIntro)
copyMe.like = 'Fitness'
console.log(myIntro, copyMe)

// {name: 'Gopal', age: 25, like: 'FE'} {name: 'Gopal', age: 25, like: 'Fitness'}
退出移动版