本文实例讲述了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;
    }
  }));

PS：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：

在线JSON代码检验、检验、美化、格式化工具：
http://tools./code/json

JSON在线格式化工具：
http://tools./code/jsonformat

在线XML/JSON互相转换工具：
http://tools./code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools./code/jsoncodeformat

在线json压缩/转义工具：
http://tools./code/json_yasuo_trans

C语言风格/HTML/CSS/json代码格式化美化工具：
http://tools./code/ccode_html_css_json

更多关于JavaScript相关内容可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

# JSON  # js  # 对象  # 序列化  # Json序列化和反序列化方法解析  # Jquery 组合form元素为json格式  # asp.net反序列化  # 浅析JSON序列化与反序列化  # JSON键值对序列化和反序列化解析  # js解析与序列化json数据(一)json.stringify()的基本用法  # js解析与序列化json数据(二)序列化探讨  # js解析与序列化json数据(三)json的解析探讨  # JSON序列化与解析原生JS方法且IE6和chrome测试通过  # JS实现json的序列化和反序列化功能示例  # 是一个  # 第二个  # 第一个  # 可选  # 返回值  # 是一种  # 多个  # 组中  # 会在  # 报错  # 第三个  # 则会  # 转换工具  # 编程语言  # 数据交换  # 的是  # 不带任何  # 几个  # 是在 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  新三国志曹操传主线渭水交兵攻略  微信小程序 HTTPS报错整理常见问题及解决方案  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  LinuxShell函数封装方法_脚本复用设计思路【教程】  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  魔毅自助建站系统：模板定制与SEO优化一键生成指南  如何在云服务器上快速搭建个人网站？  独立制作一个网站多少钱,建立网站需要花多少钱？  网站制作软件有哪些,制图软件有哪些？  ,南京靠谱的征婚网站？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  IOS倒计时设置UIButton标题title的抖动问题  如何快速生成ASP一键建站模板并优化安全性？  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  Laravel怎么使用Intervention Image库处理图片上传和缩放  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  javascript中的try catch异常捕获机制用法分析  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  百度浏览器如何管理插件 百度浏览器插件管理方法  Laravel怎么处理异常_Laravel自定义异常处理与错误页面教程  个人摄影网站制作流程,摄影爱好者都去什么网站？  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  重庆市网站制作公司,重庆招聘网站哪个好？  Linux系统命令中tree命令详解  如何在阿里云虚拟主机上快速搭建个人网站？  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  如何挑选高效建站主机与优质域名？  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  非常酷的网站设计制作软件,酷培ai教育官方网站？  Android okhttputils现在进度显示实例代码  Laravel如何与Docker（Sail）协同开发？（环境搭建教程）  智能起名网站制作软件有哪些,制作logo的软件？  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  如何在服务器上配置二级域名建站？  如何安全更换建站之星模板并保留数据？  实例解析Array和String方法  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  Laravel Eloquent：优雅地将关联模型字段扁平化到主模型中  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  简历在线制作网站免费版,如何创建个人简历？  C++时间戳转换成日期时间的步骤和示例代码  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  制作公司内部网站有哪些,内网如何建网站？  Laravel如何实现数据库事务？（DB Facade示例）  米侠浏览器网页背景异常怎么办 米侠显示修复  如何快速完成中国万网建站详细流程？