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控制iframe滚动的代码
Apr 10 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
vue实现分页组件
Jun 16 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
星际争霸中的热键
2020/03/04 星际争霸
php session 检测和注销
2009/03/16 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP中Array相关函数简介
2016/07/03 PHP
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
javascript History对象原理解析
2020/02/17 Javascript
Python的时间模块datetime详解
2017/04/17 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python之循环结构
2019/01/15 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
团购业务员岗位职责
2014/03/15 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2014年技术部工作总结
2014/12/12 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
海底两万里读书笔记
2015/06/26 职场文书