JSON.parse解析json对象需要注意的地方

将json字符串转换为JSON对象

在工作中遇到这样一个问题，需要将请求到的JSON数据转换为字符串，存入到sessionStorage中，然后在iframe中读取sessionStorage的JSON字符串，进行转换成JSON对象实现预览的功能。

在前端，将请求到的json写入到缓存（省略请求的步骤）

// 将数据写入sessionStorage
export function setStorage(json) {
  const ZTKEY = 'ztkey';
  let _data = JSON.stringify(json);
  sessionStorage.setItem(ZTKEY, JSON.stringify(_data));
}

JSON.stringify(json) 将json对象转换为json字符串

转换后如上图所示，发现对应的value下每个"前面都有个反斜杠。

在iframe中，对缓存中的json字符串进行解析。

// 使用sessionStorage获取字符串，并转为json后返回
let json_str = sessionStorage.getItem(ZTKEY);
let json_error = { error: "edit", data: false };
let json_data = {};
// 获取不到就抛出一个错误, 这里后台当新建的时候对缓存存一个数据让他不报错
if (json_str == null || json_str == undefined) {
      json_data = json_error;
} else {
     // 第一次转义去掉JSON前面的斜杠，转换为纯正的字符串
     json_data = JSON.parse(json_str);
     // 第二次才将字符串转换为JSON对象
     json_data = JSON.parse(json_data);
}
// 返回解析后的json对象
return Promise.resolve(json_data);

这里主要就是读取缓存中的字符串，使用JSON.parse()对字符串进行解析。当字符串不存在就赋值一个，存在就进行解析。

这里特别注意的是解析了2次！经过控制台打印发现，第一次解析，是将字符串中的“\”去掉！

原先从缓存中获取的json字符串json_str：

第一次解析json_data =JSON.parse(json_str);将斜杠"\"去掉！

第二次解析json_data =JSON.parse(json_data)，才将去掉斜杠的json字符串转化为json对象！

所以当发现json字符串中含有转义斜杠的时候，需要使用两次解析！

其他的坑点

将字符串转化json对象的更多方法：

var json = JSON.parse(str);
var json = eval("(" + str + ")");
var json = (new Function("return " + str))();

JSON.parse的坑点：

如果使用JSON.parse()方法来转化成json对象的数据格式的话，需要注意的是被转化的字符串里面的属性要使用引号，并且总体是单引号套双引号的方式。str = '{"name":"小明","age":18}'; 属性name和age都用双引号引住

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

关于eval

eval() 函数可将字符串转换为代码执行，并返回一个或多个值。eval调用时，实例为eval( "( javascript代码 )" )。

var str = "function(){
  alert('a');
}";
str = eval( "(" + str + ")" );
str();

eval()的返回值遵循以下规则：

• 如果eval()的参数不是字符串，那么eval()将直接返回参数。
• 如果eval()的参数是字符串，那么eval()将这个字符串解析成代码后进行执行，并返回最后一行代码执行的结果。
• 如果字符串无法解析成合法的代码，eval()将抛出SyntaxError错误。