你了解过JSON.parse吗？

这是我参与更文挑战的第5天

JavaScript的JSON字符串转换为JS对象的方式我们常常用的有三种:

var str = '{"name":"悟空","age":500}';
复制代码

将字符串转换为Java对象的方式

• var json = JSON.parse(str); 推荐使用
• var json = eval(“(” + str + “)”); 很早之前用过
• var json = (new Function(“return ” + str))(); 没有用过

运行结果为:

1.JSON.parse() 使用

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。

var str = '{"name":"悟空","age":18}';
console.log(JSON.parse(str));
复制代码

语法结构: JSON.parse(text[, reviver])

text: 要被解析成JavaScript值的字符串，查看 JSON 对象学习的JSON 语法的说明。

reviver[可选]: 如果是一个函数，则规定了原始值如何被解析改造，在被返回之前。

返回值: Object对应给定的JSON文本。

异常: 若被解析的 JSON 字符串是非法的，则会抛出 一个 语法错误 异常。

测试reviver参数使用

var user = {
    name: 'pangsir',
    email: 'hanpang8983@foxmail.com',
    age: 18,
    status:false
};

var userStr = JSON.stringify(user);

var newUserStr = JSON.parse(userStr, function(key, value){
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    if(typeof value === 'number'){
        return value*2;
    }
    return value;
});

console.log(newUserStr);
复制代码

运行结果为

如果指定了 reviver 函数，则解析出的 JavaScript 值（解析值）会经过一次转换后才将被最终返回（返回值）。更具体点讲就是：解析值本身以及它所包含的所有属性，会按照一定的顺序（从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身）分别的去调用 reviver 函数，在调用过程中，当前属性所属的对象会作为 this 值，当前属性名和属性值会分别作为第一个和第二个参数传入 reviver 中。如果 reviver 返回 undefined，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。

当遍历到最顶层的值（解析值）时，传入 reviver 函数的参数会是空字符串 ""（因为此时已经没有真正的属性）和当前的解析值（有可能已经被修改过了），当前的 this 值会是 {"": 修改过的解析值}，在编写 reviver 函数时，要注意到这个特例。（这个函数的遍历顺序依照：从最内层开始，按照层级顺序，依次向外遍历）

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 参数。
});

// 1
// 2
// 4
// 6
// 5
// 3 
// ""
复制代码

2.注意的坑点

A.JSON.parse() 不允许用逗号作为结尾

// both will throw a SyntaxError
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse('{"foo" : 1, }');
复制代码

B.单引号与双引号

我们看到一开始的举例中 var str = '{"name":"悟空","age":18}';

使用单引号来套双引号，如果反过来写呢，

如：var str = "{'name':'小明', 'age':18}";（相信也不少人习惯用双引号套单引号）

结果使用JSON.parse()来转化也会报错

C.兼容问题

IE6/7浏览器中不支持使用JSON.parse()方法转成json对象，所以需要引入一个json2.js文件。可以在这个网站（json2.js）去下载对象文件。

最后总结来说，如果使用JSON.parse()方法来转化成json对象的数据格式的话，需要注意的是被转化的字符串里面的属性要使用引号，并且总体是单引号套双引号的方式，以及IE6/7浏览器是不支持该方法。

当然，如果你使用eval()或者new Function()的方式来转化，那就完全可以忽略上述的这两点需要注意的地方!