简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > List of blog posts > JSON基础，语法、对象、数据类型、JS序列化
Blogger Information
Blog 28
fans 0
comment 0
visits 25400
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JSON基础，语法、对象、数据类型、JS序列化
，多思曩惜，
Original
628 people have browsed it

JSON 基础

1. JSON 是什么

  • JSON: JavaScript Object Notation(JS 对象表示法)
  • JSON: 2006 年成为国际标准,并成为表示结构化数据的通用的格式
  • JSON 借用了JS 对象字面量的语法规则,但并非 JS 对象,也并非只是 JS 才用 JSON
  • JSON 独立于任何编程语言, 几乎所有编程语言都提供了访问 JSON 数据的 API 接口
  • 尽管 JSON 与 JS 并无直接关系,但 JSON 在 JS 代码中应用最广泛

2. JSON 语法

JOSN 支持三种数据类型: 简单值, 对象, 数组

2.1 简单值

  • 数值: 150, 3.24
  • 字符串: "Hello World!",必须使用双引号做为定界符
  • 布尔值: true, false
  • 空值: null

注意: 不支持undefined

  1. <script>
  2.     // JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等
  3.        var grade= 89; //数值
  4.        var username = "admin"; //字符串
  5.        var flag =false; //布尔值
  6.        var cars = ["bmw","byd","PORcshe"]; //数组
  7.        var x = { //对象
  8.            name :"xiaoming",
  9.            age : "58",
  10.        }
  11.        console.log(typeof grade,typeof username ,typeof flag,typeof cars,typeof x);
  12.     </script>

  • 特殊类型：null，undefined；

  1.  var  role;
  2.         var role = undefined;
  3.         console.log(role);
  4.         var title =null;
  5.         console.log(title);
  6.         // null,undefined 都有空/无得意义
  7.         console.log(null ==undefined);
  8.         // null表示空对象
  9.         // undefined专用于表示对象类型变量的空/无
  10.         console.log(typeof null);
  11.         if(!null) console.log(null + "无")
  12.         if(!undefined) console.log(undefined + "无")
  13.         console.log(null+100);  // null --->0
  14.         console.log(undefined +100); //undefined ----->NaN

  • 数组类型

  1.        username = 'adimin';
  2.         // js的数组 与 php类似
  3.         var fruits = ['waterwelon','apple','orange','peach','pear']
  4.         console.log(fruits); 
  5.         console.log(fruits.length); //返回5
  6.         console.log(fruits[1]);  // 返回apple
  7.         console.log(typeof fruits);  //返回object
  8.         // 正确判断是否数组类型
  9.         console.log(Array.isArray(fruits)); //返回ture
  10.         // 遍历一个数组
  11.         for(var i =0 ;i<fruits.length;i++){
  12.             console.log(fruits[i]);
  13.         }
  14.         console.log("------------------")
  15.         fruits.forEach(function(item,index,array){
  16.             console.log(item);
  17.             document.body.innerHTML += "<li> " + item +"</li>";
  18.         })
  19.         // php中获取数组部分元素slice(),js也有
  20.         console.log(fruits.slice(0,3)); //["waterwelon", "apple", "orange"]
  21.         console.log(fruits.slice(0)); //["waterwelon", "apple", "orange", "peach", "pear"]
  • 数组中的插入，替换，删除
  1.    var fruits = ['waterwelon','apple','orange','peach','pear'];
  2.         console.log(fruits); //["waterwelon", "apple", "orange", "peach", "pear"]
  3.         // php中，splice()，可以实现数组插入，替换，删除
  4.         fruits.splice(1,0,"mango","cuke");
  5.         console.log(fruits); // ["waterwelon", "mango", "cuke", "apple", "orange", "peach", "pear"]
  6.         fruits.splice(1,2,"芒果","黄瓜");
  7.         console.log(fruits); //["waterwelon", "芒果", "黄瓜", "apple", "orange", "peach", "pear"]
  8.         var res = fruits.splice(1,2);
  9.         console.log(res); // ["芒果", "黄瓜"]
  10.         console.log(fruits); //["waterwelon", "apple", "orange", "peach", "pear"]

1.3对象

  1. //    对象，js中的数组类似php中的索引数组，js中对象也类似于php中的：关联数组
  2.     var student ={
  3.         id :1,
  4.         name: 'xiaoming',
  5.         email : 'admin@qq.com',
  6.         "test scroe" :{
  7.             php :22,
  8.             html: 22,
  9.             js:33,
  10.         }
  11.     }
  12.     console.log(student);
  13.     // 使用表格查看
  14.     console.table(student);
  15.     // 访问对象成员、属性，使用点操作符.
  16.     console.log(student.email);
  17.     console.log(student["test scroe"]);
  18.     console.log(student["test scroe"]["php"]);
  19.     console.log("-------------------");
  20.     // 遍历
  21.      /* for (对象的键名 in 对象){
  22.          对象[键名]
  23.      } */
  24.     for ( key in student )
  25.     {
  26.         console.table(student[key]);
  27.     }
  28.     // 接祖数组中的forEach进行遍历
  29.     console.log("-------------------");
  30.     var keys= Object.keys(student);
  31.     console.log(keys);
  32.     keys.forEach(function (item,index ,arr){
  33.         console.log(this[item]);
  34.     },student);

1.4函数

  1.   // 函数
  2.     function f1(a,b){
  3.         console.log(a + " + " + b +" = " , a+b );
  4.     }
  5.     f1(2,2);
  6.     // 匿名函数
  7.      var f2 = function f2(a,b){
  8.         console.log(a + " + " + b +" = " , a+b );
  9.     }
  10.     f2(7,2);
  11.     //立即调用
  12.     (function f1(a,b){
  13.         console.log(a + " + " + b +" = " , a+b );
  14.     })(10,20);

流程控制

  1. <body> 
  2.     <ul>
  3.         <li>item1</li>
  4.         <li>item2</li>
  5.         <li>item3</li>
  6.     </ul>
  7.     <ul>
  8.         <li>item1</li>
  9.         <li>item2</li>
  10.         <li>item3</li>
  11.     </ul>
  12.     <ul>
  13.         <li>item1</li>
  14.         <li>item2</li>
  15.         <li>item3</li>
  16.     </ul>
  17.     <script>
  18.         // 1.分支
  19.         // 单分支
  20.         var age = 20;
  21.         if(age <= 30) console.log("年轻" +age );
  22.         // 双分支
  23.         if(age <= 30) console.log("年轻" +age );
  24.         else console.log("中年了"+age );
  25.         // 多分支
  26.         var age = 30;
  27.         if(age >=0 && age <= 30) console.log("年轻" +age );
  28.         else if (age >30 && age <=50 ) console.log("中年了"+age );
  29.         else if (age >50 && age <=70 ) console.log("老年了"+age );
  30.         else console.log("不知多少年了"+age );
  31.         // switch
  32.         switch(true){
  33.             case age >=0 && age <= 30:
  34.                 console.log("年轻" +age )
  35.             break;
  36.             case age >30 && age <=50 :
  37.                 console.log("中年了"+age );
  38.             break;
  40.             case age >50 && age <=70 :
  41.                 console.log("老年了"+age );
  42.             break;
  43.             default:
  44.             console.log("不知多少年了"+age );
  45.             break;
  46.         }
  47.         // 循环
  48.         var items = document.querySelectorAll("ul:first-of-type li");
  49.         for(var i = 0; i< items.length; i++){
  50.             items[i].style.color="red";
  51.         };
  52.         // while
  53.         var items = document.querySelectorAll("ul:last-of-type li");
  54.         var i =0 
  55.         while(i< items.length){
  56.             items[i].style.color="blue";
  57.             i++;
  58.         };
  59.         // do  while
  60.         var items = document.querySelectorAll("ul:nth-of-type(2) li");
  61.         var i =0 
  62.         do {
  63.             items[i].style.color="yellow"
  64.             i++;
  65.         }
  66.         while(i< items.length);
  68.     </script>
  69. </body>

2.2 对象

2.2.1 原生 JS 对象字面量

  1. // 原生JS对象字面量
  2. var person = {
  3.     name: 'Peter Zhu',
  4.     age: 29
  5. };
  7. // 等价语法
  8. var person = {
  9.     "name": "Peter Zhu",
  10.     "age": 29
  11. };
  13. // 以上内容用JSON对象表示
  14. {
  15.    "name": "Peter Zhu",
  16.     "age": 29
  17. }
  19. // JSON对象与它相比有二处不同
  20. // 1. 没有变量声明: JSON中没有变量概念
  21. // 2. 没有分号: 因为JSON不是JS语句
  22. // 3. 属性名: 任何时候都必须添加双引号, 且必须是双引号
  24. // JSON属性值也支持复杂类型,如对象
  25. {
  26.    "name": "Peter Zhu",
  27.     "age": 29,
  28.     "course": {
  29.         "name": "JavaScript",
  30.         "grade": 99
  31.     }
  32. }

2.3 数组

JSON 数组采用了原生 JS 中的数组字面量语法

  1. // 原生JS数组
  2. var product = [101, "电脑", 9800];
  4. // JSON表示: 无变量和分号
  5. [101, "电脑", 9800][
  6.   // 最常见场景是将数组与对象组合表示更加复杂的数据类型
  7.   ({
  8.     id: 101,
  9.     name: "电脑",
  10.     price: 9800,
  11.   },
  12.   {
  13.     id: 102,
  14.     name: "手机",
  15.     price: 4500,
  16.   },
  17.   {
  18.     id: 103,
  19.     name: "相机",
  20.     price: 16800,
  21.   })
  22. ];
  23. // 许多软件的配置文件都是采用这种数据格式,如VSCODE

3. JSON 解析与序列化

JSON 来源于 JS 对象,所以 JSON 下 JS 对象之间的转换非常方便

3.1 JSON 对象

  • ES5 提供了内置全局对象JSON,对 JSON 数据提供了全面支持
  • JSON.stringify(): 将原生 JS 对象,序列化为 JSON 字符串,用于存储与传输
  • JSON.parse(): 将 JSON 字符串,解析为原生 JS 对象

3.1.1 JS 对象序列化为 JSON

  • JSON.stringify(js对象,允许序列化的属性, 缩进字符数量)
  1.  var person = {
  2.           name : "xiaoming",
  3.           age : 29,
  4.           ismarried : true,
  5.         course :{
  6.             name : "JS",
  7.             grade :66,
  8.         },
  9.         getName :function (){
  10.             return this.name;
  11.         },
  12.         habby:undefined,
  13.         tostring :function (){
  14.             return "继承属性";
  15.         },
  16.       };
  17.       // 1, 方法, 2,值为undefined的成员没有, 3, 原型对象成员也没有了
  18.        // 将js对象  ===>  序列化为json字符串
  20.       // 第二参数如果是数组,可以限制允许序列化的属性
  21.       var jsonStr = JSON.stringify(person);
  22.       console.log(jsonStr);
  23.       var jsonStr = JSON.stringify(person,["name","age"]);
  24.       console.log(jsonStr);
  25.       console.log(typeof jsonStr);
  26.       // 第二参数不是数组,是函数
  27.       var jsonStr = JSON.stringify(person,function(key,value)
  28.       {
  29.           switch(key){
  30.                 case 'age':
  31.                   return '不知道';
  32.                 break;
  33.                 case 'ismarried':
  34.                   return '我不知道';
  35.                 break; 
  36.                 default :
  37.                 return value;
  38.           }
  40.       });
  41.       console.log(jsonStr);
  42.       var jsonStr = JSON.stringify(person,function(key,value)
  43.       {
  44.           switch(key){
  45.                 case 'age':
  46.                   return '不知道';
  47.                 break;
  48.                 case 'ismarried':
  49.                   return '我不知道';
  50.                 break; 
  51.                 default :
  52.                 return value;
  53.           }
  55.       },"----------"
  56.       );
  57.       console.log(jsonStr);

总结

  • JSON的语法，简单值（数值，字符串，布尔值，空值）
  • JS数组常见场景是将数组与对象组合表示更加复杂的数据类型
  • JSON对象与JS原生相比不同，JS对象序列化为 JSON
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：一定要明白, 前后端交互的任何数据 , 都是字符串, 为什么有数据类型?是因为解释不同
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

  • Back top