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 相关文章推荐
JavaScript单元测试ABC
Apr 12 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
微信小程序实现页面浮动导航
Jan 08 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
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python requests 使用快速入门
2017/08/31 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
python基于property()函数定义属性
2020/01/22 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
实用求职信范文分享
2013/12/25 职场文书
毕业生自荐书模版
2014/01/04 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
2014年冬季防火方案
2014/05/21 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
研讨会致辞
2015/07/31 职场文书