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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
javascript修改图片src的方法
Jan 27 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
VSCode搭建React Native环境
May 07 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/06/29 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
基于jQuery选择器的整理集合
2013/04/26 Javascript
js验证上传图片的方法
2015/05/12 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
python 不关闭控制台的实现方法
2011/10/23 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Django框架中方法的访问和查找
2015/07/15 Python
利用Python爬取可用的代理IP
2016/08/18 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python opencv之SURF算法示例
2018/02/24 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
基于python实现高速视频传输程序
2019/05/05 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
Python实现手势识别
2020/10/21 Python
农民入党思想汇报
2014/01/03 职场文书
2014年体育工作总结
2014/11/24 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
《颐和园》教学反思
2016/02/19 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
详解Vue的列表渲染
2021/11/20 Vue.js
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android