一、JSON.stringify()
JSON.stringify(value[, replacer [, space]])
它可以传入三个参数,参数1 是需要字符串化的对象,参数2 是用于指定对象序列化过程中需要被处理的属性,参数3 是用于指定输出字符串的缩进格式。后两个参数是可选的,而我们最常用的就是只传一个参数。
1. 参数一(value)
需要字符串化的对象,且该对象须是安全的JSON对象,而对于不安全的JSON对象都不能被正常序列化。
① 不安全的JSON对象
何为不安全的JSON对象?
undefined、function、symbol和包含循环的引用的对象都不符合JSON结构标准,所以它们本身以及包含它们的对象都是不安全的JSON对象。
那么对于不安全的JSON对象,JSON.stringify()会如何处理它们呢?
- 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
② 含有toJSON()方法的对象
对该类对象进行JSON字符串化,会先调用toJSON()方法,然后用它的返回值来进行序列化。例如:
var obj = {
a: 1,
toJSON(){
return function(){}
}
};
JSON.stringify(obj); // undefined
正常按照前面讲的忽略function来说应该要返回"{“a”:1}"才对嘛,为啥是undefined呢? 这就是因为包含toJSON()方法的缘故,只要有它,直接就处理它的返回值。上例中因为toJSON()方法返回值是个不安全的JSON对象,所以就按照前面 ① 中讲的方式来处理了。
再看个例子你就明白了:
var obj = {
a: 1,
toJSON(){
return [1,undefined,function(){},Symbol()]
}
};
JSON.stringify(obj); // "[1,null,null,null]"
2. 参数二(replacer)
用于指定对象序列化过程中需要被处理的属性,它可以是数组或函数。
① 数组
必须是字符串数组,其中包含序列化要处理的对象的属性名称,除此之外的其他属性会被忽略。例如:
var obj = {
a: 1,
b: 2
};
JSON.stringify(obj, ['a']); // "{"a":1}"
② 函数
该函数会先调用对象本身,然后遍历对象的每个属性。函数传入两个参数,第一个为属性名(key),第二个为属性值(value)。开始调用对象本身时,第一个参数key为空字符串,第二个参数value为对象本身,而此时函数的返回值会直接替换原对象。而后每次遍历对象属性时的返回值都会替换原有该属性的值。例如:
var obj = {
a: 1,
b: 2
};
JSON.stringify(obj, function(key,value){
if(key === '') {
console.log(value); // {a: 1, b: 2}
return value;
}
if(key === 'a') {
console.log(value); // 1
return 'aaa';
}
if(key === 'b') {
console.log(value); // 2
return 'bbb';
}
}); // "{"a":"aaa","b":"bbb"}"
看到了吗?每一次遍历返回值都可能会对最终的处理结果产生影响。我们再看个例子:
var obj = {
a: 1,
b: 2
};
JSON.stringify(obj, function(key,value){
if(key === '') { return {a:1,c:2} } // 替换原对象为{a:1,c:2}
if(key === 'a') { return undefined } // 替换原有属性a的值为undefined,最终该属性会被忽略
if(key === 'b') { return 'bbb' } // 原对象已被替换,所以不存在属性b
if(key === 'c') { return 'ccc' } // 替换原有属性c的值为'ccc'
}); // "{"c":"ccc"}"
3. 参数三(space)
用于指定输出字符串的缩进格式。它可以是正整数,也可以是字符串。当是正整数时,它指定的是每一级缩进的字符数,当它是字符串时,该字符串的前十个字符将会被用于每一级的缩进。例如:
var obj = {
a: 1,
b: 2
};
JSON.stringify(obj, null, 4);
JSON.stringify(obj, null, ‘**********–%%##’);
最后输出结果为:
"{
"a": 1,
"b": 2
}"
"{
**********"a": 1,
**********"b": 2
}"
可以看到,无论传入的字符串有多长,最终只会取前十个字符用于缩进填充。
二、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()的两个参数作用依次为 指定需要被解析的字符串 和 修改解析生成的原始值