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 相关文章推荐
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
详解Vue中watch的高级用法
May 02 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
JS原型与继承操作示例
May 09 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
详解JavaScript函数
2015/12/01 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
python Socket之客户端和服务端握手详解
2017/09/18 Python
python 日期操作类代码
2018/05/05 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
django settings.py 配置文件及介绍
2019/07/15 Python
tensorflow 模型权重导出实例
2020/01/24 Python
python程序输出无内容的解决方式
2020/04/09 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
大学生毕业自我鉴定范文
2013/11/03 职场文书
项目合作意向书范本
2014/04/01 职场文书
鲁迅故里导游词
2015/02/05 职场文书
会议简报格式范文
2015/07/20 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
四年级作文之植物
2019/09/20 职场文书