欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JSON定义及应用

程序员文章站 2022-05-14 08:43:51
1 什么是JSON? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) 是轻量级的文本数据交换格式,JSON 比 XML 更小、更快,更易解析。 2 JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集。 数据在名称 ......

JSON定义及应用

1 什么是json?

  • json 指的是 javascript 对象表示法(javascript object notation)
  • 是轻量级的文本数据交换格式,json 比 xml 更小、更快,更易解析。

2 json 语法规则

json 语法是 javascript 对象表示语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 大括号保存对象
  • 中括号保存数组

json 值可以是:字符串, 数字, 对象, 数组, 布尔值 或 null

javascript 的值可以是:json 数据类型,也可以是 javascript 的表达式,包括函数,日期,及 undefined

3 json和javascript对象之间的转换

(1)json.parse() 

作用:将json格式的字符串转换为javascript对象

语法:  json.parse(text[, reviver]) 

参数说明:

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

返回值:对象或数组

示例一:

var jsonstr = '{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }';    // json格式的字符串
var obj = json.parse(jsonstr);    // javascript对象
document.write("name = " + obj.name);
document.write("name = " + obj[name]);    // 第二种写法

示例二:

1 var text = '{ "name":"runoob", "initdate":"2013-12-14", "site":"www.runoob.com"}';
2 var obj = json.parse(text, function (key, value) { // 函数会遍历字符串中所有key和value,得到返回的value
3     if (key == "initdate") {
4         return new date(value);
5     } else {
6         return value;
7 }});
8 document.write("创建日期:" + obj.initdate);    // 输出,创建日期:sat dec 14 2013 08:00:00 gmt+0800 (中国标准时间)

(2)json.stringify()

作用:将javascript对象转换为json格式的字符串

语法:  json.stringify(value[, replacer[, space]]) 

参数说明:

  • text:必需, javascript对象或数组。
  • replacer: 可选。用于转换结果的函数或数组。

    如果 replacer 是函数,则 json.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。

    如果 replacer 是数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。(意思就是,对象或数组中key值如果在数组中存在,才保留。不存在的就去掉)

  • space: 可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 也可以使用非数字,如:\t。

返回值:json格式的字符串

示例一:

var obj = { "name":"runoob", "initdate":new date(), "alexa":10000};
var jsonstr= json.stringify(obj);
document.write(jsonstr);    // 输出,{"name":"runoob","initdate":"2019-04-04t08:56:59.679z","alexa":10000}

实例二:

 1 函数
 2 
 3 var obj = { "name":"runoob", "age":23, "site":"www.runoob.com"};
 4 var jsonstr = json.stringify(obj, function(key,value){
 5     if (key == "age") {
 6         return 55;
 7     }
 8         return value;
 9 }, '\t');
10 document.write(jsonstr);    // 输出,{"name":"runoob","age":55,"site":"www.runoob.com"}
11 
12 数组
13 
14 var obj = { "name":"runoob", "age":23, "site":"www.runoob.com"};
15 var jsonstr = json.stringify(obj, [site,name], '\t');    // 保留数组中出现的对象的key值,按数组的顺序
16 document.write(jsonstr);    // 输出,{"site":"www.runoob.com","name":"runoob"}

(3)eval()

作用:使用的是 javascript 编译器,可解析 json 文本,然后生成 javascript 对象。必须把文本包围在括号中,这样才能避免语法错误

语法: var obj = eval ("(" + txt + ")"); 

参数说明:

  • string:必需, 可以表示要计算的 javascript 表达式或要执行的语句。

返回值:返回计算string的值,如果有的话 (没有则不做任何改变返回)

 示例一:

// 表达式
eval("x=10;y=20;document.write(x*y)");  //output为200
document.write(eval("2+2"));  //output为4
var x=10;
document.write(eval(x+17));  //output为27

// json格式字符串
7 var json = '{"name":"gdt","age":23,"university":"gdut"}';
8 var info = eval('(' + json + ')');  //解析为json对象
9 document.write(info);            //output为[object object]

3.1 为什么eval()要用一对圆括号将字符串包起来?

  • 原因:归结于eval本身的问题,由于json是以”{}”的方式来开始以及结束的,在js中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
  • 解决方法:加上圆括号的目的是迫使eval函数在处理javascript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为javascript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。请看下列例子的不同
alert(eval("{}"));             // return undefined
alert(eval('('+'{}'+')'));     // return object[object] 

另外,相对于写法格式严格的json.parse()来说,eval()可以解析任何字符串,eval是不安全的,因为eval比较宽松,会有潜在的安全性问题。比如以下代码:

var str1 = '{"a":"b"}';
document.write(eval("("+str1+")"));   //正常解析为对象
var str2 = '{"a": (function(){alert("i can do something bad!");})()}';
eval('('+str2+')');                   //可以用来执行木马脚本

 

总结:第一次写自己的技术博文,很多都是从其他地方借鉴的。毕竟是第一次写,有不对的地方也请见谅,也暴露了我自己的逻辑思维需要提升了,讲述一个问题的解答方法比理解一个问题更难,希望以后能靠自己就写出好的博文,坚持就是胜利。

  加油 2019!

 

 

 【参考】

  1. https://www.cnblogs.com/dtbelieve/p/5346603.html  json.parse()、json.stringify()、eval()讲解
  2. json教程