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 01 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
原生js实现自定义滚动条组件
Jan 20 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加密解密函数authcode的用法详细解析
2013/10/28 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
js style动态设置table高度
2014/10/21 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python中pillow知识点学习
2018/04/30 Python
python中的变量如何开辟内存
2018/06/26 Python
Python如何实现动态数组
2019/11/02 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
英文简历中的自我评价
2013/10/06 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
服务承诺书
2015/01/19 职场文书
财政局个人年终总结
2015/03/03 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL