JavaScript中的JSON对象介绍及使用场景

JavaScript中的JSON对象介绍及使用场景

在工作中我们经常会遇到字符串和对象的处理，尤其是其中的相互转换。

其中最常见的恐怕就是今天要说的JSON对象包含的两个方法JSON.stringfy()以及JSON.parse()

一、JSON.stringfy()

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

参数说明：

• value:

  必需， 要转换的 JavaScript 值（通常为对象或数组）。

• replacer:

  可选。用于转换结果的函数或数组。

  如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

  如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。

• space:

  可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

示例

var data =[
{
    name: "程咬金",sex:"1",age:26    
},
{
    name: "程才",sex:"0",age:20
}
];

var str_json = JSON.stringify(data,["name","sex"],3);
console.log(str_json);
var str_json2 = JSON.stringify(data, function (key, value) {
      if (key == 'sex') {
        return ["女", '男'][value];
      }
      console.log('value', value)
      return value;
    });
console.log(str_json2);

第三个一般不传，传的话相当于有了个换行操作，对应的数组表示缩进数。当然第二个参数一般也不传递。。

二、JSON.parse()

JSON.parse(text[, reviver])

返回与指定值对应的JSON字符串，可以通过额外的参数，控制仅包含某些属性，或者自定义方法来替换某些key对应的属性

示例

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);

这里特别注意单双引号的使用，特别是前后端交互的时候他传过来一个中间全是单引号的字符串，你会发现这玩意竟然不能用了？

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});

使用场景的话，回想一下最近写的代码，前端常用到它的地方就是往浏览器的storage中保存和取用数据。