javaScript中JSON.parse函数和eval函数的区别

朱雀 2023-07-17 07:24 150阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![20200320162703197.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>javaScript中JSON.parse()函数和eval()函数的区别</title>
    </head>
    <body>
    <h1>javaScript中JSON.parse()函数和eval()函数的区别</h1>
    </body>
    <script type="text/javascript">
    /*
    eval()要用一对圆括号将字符串包起来，对此我寻找到比较好的解释就是： 
    原因：归结于eval本身的问题，由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当
    成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
    解决方法：加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表
    达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对
    象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代
    码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。
    请看下列例子的不同：
    */
    eval("var x =2; var y = 3;document.write(x * y + '<br/>')");
    var h = 20;
    document.write(eval(++h));
    console.log('{}'); //{}
    console.log(eval('{}')); //undefined
    console.log(eval("{}")); //undefined
    console.log(eval('({})')); //Object {  }
    console.log(eval("({})")); //Object {  }
    console.log(eval('(' + '{}' + ')')); //Object {  }
    console.log(eval("(" + "{}" + ")")); //Object {  }
    console.log(eval('(' + "{}" + ')')); //Object {  }
    console.log(eval("(" + '{}' + ")")); //Object {  }
    
    //Object { age: "6", hometown: "江西省赣州市" }
    console.log(eval("(" + "{'age':'6','hometown':'江西省赣州市'}" + ")"));
    
    //Object { name: "令狐冲", hometown: "华山" }
    console.log(eval('(' + '{"name":"令狐冲","hometown":"华山"}' + ')'));
    
    var jsonStr = '{"name":"令狐冲","hometown":"华山"}';
    //Object { name: "令狐冲", hometown: "华山" }
    console.log(JSON.parse(jsonStr));
    var obj = JSON.parse(jsonStr);
    //令狐冲 华山
    console.log(obj.name, obj.hometown);
    
    var jsonStr2 = '{"name":"东方不败","hometown":"黑木崖","message":alert(23)}';
    eval('(' + jsonStr2 + ')'); //弹出一个提示框输出23
    // JSON.parse(jsonStr2); //报错
    
    var jsonStr3 = '{"name":"张无忌","hometown":"武当派","message":alert(\'hello\')}';
    eval('(' + jsonStr3 + ')'); //弹出一个提示框输出hello
    // JSON.parse(jsonStr3); //报错
    
    var jsonStr4 = '{"name":"杨过","hobby":"小龙女","message":"var k = 10; ++k;"}';
    eval('(' + jsonStr4 + ')');
    // console.log(k); //ReferenceError: k is not defined
    JSON.parse(jsonStr4);
    
    var jsonStr5 = '{"name":"张无忌","hometown":"武当派","message":alert("hi")}';
    eval('(' + jsonStr5 + ')'); //弹出一个提示框输出hi
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20230528/fe2ba68847c54c668b400f5605248985.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20230528/dd2baf3f799a4fb5bee6936bea45838c.png
[20200320162703197.png]: /images/20230528/b535ddc0b87d40879a8a5b88b1646c3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20230528/60a37e3e7eb94832a5e5a7af1fb3b8ce.png