资讯专栏INFORMATION COLUMN

JSON.parse()与JSON.stringify()的用法,以及eval()和new Func

printempw / 570人阅读

摘要:实例用解析函数字符串排名除了,以下二种方法也可以将字符串转化为对象。实例解析函数不允许包含函数,会删除对象的函数,包括和。

JSON.parse()

1、我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])

参数说明:

text:必需, 一个有效的 JSON 字符串。
reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

2、JSON 解析实例

使用 JSON.parse 的 reviver 函数时一定要注意遍历到最后的顶层对象 key 为 "",需要返回 value。不然报错

var json = "{"name":"Harvy", "age":36, "gender":"male"}";
var person = JSON.parse(json, function (key, value) {
    if(key != "")
        return ""+value+"";
    else
        return value;
});

JSON 不能存储 Date 对象。// Sat Dec 14 2013 08:00:00 GMT+0800 (中国标准时间)
如果你需要存储 Date 对象,需要将其转换为字符串。// 2013-12-14
之后再将字符串转换为 Date 对象。// new Date(“2013-12-14”);

我们可以启用 JSON.parse 的第二个参数 reviver,一个转换结果的函数,对象的每个成员调用此函数。

实例

var text = "{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}"; 
var obj = JSON.parse(text, function (key, value) { 
if (key == "initDate") {
      return new Date(value);//将日期字符串转换为 Date 对象
 } else { 
return value; 
}
}); 
//Sat Dec 14 2013 08:00:00 GMT+0800 (中国标准时间)
document.getElementById("demo").innerHTML = obj.name + "创建日期:" + obj.initDate;

3、解析函数

JSON 不允许包含函数,但你可以将函数作为字符串存储,之后再将函数字符串用eval解析。

实例

var text = "{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}"; 
var obj = JSON.parse(text); 
obj.alexa = eval("(" + obj.alexa + ")"); //用eval解析函数字符串
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名:" + obj.alexa();

4、eval()

除了JSON.parse(),以下二种方法也可以将json字符串转化为json 对象。

var str1 = "{ "name": "deyuyi", "sex": "man" }";
console.log(eval("("+str1+")"));
console.log((new Function("","return "+str1))());
//str1 = { "name": "deyuyi", "sex": "man" }

Eval

由于json是以”{}”的方式来开始以及结束的,在JS中,{}会被当成一个语句块来处理,加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。

console.log(eval("{}"));// return undefined
console.log(eval("({})"));// return object[Object]

将age的值换成了Javascript代码,eval依然可以解析,假如有人恶意修改这个代码,那么就会造成严重后果。
//例如:

var jsonData = "{"student" : [{"name":"鸣人","age":17}, {"name":"小樱","age":alert("hehe")},{"name":"佐助","age":17}]}";

//先弹出一个提示框输出hehe的字符串~

console.log(eval("("+jsonData+")"));

但JSON.parse会报错。显示错误信息为当前字符串不符合json格式~即JSON.parse()方法会检查需要转换的字符串是否符合json格式~

相比较而言eval方法是很危险的~特别是当涉及到第三方时我们需要确保传给eval的参数是我们可以控制的~
不然里面插入比如window.location~指向一个恶意的连接~那就不好了
从这个层面讲~还是推荐使用JSON.parse来实现json格式字符串的解析。

//会报错~显示错误信息为当前字符串不符合json格式

console.log(JSON.parse(jsonData));

JSON.stringify()

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

1、语法

JSON.stringify(value[, replacer[, space]])

参数说明:

value:
必需, 一个有效的 JSON 对象。
replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。
如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。
space:
可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 有可以使用非数字,如:t。

2、JavaScript 对象转换

实例

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"}; 
document.write(obj);//[object Object] 
var myJSON = JSON.stringify(obj);
document.write(myJSON );
//输出字符串{"name":"runoob","alexa":10000,"site":"www.runoob.com"}

3、JavaScript 数组转换

实例

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ]; 
document.write(arr);//Google,Runoob,Taobao,Facebook
var myJSON = JSON.stringify(arr);
document.write(myJSON );// [ "Google", "Runoob", "Taobao", "Facebook" ]

4、将Date 对象转化为字符串

JSON 不能存储 Date 对象。
JSON.stringify() 会将所有日期转换为字符串。

实例

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj.initDate); 
document.write(myJSON );//"2018-11-08T03:00:40.443Z"

5、解析函数
JSON 不允许包含函数,JSON.stringify() 会删除 JavaScript 对象的函数,包括 key 和 value。

实例

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"}; 
var myJSON = JSON.stringify(obj);
document.write(myJSON );//{"name":"Runoob","site":"www.runoob.com"}

我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生:

实例

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"}; 
obj.alexa = obj.alexa.toString(); //将函数转换为字符串
var myJSON = JSON.stringify(obj);
//{"name":"Runoob","alexa":"function () {return 10000;}","site":"www.runoob.com"}
 document.write(myJSON );

不建议在 JSON 中使用函数。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100642.html

相关文章

  • 「中高级前端面试」JavaScript手写代码无敌秘籍

    摘要:第一种直接调用避免在不必要的情况下使用,是一个危险的函数,他执行的代码拥有着执行者的权利。来自于此外,实现需要考虑实例化后对原型链的影响。函数柯里化的主要作用和特点就是参数复用提前返回和延迟执行。手写路径导航 实现一个new操作符 实现一个JSON.stringify 实现一个JSON.parse 实现一个call或 apply 实现一个Function.bind 实现一个继承 实现一个J...

    Zhuxy 评论0 收藏0
  • JSON.stringify() 深入理解

    摘要:深入理解规则字符串化并非严格意义上的强制类型转换,但其中涉及的相关规则基本类型值的字符串化规则为转换为,转换为,转换为。如果对象有自己的方法,字符串化时就会调用该方法并使用其返回值。将对象强制类型转换为是通过抽象操作来完成的。 [TOC] 序言 最近在看《你所不知道的javascript》[中卷]一书,第一部分是类型和语法。本文是基于这部分的产物。在强制类型转换->抽象值操作-> to...

    eechen 评论0 收藏0
  • JavaScript中那些坑

    摘要:序列化为字符串之后它的各个属性已经被解除了引用,重新相当于创建了一个新的对象。类似于的,的命令行终端。基本思路函数的使用以及协议。 多行注释的陷阱 由于正则表达式字面量的存在,多行注释可能会产生陷阱,例如以下程序将抛出错误: /* var a = /h*/.test(hello); */ 正则结束前的那个星号将被解析为注释结束符,从而.被认为是不合法的.所以尽量避免使用多行注释 整型 ...

    ivyzhang 评论0 收藏0
  • 前端面试之手写代码

    摘要:虽然构造函数或者对象字面量的方法都可以用来创建对象,但是这些方法使用同一个接口创建很多对象,会产生大量的重复代码。参考资料冴羽的专题系列中高级前端面试手写代码无敌秘籍前端笔试之手写代码一本系列会从面试的角度出发围绕JavaScript,Node.js(npm包)以及框架三个方面来对常见的模拟实现进行总结,具体源代码放在github项目上,长期更新和维护 showImg(https://use...

    niceforbear 评论0 收藏0
  • Javascript JSON

    摘要:只是一种字符串数据格式,使用它的不仅仅是。对象在中,定义了全局对象。用于把对象序列化为字符串。这个方法可以使我们不必在乎语法与语法的差异,尽管创建合法的对象。用于把字符串序列化为值。 JSON只是一种字符串数据格式,使用它的不仅仅是Javascript。 语法 JSON可以表示三种类型的值:简单值、对象、数组 简单值 以下是JSON可以辨识的简单值例子: 5 Hello World! ...

    Miyang 评论0 收藏0

发表评论

0条评论

printempw

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<