Js中JSON.stringify函数与JSON.parse函数与eval函数详解及使用案例

Love The Way You Lie 2023-07-17 04:42 23阅读 0赞

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

(1)JSON.parse函数

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

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

参数：text  必须；一个有效的json字符串。

reviver  可选。

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

example：

![format_png][]

(2)JSON.stringify()函数

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

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

参数：value  必须；通常为对象或数组。

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

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

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

example:

![format_png 1][]

(3) eval()函数

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

语法：eval(string)

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

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

example：

![format_png 2][]

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

![format_png 3][]

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

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

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

![format_png 4][]

======================================下面举一个在实际开发中的小例子================================

一：组合参数

![format_png 5][]

二：传递参数

![format_png 6][]

三 ：解析参数

![format_png 7][]

最后附上js中获取URL参数的共通方法getRequest()方法：

getRequest : function() \{

var url = location.search; //获取url中"?"符后的字串

var theRequest = new Object();

if (url.indexOf("?") != -1) \{

var str = url.substr(1);

strs = str.split("&");

for(var i = 0; i < strs.length; i ++) \{

theRequest\[strs\[i\].split("=")\[0\]\]=unescape(strs\[i\].split("=")\[1\]); \}

return theRequest;

愿你眼中有光芒，活成你想要的模样

[format_png]: /images/20230528/66631060ae324d70a9510c9d23d40d3f.png
[format_png 1]: /images/20230528/240cc018a68c4f04a03eaaa83b377b6a.png
[format_png 2]: /images/20230528/f67e6ea426634a3188bddcc441f39fe2.png
[format_png 3]: /images/20230528/bbf08c0907e24d2db9008a18eb432bba.png
[format_png 4]: /images/20230528/e9de7f88bded4513ad5dc131139d1946.png
[format_png 5]: /images/20230528/a2c387ea01054373a4e796c7b3914e01.png
[format_png 6]: /images/20230528/7a21d9476f994eb38e05c78bc07d9f49.png
[format_png 7]: /images/20230528/746e518e75e94158bd4a229344dd4d38.png