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:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
Javascript浅谈之this
Dec 17 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
js实现删除json中指定的元素
Sep 22 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 和 MySQL 基础教程(一)
2006/10/09 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
分享Python文本生成二维码实例
2016/01/06 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
党支部活动策划方案
2014/08/18 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS