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中获取请求的URL参数
Dec 22 Javascript
js 金额文本框实现代码
Feb 14 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 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三元运算符的结合性介绍
2012/01/10 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
react 生命周期实例分析
2020/05/18 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
python画折线图的程序
2018/07/26 Python
详解Python3注释知识点
2019/02/19 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
一套PHP的笔试题
2013/05/31 面试题
行政前台岗位职责
2013/12/04 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
大学运动会入场词
2014/02/22 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
教师师德工作总结2015
2015/07/22 职场文书
创业计划书之面包店
2019/09/17 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
k-means & DBSCAN 总结
2021/04/27 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript