JSON与js对象序列化实例详解


Posted in Javascript onMarch 16, 2017

本文实例讲述了JSON与js对象序列化。分享给大家供大家参考,具体如下:

JavaScript对象表示法(JavaScript Object Notation,简称JSON)是一种轻量级的数据交换格式,它基于js字面量表示法,是js的一个子集。虽然是一个js的子集但是他与语言无关,它可以用于在现在所有的编程语言编写的应用程序之间进行数据交换。是一种文本格式,比较容易读写。

JSON是一个容纳“名/值”对的无序集合,名字可以是任意字符串,值可以使任意的JSON类型的值。大多数编程语言都有被映射为JSON的数据类型,比 如对象(object),字典(dictionary),哈希表(hash map),关联数组(associative array)等。

JSON有六种类型的值:对象,数组,字符串,数字,布尔值和特殊值null。

console.log(JSON.parse('5')); // 5
console.log(JSON.parse(5)); // 5
console.log(JSON.parse('true')); // true
console.log(JSON.parse(true)); // true
console.log(JSON.parse('"hello"')); // "hello"
console.log(JSON.parse("hello")); // 报错 因为hello不是JSON字符串
console.log(JSON.parse('null')); // null
console.log(JSON.parse(null)); // null
console.log(JSON.parse(undefined)); // 报错 因为JSON不能表示undefined换用null代替

JSON的结构

JSON具有两种结构:对象,数组

对象结构以”{”大括号开始,以”}”大括号结束。中间部分由0或多个以”,”分隔的”key(关键字)/value(值)”对构成,关键字字符串和值之间以”:”分隔,语法结构如代码。

{
  key1:value1,
  key2:value2,
  ...
}

例如:

{
  "name": "hum",
  "age": 26,
  "sex": 1,
  "love": [
    "swing",
    "jump"
  ],
  "birthday": "1988-01-12"
}

NOTE:

在js中表示JSON字符串时最好在外面加上单引号。

如下:

console.log(JSON.parse('{"num":5,"stop":true,"str":"hello","empty":null}'));// object{num:5,stop:true,str:"hello",empty: null}

与js对象字面量相比,JSON对象没有变量声明也没有末尾的分号。
数组结构以”[”开始,”]”结束。中间由0或多个以”,”分隔的值列表组成,语法结构如代码。

[
  {
    key1:value1,
    key2:value2,
   ...
  }
]

例如:

[
 {
   "Id": 7,
  "Mentions": [
    {
     "Id": 5,
     "StatusId": 34,
     "CreatedDateTime":"\/Date(1310051914617+0100)\/",
     "Text":"Text",
     "UserName":"Username",
    "UserLocation":"UK",
    "UserLanguage":"en-GB",
     "IsCheckIn":"true"
   }
  ],
   "Checkins": 0,
   "HereNow": 0,
   "TimeStamp":"\/Date(1310051914639+0100)\/",
   "Venue": {
    "Id": 7,
    "FoursquareId":"cacbf3bd-f0aa-403d-9f9b-2056b4985ba1",
    "Name":"Venue Name"
   }
  },
  {
    "name":"hahahhahah",
    "port":[
     {
       "port": 8080,
       "protocol":"HTTP",
       "IP":"123.12.06.456"
     }
    ]
  }
]

JSON数组采用的是javascript数组字面量的形式。

JSON的解析与序列化

js的JSON的解析与序列化与AS3是相同的。我们常用的也就是JSON对象(ECMAScript 5中添加的, 早期JSON解析基本都使用javascript的eval()函数。但是eval有一些性能和安全上的缺点,ECMAScript对解析JSON对象进 行了规范,定义了全局对象JSON,支持的浏览器有标准浏览器和IE8+。对于不支持的浏览器可以引入json2.js文件。)的stringify与parse这两个方法。

接下来我们来一一说明。

JSON.stringify

JSON.stringify()将javascript对象序列化为JSON格式的字符串
JSON.stringify(ob,filter,indent)包含三个参数,通常我们在使用的时候只带第一个参数,来返回字符串。

ob:要转化成JSON字符串的对象,数组,原始值。
filter:是一个可选的参数,通常是一个函数,用来在字符串化前对值做一些替换。也可以是一个数组,包含哪些需要字符串化的属性名。就是用来过滤的。
indent:也是一个可选参数,在需要输出格式化的可阅读的代码时,使用indent参数来指定用来缩进的字符串或空格。如果省略该参数,返回的字符串将不带任何的额外的空格,这样输出的值很难阅读。就是用来格式化的。

下面是几个对应的例子:

首先是第二个参数是数组过滤器的时候:

var oJson = { name: 'hum', age: 20, sex: 1};
console.log(JSON.stringify(oJson, ['age', 'sex'])); // {"age":20,"sex":1}

如果第二个参数是字符串的时候,该数组会作为对象的属性名,属性名不在这个数组中的任何对象的属性在序列化的时候都会被忽略掉。此外,返回的字符串中的属性的顺序,会与该数组中的属性名一致。

函数过滤器的时候:

var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
  console.log(JSON.stringify(oJson, function(k, v){
    switch (k){
      case 'age':
        return v > 20 ? '成年': '未成年';
      case 'love':
        return v.join(',');
      case 'sex':
        return undefined;
      default :
        return v;
    }
  })); // {"name":"hum","age":"成年","love":"swing,jump"}

如果该参数是函数,则它是一个替换函数,该函数会在每一个需要字符串化的对象上调用。这个函数的第一个参数是该对象中的属性名或数组的序号,第二个则是值本身。函数的返回值会替换掉需要字符串化的值,如果函数返回undefined或没有任何的返回值,则会在字符串化的时候忽略这个值。

stringify的第三个参数的实例:

var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
  console.log(JSON.stringify(oJson, null, 4));
  /*
   {
     "name": "hum",
     "age": 26,
     "sex": 1,
     "love": [
       "swing",
       "jump"
     ]
   }
  */

通常这个方法的返回值是一个不带任何空格或换行符的给机器阅读的字符串,如果想输出更易于阅读的代码,就需要设置第三个参数了。

再来看一个例子:

var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
  console.log(JSON.stringify(oJson, null, '--'));
  /*
   {
   --"name": "hum",
   --"age": 26,
   --"sex": 1,
   --"love": [
   ----"swing",
   ----"jump"
   --]
   }
  */

这样就很容易理解了。。。

JSON.parse

JSON.parse用来解析json格式的字符串(返回一个对象,数组或原始值)

JSON.parse(s,reviver)包含两个方法.

s:要解析的字符串
reviver:用来转换解析值得可选函数

我们通常使用只使用第一个参数,可选参数reviver,主要是在返回解析值之前,对其进行过滤或后期处理。reviver函数会在从s中解析的每个原始值调用一次。调用reviver函数是带有两个参数,第一个属性名(对象的属性名或是转换成字符串的数组序号),第二个参数是对象的属性或是数组的元素值。reviver函数会作为包含原始值的对象/数组的方法来调用。reviver函数的返回值会成为属性的新值,如果reviver返回第二个参数,则属性不变。如果reviver返回undefined或不凡会任何值,则会从对象或是数组中删除属性。
下面是一个实例:

var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump'], birthday: '1988-01-12'};
  var sJson = JSON.stringify(oJson);
  console.log(sJson);//{"name":"hum","age":26,"sex":1,"love":["swing","jump"],"birthday":"1988-01-12"}
  console.log(JSON.parse(sJson));
  console.log(JSON.parse(sJson, function (k, v) {
    if(k == 'birthday'){ // 返回日期对象
      return new Date(v);
    }else if(k == 'sex'){ // sex不在了
      return undefined;
    }else{
      return v;
    }
  }));
Javascript 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
分享5个好用的javascript文件上传插件
Sep 16 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
JS对象的深度克隆方法示例
Mar 16 #Javascript
JS对象深度克隆实例分析
Mar 16 #Javascript
JS异步加载的三种实现方式
Mar 16 #Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 #Javascript
基于JavaScript实现滑动门效果
Mar 16 #Javascript
基于Vue2.0的分页组件
Mar 16 #Javascript
原生js实现验证码功能
Mar 16 #Javascript
You might like
在PHP中使用XML
2006/10/09 PHP
php自动适应范围的分页代码
2008/08/05 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
golang与PHP输出excel示例
2016/07/22 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
Python 的 Socket 编程
2015/03/24 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
极简的HTML5模版
2015/07/09 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
手术室护士个人总结
2015/02/13 职场文书
英语辞职信怎么写
2015/02/28 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle