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实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
移动web开发之touch事件实例详解
Jan 17 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
微信小程序实现简单购物车功能
Dec 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
社区(php&&mysql)五
2006/10/09 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
pycharm安装和首次使用教程
2018/08/27 Python
python的concat等多种用法详解
2018/11/28 Python
Python跳出多重循环的方法示例
2019/07/03 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
异步传递消息系统的作用
2016/05/01 面试题
幼儿园三八妇女节活动方案
2014/03/11 职场文书
2014全国两会心得体会
2014/03/17 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
肖申克救赎观后感
2015/06/02 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python