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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
vue如何使用async、await实现同步请求
Dec 09 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python 2.7.14安装图文教程
2018/04/08 Python
python根据文本生成词云图代码实例
2019/11/15 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python 如何区分return和yield
2020/09/22 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang