小课堂【js-04】

课题:json是什么,如何处理转义?

分享人:吴胜

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

  最早的程序猿们使用XML来进行传递数据。虽然XML本身不算复杂,但是,加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后 ,XML使用起来很繁琐了。2001年由 Douglas Crockford 提出JSON 格式后,JSON便慢慢取代了繁琐笨重的 XML 格式。

2.知识剖析

  JSON (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。相比 XML 格式,JSON 格式有两个显著的优点:书写简单,一目了然;符合 JavaScript 原生语法,可以由解释引擎直接处理,不用另外添加解析代码。所以,JSON 迅速被接受,已经成为各大网站交换数据的标准格式,并被写入标准。
PS:每个 JSON 对象就是一个值,可能是一个数组或对象,也可能是一个原始类型的值。总之,只能是一个值,不能是两个或更多的值。

JSON语法

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

JSON 对值的类型和格式规定

  • 复合类型的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。
  • 原始类型的值只有四种:字符串、数值(必须以十进制表示)、布尔值和null(不能使用NaN, Infinity, -Infinity和undefined)。
  • 字符串必须使用双引号表示,不能使用单引号。
  • 对象的键名必须放在双引号里面。
  • 数组或对象最后一个成员的后面,不能加逗号。

  • ps:注意,null、空数组和空对象都是合法的 JSON 值。
var json = {
"password":123456,
"name":"myname",
"Booleans":true,
"Array":[x,y,z],
"object":{}
}

json的嵌套使用

myObj = {
"name":"jnshu",
"alexa":1000,
"sites": {
"site1":"www.jnshu.com",
"site2":"m.jnshu.com",
"site3":"c.jnshu.com"
}
}
console.log(myObj)
//输出结果:
// Object {name: "jnshu", alexa: 1000, sites: Object}

json对象

  JSON对象是 JavaScript 的原生对象,用来处理 JSON 格式数据。 通俗点讲,每个符合JSON格式的值就是一个JSON对象。也就是说,每个JSON对象,都是一个值。一个JSON对象对应且只对应一个值,要么是简单类型的值,要么是复合类型的值。

它有两个方法:JSON.stringify()和JSON.parse()。

JSON.stringify有三个参数

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

value:是必须要的字段。就是你输入的值,比如数组啊,对象啊等等。

replacer:这个是可选的。它又分为2种方式,一种是方法,第二种是数组。

当replacer是方法时,其作用类似给传入的对象的每一个符合方法条件的值一个方法进行迭代

var obj2 ={
a:1,
b:2 };
var obj2 =JSON.stringify(obj2,function(key,value){
if(typeof value === "number"){
value = 2 * value;
}
return value;
});
conlose.log(obj2); //("a":2,"b":4)

对原对象中符合要求的每一个值传入一个方法,类似于数组中的迭代,返回迭代后的值。
当replacer是数组时,其作用是对传入的对象值进行筛选

var obj3 ={ a:1,
b:2,
c:3,
d:4
};
var obj3 = josn.stringify(obj3,["d","c"]);
conlose.log(obj3);//("d":4,"c":3)

对obj3对象的值进行了筛选,只能选择和数组中的值相等的key的值
第三个参数是对显示数据进行排版,对每一个键值对换行处理。值可以是数字或字符串。当起为数字时,一个数字代表键值对前面的空格, 数字不大于10。字符串同理,只是将空格换成相应的字符,字符最多不能大于10个。

var obj4= { p1:1, p2:2 };
var obj4 = json.stringify(obj4,null,4);
console.log(obj4);
//{
//   "p1":1,
//   "p2":2
//}

每一项键值对独占一行并且缩进四个空格

3.常见问题

  • 为什么需要转义?
  • json如何处理转义?
  • 由JSON字符串生成JSON对象时的转义问题?

4.解决方案

为什么需要转义?

在js中我们使用的js对象进行处理,但是在与后端数据交换的时候,我们需要发送规定的json格式的字符串,所以在给后端发送或接受数据的时候,需要转义。

json如何处理转义

  • json字符串转js对象,调用parse方法:
    js对象 = JSON.parse(json字符串);
  • js对象转json字符串,调用stringify方法:
    json字符串 = JSON.stringify(js对象);

由JSON字符串生成JSON对象时的转义问题

  原因:在用JSON.parse解析JSON对象时会对其中的转义符进行两次解析。

  比如'{"a":"b","b":"\\\\"}' //{a: "b", b: "\"},
首先解析器提取单引号括起来的字符串时认为第一个‘\’是用来转义第二个‘\’的 ,第三个‘\是用来’转义第四个‘\’, 结果输出字符串是{“a”:“b”,“b”:"\\"}。
然后正式转为js对象的时候还有一次转义, 也就是实际输出字符转中的第一个\转义第二个\(此时只有两个\),结果输出字符串是{“a”:“b”,“b”:"\"}。
  所以说我们想要输出"\“时需要输入四个”\",不然会出错。

5.代码实战

6.拓展思考

我们先看2串代码

{name:“myname”,password:123456}//它是js对象

{“name”:“myname”,“password”:123456}//它是json
那么js对象和json有什么不一样的地方?

JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。

例:
var obj = {a: 'Hello', b: 'World'}; //这是一个对象,注意键名也是可以使用引号包裹的

var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串

它们的区别

7.参考文献

json对象

json语法

json转义问题

8.更多讨论

鸣谢

感谢大家观看

BY : 吴胜