【重温基础】16.JSON对象介绍

本文是 重温基础 系列文章的第十六篇。今日感受：静。 系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)【重温基础】1-14篇【重温基础】15.JS对象介绍本章节复习的是JS中的关于JSON对象相关知识。 前置知识： JSON是一种按照JavaScript对象语法的数据格式。1.概念概念有三点：JSON全称JavaScript 对象表示法（JavaScript Object Notation）。 JSON 是存储和交换文本信息的语法。类似 XML。 JSON 比 XML 更小、更快，更易解析。 ———— 摘自 W3school JSON教程JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。2.语法JSON在使用过程中可作为一个对象或者字符串存在，当作为对象时，用于获取JSON中的数据，而作为字符串时常用于网络数据传输。 JSON语法规则：数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组通常，JSON数据书写格式是名称/键值：“name” : “pingan"而JSON的值可以是 ：数字（整数或浮点数）字符串（在双引号中）逻辑值（true 或 false）数组（在方括号中）对象（在花括号中）nullJSON常常有三种类型： 三种类型：简单之，对象和数组。 必须注意：JSON字符串必须是双引号，单引号会语法错误。2.1 简单值简单值可以是字符串:“hello leo!“也可以是数字,逻辑值：12.2 对象类型内容放在花括号内，是多个键值对。 JSON对象 与 js 对象的三个区别：JSON对象 必须加双引号，而 js 对象属性名可以不加双引号。JSON对象 没有变量声明，而 js 对象有。JSON对象 没有分号，而 js 对象有。// js 对象var obj = { name : “pingan”, age : “25”,};// json 对象{ “name” : “pingan”, “age” : “25”, “box” : [ “a”,“b”,“c” ]}2.3 数组类型内容放在方括号内。 JSON数组也没有分号和变量，常常可以把JSON数组和对象结合使用，构成更复杂的数据集合。[ { “name” : “leo”, “age” : 25, “box” : [“a”,“b”,“c”] }, { “name” : “pingan”, “age” : 25, “box” : [“a”,“b”,“c”] }]3. 使用JSON最常见的用法就是，从服务端获取JSON数据，再将JSON数据转成JavaScrip对象使用。 JSON对象有两个方法：JSON.stringify()： 序列化操作，将JavaScript对象转换成JSON字符串。JSON.prase()：反序列化操作，将JSON字符串解析成JavaScript值。3.1 序列化操作序列化操作常常使用JSON.stringify()。 简单例子:let leo = { name : “leo”, age : 25, box : [“a”,“b”,“c”]}let pingan = JSON.stringify(leo);console.log(pingan); // “{“name”:“leo”,“age”:25,“box”:[“a”,“b”,“c”]}“注意：默认情况下，JSON.stringify()输出的JSON字符串不包含任何空格字符或缩进，因此结果就像上面那样。序列化JavaScript对象时，所有函数及原型成员都会被忽略，不体现在结果上。值为undefined的任何属性都会被跳过。因此，最终的值都是有效的JSON数据类型的实例属性。3.2 反序列化操作序列化操作常常使用JSON.parse()。 简单例子：let copyPingan = JSON.parse(pingan);copyPingan; // {name: “leo”, age: 25, box: Array(3)}如果传入JSON.parse()的字符串不是有效的JSON，则会抛出错误。 注意： 虽然pingan和copyPingan属性相同，但两者独立，没有任何关系。4.序列化选项JSON.stringify()除了要传入序列化对象作为参数，还可以接收其他两个参数，用来指定序列化JavaScript对象的方式：过滤器：可以是个数组，也可以是个函数。选项：表示是否在JSON字符串中保留缩进。单独或组合使用两者，可以更加全面深入的控制JSON的序列化。4.1 过滤器若过滤器的参数是数组，则JSON.stringify()返回的结果将只包含数组中的属性：var leo = { name : “leo”, age : 25, box : [“a”,“b”,“c”]}var pingan = JSON.stringify(leo,[“name”,“age”]);console.log(pingan); // “{“name”:“leo”,“age”:25}“若过滤器的参数是函数，则情况就不一样了，传入的函数需有两个参数（属性名和属性值）：var leo = { “name” : “leo”, “age” : 25, “box” : [“a”,“b”,“c”]}var pingan = JSON.stringify(leo,function(key, value){ switch(key){ case “name”: return “我叫” + value case “age”: return value + “岁” default: return value }});console.log(pingan); // “{“name”:“我叫leo”,“age”:“25岁”,“box”:[“a”,“b”,“c”]}“注意：使用switch的时候，必须指定default否则会返回undefined。4.2 选项JSON.stringify()第三个参数是个选项，控制结果中的缩进和空白符。若选项只有一个值，则表示每个级别缩进的空格数，最大值为10，超过10则只会是10。var leo = { “name” : “leo”, “age” : 25, “box” : [“a”,“b”,“c”]}var pingan = JSON.stringify(leo, null, 4);console.log(pingan);/”{ “name”: “leo”, “age”: 25, “box”: [ “a”, “b”, “c” ]}”/5.解析选项JSON.parse()可以接收一个函数作为参数，对每个键值对调用，为了跟JSON.stringify()的过滤函数区别，这个函数成为还原函数。若还原函数返回undefined，则表示要从结果中删除对应的键。若还原函数返回其他值，则将该值插入结果中。还原函数接收两个参数：属性名和属性值。 举例，在日期字符串转换为Date对象中，经常要用到还原函数：var leo = { “name” : “leo”, “age” : 25, “date” : new Date(1993, 9, 9)}var pingan = JSON.stringify(leo);var copy = JSON.parse(pingan,function (key, value){ // return key == “date” ? new Date(value) : value; if(key == “date”){ return new Date(value); }else{ return value; }})console.log(copy);// “{“name”:“leo”,“age”:25,“date”:“1993-10-08T16:00:00.000Z”}“参考文章：W3school JSON教程《JavaScrip高级程序设计》本部分内容到这结束Author王平安E-mailpingan8787@qq.com博 客www.pingan8787.com微 信pingan8787每日文章推荐https://github.com/pingan8787…JS小册js.pingan8787.com