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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
JavaScript继承方式实例
Oct 29 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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代码包装修正版
2008/03/15 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP精确计算功能示例
2016/11/29 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
静态的动态续篇之来点XML
2006/12/23 Javascript
AutoSave/自动存储功能实现
2007/03/24 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
初步解析Python下的多进程编程
2015/04/28 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
python实现粒子群算法
2020/10/15 Python
英语系毕业生自荐信
2013/10/31 职场文书
工程质量月活动方案
2014/02/19 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2014年班组长工作总结
2014/11/20 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书