JSON

JSON是甚麽

JSON是前後两端传输数据的一种比较轻量的格式

JSON的结构长怎样

JSON分为两种结构：对象、数组

• 对象用

{'key1':value1,'key2':value2,'key3':value3}

• 数组用

[a,b,c]

JSON.parse(的两个变数)

  var jsonText='{"employees":[{"name":"小A","birth":"2021-09-24"},\
                   {"name":"小B","birth":"2021-08-24"}]}'  
 var jsonObj = JSON.parse(jsonText,(key,value)=>{
     if(key=="birth"){
        return new Date(value);
     }
     else{
         return value
     }
 })
 
console.log(jsonObj.employees)
console.log(jsonObj.employees[1].birth)

• JSON.parse第一个变数放的是，用JSON格式写的数据
  这些数据，经过JSON.parse会转换成object物件
• JSON.parse第二个变数放的是，放转换结果的function
  上面的例子，是把birth这个字串格式的object转换成date格式的object

下面使用一下之前讲过的 arrow function，让程序更简洁

 var jsonObj = JSON.parse(jsonText,(key,value)=>{if(key=="birth")return new Date(value);else return value})

几个写JSON我踩过的小坑

• JSON要整包用引号""括起来
• JS字串直接换行会出错，可以用反斜线\
• JSON.parse第二个参数function如果要写，就一定要写else return value，没写会出错der

实战吧

<p id="demo" style="font-size: 30px;">demo</p>
    <script>
        //整个object框起来当作字串
        var jsonText='{"employees":[{"name":"小A","age":20},{"name":"小B","age":21},{"name":"小C","age":22}],\
        "boss":[{"name":"大A","age":30},{"name":"大B","age":31}]}';
        //反斜线是为了换行
        jobj=JSON.parse(jsonText);
        console.log(jobj);
        console.log(jobj.employees);
        console.log(jobj.boss);
        for(let i=0;i<jobj.boss.length;i++){
            console.log(jobj.boss[i].name);
        }    
        var demo =document.getElementById("demo");
        var frag=0;
        demo.onmouseover =()=>{
            demo.style.color="";
            if(frag==0){
                demo.innerHTML=jobj.boss[0].name;
                frag=1;
            }else if(frag==1){
                demo.innerHTML = jobj.boss[1].name;
                frag=0;
            }            
        }
        demo.onmouseleave =()=>{
            demo.innerHTML="不告诉你 boss是谁"
            demo.style.color="pink";
        }
    </script>