Js中JSON.stringify()与JSON.parse()与eval()详解及使用案例

Posted 2020-09-22

JSON(javascript Object Notation)是一种轻量级的数据交换格式。因为采用独立于语言的文本格式，也使用了类似于C语言家族的习惯，拥有了这些特性使使JSON称为理想的数据交换语言，作用是易于阅读和编写，同时也易于机器解析和生成（一般用于网络传输速率）。

一：JSON.parse();

　　作用：将json字符串转换成json对象

　　语法：JSON. parse(text[,reviver])。

　　参数：

　　　　text：必选，一个有效的json字符串。

　　　　reviver：可选。

　　返回值：一个对象或者数组。

    <script type="text/javascript">
        var jsonStr = ‘{"name":"huangxiaojian","age":"23"}‘;
        var jsonObj = JSON.parse(jsonStr);
        console.log(jsonObj); //{name: "huangxiaojian", age: "23"}
    </script>

 

二：JSON.stringify();

　　作用：将json对象转换成json字符串。

　　语法：JSON.stringify(value [, replacer] [, space]) 。

　　参数：

　　　　value：必选，通常为对象或者数组。

　　　　replacer：可选，用于转换结果的函数或者数组。

　　　　space：可选，向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。

　　返回值：一个包含json文本的字符串。

    <script type="text/javascript">
        var jsonObj = {"name":"张三","age":"23岁"};
        var jsonStr = JSON.stringify(jsonObj);
        console.log(jsonStr); //{"name":"张三","age":"23岁"}
    </script>

 

三：eval();

　　作用：eval()函数可计算某个字符串，并执行其中的javascript表达式或要执行的语句。

　　语法：eval(string)。

　　参数： string  必须，需要计算的字符串，其中含有要计算的javascript表达式或要执行的语句。

　　返回值：返回计算string的值，没有的话不做任何改变返回。

    <script type="text/javascript">
        eval(‘x = 10; y = 5; console.log(x*y)‘);
        
        console.log(eval(‘5+5‘));
        
        var x = 10;
        console.log(eval(‘x + 5‘));
    </script>

　　使用eval()函数也可以将JSON字符串解析为对象，这个功能能完成JSON.parse()的功能，但是有不一样的地方，请看下面代码 ：

    <script type="text/javascript">
        var str = ‘{"name":"huangxiaojian","age":"23"}‘;
         var info = JSON.parse(str);
        console.log(info); // Object {name: "huangxiaojian", age: "23"}
        var info = eval(‘(‘ + str + ‘)‘);
        console.log(info); // Object {name: "huangxiaojian", age: "23"}
    </script>

　　

　　大家注意到eval()还要用一对圆括号将字符串包起来，对此我寻找到比较好的解释就是：

　　原因：归结于eval本身的问题，由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

　　解决方法：加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。请看下列例子的不同： 

    <script type="text/javascript">
        console.log(eval("{}")); // undefined
        console.log(eval("(" + "{}" + ")")); // Object {}
    </script>