JSON-1 【JSON基础与数据解析、JSON方法】

一、JSON基础与数据解析

（1）JSON基础

概念

JSON(JavaScript Object Notation)即:JavaScript对象表达方式

JSON数据是一个对象，而这个对象里面是没有方法的

JSON是轻量级的数据交互格式

用途

数据交互

特点

轻量

JSON数据

var jsonData = {
    "a":1,
    "b":2,
    "c":3
}

所有编程语言都离不开的三大数据类型

1. scaler 标量 = 字符串和数字
2. sequence 序列 = 数组和列表
3. mapping 映射 = 键值对

JSON就是利用这种映射关系形成了一种轻量级的数据交互格式

书写格式

1. 映射用冒号隔开：
   “name”: “张三”
2. 并列数据用逗号隔开：
   “name”: “张三”,
   “age”: 18
3. 映射集合用{}包裹：
   {
       “name”: “张三”,
       “age”: 18
   }
4. 键名一定要用双引号
5. 并列数据集合用[]包裹：
   [
       {
           “name”: “张三”,
           “age”: 18
       },
       {
           “name”: “李四”,
           “age”: 25
       }
   ]

（2）数据解析

JSON的由来

早期的数据交互是用XML来做的，但由于数据文档很大、不易读、解析比较复杂，所以后面被JSON给替代了

二、JSON方法

（1）parse()

作用

把JSON字符串转化成JSON对象

<div data-info='{"name":"张三","age":"25"}'></div>
<script>
    var oDiv = document.getElementsByTagName('div')[0],
        info = oDiv.getAttribute('data-info'),
        jsonData = JSON.parse(info);
    console.log(jsonData);//{name: "张三", age: "25"}
</script>

注意：JSON字符串一定是外单里双，字符串外层单引号，内层属性双引号，否则会报错！

（2）stringify()

作用

将对象转化成JSON字符串

<div></div>
<script>
    var oDiv = document.getElementsByTagName('div')[0],
        obj = { name: '李四', age: 18 },
        str = JSON.stringify(obj);
    oDiv.setAttribute('data-info', str)
    console.log(oDiv);
    //<div data-info="{"name":"李四","age":18}"></div>
</script>

三、作业

用dom写成模块化动态渲染到html里面