JS:深入理解JSON | 刷题打卡

541 阅读1分钟

一、介绍

有一天遇到一个问题:使用 JSON.stringify 方法把一个对象转化成JSON字符串时和预期的结果不一致。 期望的是应该把对象转成JSON字符串,却得到了一个空对象。

var myObject = {
  'example': undefined
};
console.log(myObject); // 输出 {example: undefined}
     
var jsonString = JSON.stringify(myObject);
console.log(jsonString); // 输出 '{}'

执行结果如图:

二、一些特殊的值

在上面这个例子中,问题的原因是在执行JSON.stringify(obj)时,如果对象中包含 function, udefined, null等值的话,值是这些的属性将会被自动从对象中移除。因此当你的对象中只包含字符串和数字时,才能大胆放心的使用JSON.stringify

好消息是,我们可以利用JSON.stringify(obj, replacer)的第二个参数:replacer 函数进行转换。

举个例子:

var myObject = {
  'property': undefined
};
console.log(myObject);
 
var replacer = function(k, v) { 
	if (v === undefined) { return 'undefined'; } 
    	return v; 
};
var jsonString = JSON.stringify(myObject, replacer);
console.log(jsonString);

上面的代码创建了一个 replacer 函数,作用是把对象中的undefined值替换为'undefined'字符串,执行结果如图:。

三、其他值

同理,如果需要转换其他变量类型时同样可以使用该方法。

举个例子:

var myObject = {
    'property': undefined,
    name: null,
    fn: function() { console.log('hi') }
};
console.log(myObject);

var replacer = function (k, v) {
    if (v === undefined) {
        return 'undefined';
    } else if (v === null) {
        return 'null';
    } else if (typeof v === 'function') {
        return v.toString();
    }
    return v;
};

var jsonString = JSON.stringify(myObject, replacer, 2);
console.log(jsonString);

执行结果如下图:

除此之外,.stringify方法还有第三个参数也很有用,表示空格数:space-count, 用于把json字符串美化输出,可以传递 2、4 '\t', '\n' 等值。