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----文件操作
Jan 18 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
vue中锚点的三种方法
Jul 06 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
JS数组属性去重并校验重复数据
2020/01/10 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
新闻网站实习自我鉴定
2013/09/25 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
小组合作学习反思
2014/02/18 职场文书
总经理的岗位职责
2014/02/23 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
运动会演讲稿50字
2014/08/25 职场文书
医学生自荐信范文
2015/03/05 职场文书
提档介绍信范文
2015/10/22 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python