eval、JSON.parse和JSON.stringify

前端之家收集整理的这篇文章主要介绍了eval、JSON.parse和JSON.stringify前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
早期的JSON解析器基本上就是使用JavaScript的eval()函数。由于JSON是JavaScript语法的自己,因此eval()函数可以解析、解释并返回JavaScript的对象和数组。ECMAScript 5对解析JSON的行为进行了规范,定义了全局对象JSON。 JSON对象有两个方法:stringify()和parse()。在最简单的情况下,这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript

eval

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码
说明

方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性,并通过该属性调用它,则 ECMAScript 实现允许抛出一个 EvalError 异常。

使用示例:

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script src="Scripts/jquery-2.1.0.js"></script>
  6. <script type="text/javascript">
  7. function GoHome() {
  8. alert("go home");
  9. }
  10. $(function () {
  11. var toolbar = {
  12. "name": {
  13. "key":"abc"
  14. }
  15. }
  16. var str = "toolbar.name.key";
  17. alert(eval(str));//解析为json的值
  18. $("button").click(function () {
  19. var r = "GoHome()";
  20. eval(r);//执行方法
  21. });
  22. eval("x=10;y=20;document.write(x*y)")
  23. //JSON格式:
  24. /*
  25. (1) 单个对象{"变量名1":"变量值1","变量名2":"变量值2"}
  26. (2) 数组[{ "变量名11":"变量值1","变量名12":"变量值2" },{ "变量名21":"变量值1","变量名22":"变量值2" },{ "变量名31":"变量值1","变量名32":"变量值2" }]
  27. */
  28. //情况一:
  29. var t = '{"Name":"xiao","Sex":"man"}';
  30. var d = eval('(' + t + ')');
  31. //alert(d["Name"]);//弹出xiao
  32. //情况二:
  33. var t1 = '[{"Name":"zhang","Sex":"Man"},{"Name":"Wang","Sex":"Female"}]';
  34. var d1 = eval('(' + t1 + ')');
  35. alert(d1[0]["Name"]);
  36. });
  37.  
  38. </script>
  39. </head>
  40. <body>
  41. <button>Go</button>
  42. </body>
  43. </html>

JSON.parse


作用:将一个对象或者字符串解析为JSON对象

语法:JSON.parse(text,[Function reviver])
参数说明:
text:要解析为json对象的字符串
reviver:过滤(还原函数),接收两个个参数,一个键和一个值,返回一个值(与stringify 一样)
如果还原函数返回undefined,则表示要从结果中删除相应的键;如果返回其他值,则将该值插入到结果中
示例:

  1. //parse 用于从字符串解析出json对象,
  2. // 一个参数
  3. var Student = {
  4. age: "20",sex: "male"
  5. };
  6. var jsonString = JSON.stringify(Student);
  7. var obj = JSON.parse(jsonString);
  8. alert(obj.age);
  9. //注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。
  10. var str = '{"name:"xiaowang","age":"23"}';
  11. var result = JSON.parse(str);
  12. alert(result.age);
  13. //两个参数
  14. var student = {
  15. name: "xiao",age:"20"
  16. }
  17. var jsonstu = JSON.stringify(student);
  18. var stuObj = JSON.parse(jsonstu,function (key,value) {
  19. if (key == "age") {
  20. return 22;
  21. } else {
  22. return value;
  23. }
  24. });
  25. alert(stuObj.name);
  26. alert(stuObj.age);

JSON.stringify


作用:用于序列化对象,可以理解为把对象类型或者字符串类型转换为JSON类型字符串

语法:JSON.stringify(value,[,replacer][,space])
value:必选,要输出的对象
replacer:可选,过滤器,有两种情况,一种是方法,一种是数组,具体看示例
方法:把序列化后的每个对象传递到方法里面进行处理,
数组:如果前面要转换的是一个对象,如{name:"zhang",age:"20"},则在数组包含的该key的元素会被筛选出来
space:可选,使用什么来分割,具体看示例
示例:

  1. /*
  2. * 只有第一个参数
  3. */
  4. var Student = {
  5. age: "20",sex:"male"
  6. };
  7. //stringify()用于从一个对象解析出字符串
  8. var jsonString = JSON.stringify(Student);
  9. alert(jsonString);
  10.  
  11. var person = new Object();
  12. person.name = "xiao wang";
  13. person.age = "20";
  14. person.location = "china";
  15. var personjson = JSON.stringify(person);
  16. alert(personjson);
  17. /*
  18. * 有两个参数,第一个参数是对象,第二个参数是数组
  19. */
  20. var person = new Object();
  21. person.name = "xiao wang";
  22. person.age = "20";
  23. person.location = "china";
  24.  
  25. var filter = ["name"];
  26.  
  27. var personjson = JSON.stringify(person,filter);
  28. alert(personjson);
  29. /*
  30. * 有两个参数,第一个参数是数组,第二个参数是数组(计算结果是第二个参数忽略)
  31. */
  32. var person = ["zhangsan","20","male","china"];
  33. var filter = ["zhangsan","china"];
  34. var jsonperson = JSON.stringify(person,filter);
  35. alert(jsonperson);
  36.  
  37. /*
  38. * 有两个参数,第一个参数是数组,第二个参数是函数
  39. */
  40. function switchUpper(key,value) {
  41. return value.toString().toUpperCase();
  42. }
  43. var person = ["zhangsan","china"];
  44. var jsonperson = JSON.stringify(person,switchUpper);
  45. alert(jsonperson);
  46. /*
  47. *有两个参数,第一个参数是对象,第二个参数是函数
  48. */
  49. var person = new Object();
  50. person.name = "xiao wang";
  51. person.age = "20";
  52. person.location = "china";
  53.  
  54. var jsonperson = JSON.stringify(person,value) {
  55. switch (key) {
  56. case "name":
  57. return "zhang";
  58. default:
  59. return value;
  60. }
  61. });
  62. alert(jsonperson);
  63. /*
  64. * 有三个参数,如果省略的话,那么显示出来的值就没有分割符,
  65. * 如果是数组的话,那么它定义缩进的字符,如果大于10,则最多显示10个
  66. * 如果是一些转义字符,如"\t",表示回车,那么它每一行一个回车
  67. * 如果仅仅是字符串,就在每行输出值得时候把这些字符串附加上去,当然最大长度是10个字符
  68. */
  69. //空格
  70. var person = ["name","age","sex","location"];
  71. var jsonperson = JSON.stringify(person,null,20);
  72. alert(jsonperson);
  73. //字符
  74. var person = ["name","hi");
  75. alert(jsonperson);

toJSON


有时候JSON.stringify()还是不能满足对某些对象进行自定义序列化的需求。
在这些情况下,可以通过对象上调用toJSON()方法,返回其自身的JSON数据格式。如:

  1. var student = {
  2. name: "xiao",age: "20",sex: "male",toJSON: function () {
  3. return this.name + "_" + this.age;
  4. }
  5. }
  6. var jsonstu = JSON.stringify(student);
  7. alert(jsonstu);
  8. var student = {
  9. name: "xiao",toJSON: function () {
  10. return this.name + "_" + this.age;
  11. }
  12. }
  13. var jsonstu = JSON.stringify(student,value) {
  14. return value;//value = "name_20"
  15. });
  16. alert(jsonstu);
以上代码在student对象上定义了一个toJSON()方法,该方法返回name和id的组合。最后jsonText的值如下: "xiao_20" toJSON()可以作为函数过滤器的补充,因此理解序列化的内部顺序十分重要。假设把一个对象传入JSON.stringify(),序列化该对象的顺序是: (1)如果存在toJSON()方法而且能够通过它取得有效值,则调用方法。否则,按默认顺序执行序列化。 (2)如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第(1)步返回的值。 (3)对第(2)步返回的每个值进行相应的序列化。 (4)如果提供了第三个参数,执行相应的格式化。 无论是考虑滴定toJSON()方法,还是考虑使用函数过滤器,或者需要同时使用两者,理解这个顺序都是至关重要的。

猜你在找的Json相关文章