JSON 数据详解及实例代码分析


Posted in Javascript onJanuary 20, 2017

 JSON 数据详解

一、json值的类型

1.简单值: 可以表示字符串,数值,布尔值,null不支持undefined(json的数值表示: 2 )

2.对象: 一组有序的键值对,每个键值对的值可以是简单值,也可以是复杂数据类型。(json的字符串:“hello world”)。json字符串与JavaScript字符串的区别,json必须用双引号。

3.数组:一组有序值的列表,数组的值可以是简单值,也可以是复杂数据类型。

不支持变量,函数,以及对象实例

二、json对象与javascript对象

区别:

//javascript对象
   var obj = {
    name: "liu",
    age: 33,
   };


   // json对象
   {
    "name": "liu",
    "age": 33,
   }
  • 没有声明变量(json中没有变量的说法)
  • 没有末尾分号()
  • json中属性也要加双引号

三、字符串与json对象转换

1、JSON.parse()。parse把字符串解析成原生javascript值(javascript对象);每个属性名都必须用双引号

var str = '{"name":"huangxiaojian","age":"23"}';
console.log(JSON.parse(str)); //Object { name: "huangxiaojian", age: "23" }

接收另一个参数,为区别JSON.stringify()的过滤函数(过滤器), 因而叫还原函数。如下:

var book = {
     title: "hello",
     author: [ "apple" ],
     year: 300,
     releaseDate: new Date(2016)
    };

    var jsonText = JSON.stringify( book )
    var bookCopy = JSON.parse( jsonText, function( key, value ) {
     if (key == "releaseDate" ) {
      return new Date( value );
     } else {
      return value;
     }
    } );
    console.log( bookCopy.releaseDate.getFullYear() );

以上代码book对象,有个releaseDate属性,保存Date对象,经过序列化后变成有效的JSON数据字符串,然后经过解析又在bookCopy中还原为一个Date对象,当遇到releaseDate键值时,会基于相应的值创建一个新的Date对象,结果就是bookCopy.releaseDate属性中保存一个新的Date对象。

2、JSON.stringify( object, selector, retract ) 对象,过滤器(数组或函数),保留缩进。

JSON.stringify()把json对象序列化为字符串。(忽略函数、原型)

var a = {a:1,b:2};
console.log(JSON.stringify(a)); //{"a":1,"b":2}不包含任何空格字符或缩进

3、JSON.stringify()第二个参数,过滤器为数组

过滤器:可以使数组(如果是数组,就把数组中有的属性保留),也可以是函数(如果是函数,传两个参数:属性和属性值)。

var person = {
 name: "liu",
 age: 33,
 eat: [ "apple" ],
 sex: "man"
}
var jsonText = JSON.stringify( person, ["eat", "age" ] )
console.log( jsonText ) //{"eat":["apple"],"age":33}

4、JSON.stringify()第二个参数为函数

函数:函数的两个参数()。switch中参数是属性名(必须字符串)。如果是undefined则忽略属性,(这个value参数是整个序列化后的对象)

特别注意,value在《javascript高级程序设计第三版》中表述和我的不同。可能是我的理解有问题,但是我测试了,结果也是序列化后的值。谁能解决了可以告诉我。(page:566~567)

var person = {
   "name": "liu",
   "age": 33,
   "eat": [ "apple" ],
   "sex": "man"
  }
  var jsonText = JSON.stringify( person, function( key, value ) {
   // console.log( value )
   switch("eat") {
    case "eat":
    return [3,4,5,5,5].join(",");
    case "age":
    return 33;
    case "sex":
    return undefined;
    default:
    return value;            
   }
  } )
  console.log( jsonText ) //"3,4,5,5,5"

5、缩进,最大缩进为10。超过10 会转换为10

var person = {
   "name": "liu",
   "age": 33,
   "eat": [ "apple" ],
   "sex": "man"
  }
  var jsonText = JSON.stringify( person, null, 4 ) 
  console.log( jsonText )


/////////////////////////结果,带有格式////////////////////
{
 "name": "liu",
 "age": 33,
 "eat": [
  "apple"
 ],
 "sex": "man"
}

 

  //特别的缩进方式
  var jsonText = JSON.stringify( person, null, "---" ) 
  console.log( jsonText )
/////////////////////////结果,带有格式////////////////////
{
---"name": "liu",
---"age": 33,
---"eat": [
------"apple"
---],
---"sex": "man"
}

6、toJSON()方法,返回自身的json数据格式。

var date = new Date()
  console.log( date.toJSON() ) 

 //person自身没有json数据格式,这是错的。
  var person = {
   "name": "liu",
   "age": 33,
   "eat": [ "apple" ],
   "sex": "man"
  }
console.log( person.toJSON() )

7、为对象添加toJSON()方法,返回字符串则是字符串格式,对象则是对象格式,单个数值就是数值格式。

var person = {
     "name": "liu",
     "age": 33,
     "eat": [ "apple" ],
     "sex": "man",
     "toJSON": function () {
      return this.age
     }
    }
    console.log( person.toJSON() ) // 33

toJSON()可以做过滤器补充

8、假设一个对象传入JSON.stringify(),序列化该对象的顺序

  1. 存在toJSON()方法,且能获取有效值,则调用该方法,否则按默认顺序序列化。
  2. 如果提供了第二个参数,应用这个函数过滤器,传入函数过滤器的值是第1步的返回值。
  3. 对第2步返回的每个值进行序列化。
  4. 如果提供了第三个参数,执行相应的格式化。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
vue引用外部JS的两种种方法
Jan 28 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 #Javascript
bootstrap中的 form表单属性role="form"的作用详解
Jan 20 #Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 #Javascript
关于AngularJs数据的本地存储详解
Jan 20 #Javascript
html5 canvas 详细使用教程
Jan 20 #Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 #Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 #Javascript
You might like
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python 编程速成(推荐)
2019/04/15 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
企业厂长岗位职责
2013/12/17 职场文书
晚宴邀请函范文
2014/01/15 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2014年团支书工作总结
2014/11/14 职场文书
电话营销开场白
2015/05/29 职场文书
教师节获奖感言
2015/07/31 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python