第十九篇 JSON 、XML、E4X

by caix in 深圳

JSON

定义

JSON：JavaScript Object Notation 【JavaScript 对象表示法】

JSON（JavaScript Object Notation，JS 对象标记）是一种轻量级的数据交换格式，目前使用特别广泛。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 采用完全独立于任何程序语言的文本格式，使JSON成为理想的数据交换语言

JSON 易于人阅读和编写，同时也易于机器解析和生成，并有效的提供网络传输效率。

JSON 是 JavaScript Object Notation 的缩写，实际上是一个按照一定格式进行编码的简单 JavaScript 对象的字符串表示，它只有非常少的语法，语法结构非常简单。而因为 JSON 字符串的语法简单，所以它所包含的数据类型也非常的少，但是对于大部分场景来说，这足够了。

JavaScript语言中，一切都是对象。因此，任何JavaScript支持的类型都可以通过JSON来表示，例如字符串、数字、对象、数组等

为什么使用 JSON

提到JSON，我们就应该和XML来进行对比。XML也是一种存储和交换文本信息的手段。那么JSON好在哪里呢？

JSON 比 XML 更小、更快，更易解析

javaScript原生支持JSON，解析速度会很快

XML解析成DOM对象的时候，浏览器【IE和fireFox】会有差异

使用JSON会更简单

更加容易创建JavaScript对象

var p = {'city':['北京','上海','广州','深圳']};
for(var i=0;i<p.city.length;i++){
    document.write(p.city[i]+"<br/>");
}

JSON 凭借其简单的语法，在对其进行解释的时候，可以完全按照从前到后的顺序进行解释，每一个字符的语义都是根据上文而确定的，不会因为后面跟的内容不同而表现出不同的含义，因此在进行语法解析的时候，只需要一个栈结构，然后从前到后顺序解析即可，不会出现回溯的情况

并且因为 JSON 中没有函数、没有对象解构、没有变量，什么都没有，只有 {}、[]、""、, 几种确定的符号，以及 object、array、string、number、boolean、null 几种简单的数据类型，并且写法也较为简单单一，所以在解析的时候可以大大减少判断的次数

因此相比于 JavaScript 代码的解释来说，JSON 的解释就简单高效很多

 JSON 语法
 
 JavaScript语言中，一切都是对象。因此，任何JavaScript支持的类型都可以通过JSON来表示，例如字符串、数字、对象、数组等
 
 一个有效的JSON文档需要被包含在一对花括号内  { JSON-Data }
 
 1、它要求的语法格式：
 
   简单值
   
     字符串 => “123”
     数值 => 123
     布尔值 => true
     null
     
      注意：JSON 不支持 javascript 中的特殊值 undefined
     
   对象
   
     {"name": "helin",“age”: 12}
     
   数组
   
     [ {"name": "iskeeping","age": 12} ]
     
   注意：JSON的key一定要用双引号，以及value如果是字符串也一定要用双引号。 
   
 2、JSON 和 JavaScript 对象的关系：
 
 JSON 是 JavaScript 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串
 
 var obj = {a:'Hello', b: 'world'}; // 这是一个对象，注意键名是可以使用引号包裹的
var json = '{"a
" : "Hello", "b": "world"}'; // 这是一个 JSON 字符串，本质是 一个字符串

 3、JSON 和 JavaScript 对象互转
 
   JSON.parse()
 
   实现从 JSON 字符串转换为 JavaScript 对象
   
   var obj = JSON.parse('{"a": "Hello", "b": "World"}')
=> 结果是 {a: 'Hello', b: 'world'}

    补充  使用 eval 和 使用 Function
    
       eval("({\"name\":\"iskeeping\"})")
       
       new Function("", "return ({\"name\":\"iskeeping\"})")()

   JSON.stringify()
   
   实现 JavaScript 对象转换为 JSON 字符串
   
   var json = JSON.stringify({a: 'Hello', b: 'World'})
=> 结果是 '{"a": "Hello", "b": "World}'

序列化选项

JSON.stringify() 除了要序列化的对象外，还可以接受另外两个参数，这两个参数用于指定以下不同的方式序列化 javascript 对象

JSON.stringify() 方法可以通过参数控制输出的数据和格式，灵活应用它会大大提高我们的工作效率

1、过滤结果

const data = [
    {
        name: "person1",
        sex: 0,
        age: 18,
        isStudent: true
    },
    {
        name: "person2",
        sex: 1,
        age: 25,
        isStudent: false
    },
    {
        name: "person3",
        sex: 0,
        age: 15,
        isStudent: true
    }
]

只输出姓名和性别

const res = JSON.stringify(data, ["name", "sex"])
console.log(res);
// `[{"name":"person1","sex":0},{"name":"person2","sex":1},{"name":"person3","sex":0}]`

将性别转为中文字符

const res = JSON.stringify(data, (key, value) => {
    if (key == 'sex') {
        return ["女", '男'][value];
    }
    return value;
})
console.log(res);
// `[{"name":"person1","sex":"女","age":18,"isStudent":true},{"name":"person2","sex":"男","age":25,"isStudent":false},{"name":"person3","sex":"女","age":15,"isStudent":true}]`

2、字符串缩进

space 参数

const res = JSON.stringify(data, ["name", "sex"],4)
console.log(res);

这里使用了 4 个空格做为层级缩进

注意：使用 “\t” 得到的结果和使用 4 个空格得到的结果看起来很像，但实际不是一回事

JSON.parse(JSON.stringify(obj))深拷贝的问题

1、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后，时间对象变成了字符串。
2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象。
3、如果obj里有函数，undefined，则序列化的结果会把函数， undefined丢失。
4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null。
5、JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。
6、如果对象中存在循环引用的情况也无法正确实现深拷贝。

递归实现深拷贝

function copy (obj) {
    let newObj = null
    if (typeof obj === 'object' && obj !== null) {
    	newObj = obj instanceof Array ? [] : {}
        for (let i in obj) {
        	newObj[i] = typeof obj[i] === 'object' ? copy(obj[i]) : obj[i]
        }
    } else {
    	newObj = obj
    }
    return newObj
}

XML

扩展标记语言 (Extensible Markup Language, XML)

XML一度是互联网上存储和传输结构化数据的标准。DOM标准不仅是为了在浏览器中使用，而且还为了在桌面和服务器应用程序中处理XML数据结构，在没有DOM标准时，开发者常使用js编写自己的XML解析器

服务器端和客户端不同浏览器都需要花费大量代码来解析XML，客户端不同浏览器之间解析XML的方式不一致

浏览器对使用js处理XML实现及相关技术提供支持 :

DOMParser类型时简单的对象，可以将XML字符串解析为DOM文档
XMLSerializer类型将DOM文档解析为XML字符串

知识点

1、什么是 XML

XML 指可扩展标记语言（EXtensible Markup Language）
XML 是一种标记语言，很类似 HTML
XML 的设计宗旨是传输数据，而非显示数据
XML 标签没有被预定义。需要我们自行定义标签。
XML 被设计为具有自我描述性
XML 是 W3C 的推荐标准

2、XML 的主要作用
用来保存数据，而且这些数据具有自我描述性
它还可以做为项目或者模块的配置文件
还可以做为网络传输数据的格式(现在 JSON 为主)

3、XML 与 HTML

XML 不是 HTML 的替代。
XML 和 HTML 为不同的目的而设计：
XML 被设计为传输和存储数据，其焦点是数据的内容。
HTML 被设计用来显示数据，其焦点是数据的外观。
HTML 旨在显示信息，而 XML 旨在传输信息。
XML 标签对大小写敏感，而HTML标签对大小写不敏感，浏览器在解析HTML标签时会自动把其标签名转化为小写。

4、XML 属性
xml 的标签属性和 html 的标签属性是非常类似的，属性可以提供元素的额外信息 标签上可以书写属性: 一个标签上可以书写多个属性。每个属性的值必须使用 引号 引起来。

5、XML语法规则

所有 XML 元素都须有关闭标签(也就是闭合)
XML 标签对大小写敏感
XML 必须正确地嵌套
XML 文档必须有根元素
根元素就是顶级元素， 没有父标签的元素，叫顶级元素。
根元素是没有父标签的顶级元素，而且是唯一一个才行。
XML 的属性值须加引号
XML 中的特殊字符

<?xml version="1.0" encoding="UTF-8"?>
<!-- xml 声明 version 是版本的意思 encoding 是编码 -->
<students>
    <student id="001">
        <name>Mr.Yu</name>
        <age>21</age>
        <gender><![CDATA[<男>]]></gender>
    </student>

    <student id="002">
        <name>小明</name>
        <age>20</age>
        <gender><![CDATA[<男>]]></gender>
    </student>
</students>

E4X

E4X（ECMAScript for XML）是一种在ECMAScript（见ECMA-262，包括ActionScript、JavaScript等语言实现）标准的基础上加入的动态XML支持的程序语言扩展

E4X已被遗弃。在Firefox 17默认网页中已被禁用，Firefox 20浏览器默认禁用，并已在Firefox 21删除。官方推荐使用DOMParser / XMLSerializer或非jxon算法代替