JSON （数据操作）

• 语法

• JSON 值可以是：
      - 数字（整数或浮点数）
      - 字符串（在双引号中）
      - 逻辑值（true 或 false）
      - 数组（在中括号中）
      - 对象（在大括号中）
      - null
• 书写格式
      名称/值对（例如："name":"yyy"）

• 对象操作

  - 在访问对象时可以通过（./[]）获取到对象的值以及改变对象的值；
  - 在遍历对象时使用for in进行循环，在循环中不能使用(.)获取属性值必须用（[ ] )访问对象值
  - 使用delete可以删除对象属性

<div class="content" style="margin-bottom: 10px"></div>
    <button id="btn_recover">点击显示信息</button>
    <button id="btn_change">点击修改信息</button>
    <button id="btn_delete">点击删除信息</button>

    <script>
        var myObj = {"name":"hyq","age":3,"sex":"girl"};
        var content = document.getElementsByClassName("content")[0];

        //显示对象的内容
        document.getElementById("btn_recover").onclick = () => {
          for (x in myObj){
              content.innerHTML += x + ":" + myObj[x]+"<br\>";
          }
        };
        //修改对象内容
        document.getElementById("btn_change").onclick = () => {
            myObj.name = "hyy";
            content.innerHTML = "";
            for (x in myObj){
                content.innerHTML += x + ":" + myObj[x]+"<br\>";
            }
        };
        //删除对象内容
        document.getElementById("btn_delete").onclick = () => {
            delete myObj.name;
            content.innerHTML = "";
            for (x in myObj){
                content.innerHTML += x + ":" + myObj[x]+"<br\>";
            }
        }
    </script>

 

• 数组操作

   与对象操作类似，数组主要在中括号中书写

  

• JSON.parse

将数据转换为javascript对象

• 语法：

 JSON.parse(text[, reviver])

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

• JSON中不存储Date对象，可以先将其转换为字符串之后再转换为Date对象

var txt = "{"name":"hyq","time":"2017-11-08-10:20"}";
var obj = JSON.parse(txt);
obj.time = new Date(obj.time);

• 使用第二个参数，使得每个成员调用该函数

var txt = "{"name":"hyq","time":"2017-11-08-10:20"}";
var obj = JSON.parse(txt,function(key,value){
  if(key ==="time"){
    return new Date（value）;
  }
else{
    return value;
  }
});

• JSON不允许包含函数，可以先将函数转换为字符串在使用时再转换为函数

<div style="width: 500px;height: 500px;margin: 0 auto">
    <div> 姓名：<span id="name">XXX</span></div>
    <div> 年龄：<span id="age">XXX</span></div>
    <div> 性别：<span id="sex">XXX</span></div>
    <div style="margin-bottom: 10px"> 性别：<span id="score">XXX</span></div>
    <button id="btn">点击改变信息</button>
</div>

<script>
   document.getElementById("btn").onclick =() => {
        var xmlHTTP;

        if (window.XMLHttpRequest){
            xmlHTTP = new XMLHttpRequest();
        }
        else{
            xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlHTTP.onreadystatechange =  () => {

            if (xmlHTTP.readyState === 4&&xmlHTTP.status === 200){
                myObj = JSON.parse(xmlHTTP.responseText);
                myObj.calculate=eval("("+myObj.calculate+")");
                document.getElementById("name").innerHTML = myObj.name;
                document.getElementById("age").innerHTML = myObj.age;
                document.getElementById("sex").innerHTML = myObj.sex;
                document.getElementById("score").innerHTML = myObj.calculate(myObj.Math,myObj.English,myObj.Chinese);

            }
        };
       xmlHTTP.open("GET","/code/project/json/test/aaa.txt",true);
       xmlHTTP.send();
    }
</script>

 

• JSON.stringfify()

将javascript对象、数组转换为字符串

• 语法：

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

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

• 解析数据

JSON不能存储日期，而stringify可以将全部日期转换为字符串

 var myJson = JSON.stringify(myObj);
        document.getElementById("example_1").innerHTML = myJson;

Date 对象的处理

• 解析函数

JSON不允许包含函数，stingify会删除函数（包括key和value）,必须在stringify前将函数转换为字符串

 var myJson_2 = JSON.stringify(myObj);
        document.getElementById("example_3").innerHTML = myJson_2;