JavaScript中的对象与JSON


Posted in Javascript onJuly 03, 2015

简介

JSON即JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。
JSON是一种数据交换格式,像XML和YAML一样是一种在各种不同语言间传递结构化信息的方式。从另一方面来说,javascript对象是javascript语言中的一种数据类型,就像PHP中的数组、C++中类和结构体。

定义JSON与javascript对象

在javascript程序中定义对象的时候,对象的属性名可以加双引号也可以不加双引号。如果属性名包含特殊字符(如!、if等)的时候,就必须加双引号。
在定义JSON的时候,属性名必须加双引号。

代码示例:

1.定义javascript对象

var obj={name:"tudouya","sex":"man"};  #两个属性可以加双引号也可以不加

var obj={"!":"hello world"};  #属性名包含特殊字符时必须加双引号

2.定义JSON字符串
var jsonString={"name":"tudouya"};  #定义JSON时必须加双引号

javascript对象转换为JSON

1.javascript对象转换为JSON

我们可以使用javascript的内置函数将javascript对象转换为JSON,这个函数就是JSON.stringify().
代码示例:

var obj={name:"tudouya",sex:"man"};

var jsonObj=JSON.stringify(obj);

console.log(jsonObj);

##输出结果为:{"name":"tudouya","sex":"man"}

在将javascript对象转换为JSON的时候,有一点是需要我们注意的:
如果对象中包含有值为函数和日期的属性,JSON会忽略值为函数的属性,并将值为日期的属性转换为字符串。
代码示例:
var obj={

 name:"tudouya",

 birthday:new Date(),

 action:function (){

  document.write("walk");

 }

};

var jsonObj=JSON.stringify(obj);

console.log(jsonObj);

##输出结果为:{"name":"tudouya","birthday":"2014-08-12T10:05:00.497Z"}

javascript中解析JSON

在老版本的JS中,大家通常都使用eval()函数来解析JSON,但是ECMAScript5给我们提供了一个解析JSON的新函数JSON.parse()。

这个函数的使用方法比较简单,大家可以自行尝试。当对某个JSON字符串应用该函数以后,该JSON就被转换为javascript的对象,也就是说当用typeof运算符查看该函数的类型时,返回的值是Object。
同样有一点需要注意的是,该函数是ECMAScript5以后才支持的,如果是旧版本的浏览器那么可能不支持该函数。解决的方法是加载一个实现该函数的js文件,即json2.js。如果使用的是JQuery框架,jQuery.parseJSON(),该函数调用了JSON.parse()方法。
关于使用eval()方法解析JSON,这个等深入学习后会记录下来。

一个很重要的概念

作为一个前端菜鸟,经常听到别人说“JSON对象”,但是其实并没有“JSON对象”这个概念,JSON真正的表现形式是字符串。

Javascript 相关文章推荐
js改变文章字体大小的实例代码
Nov 27 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
关于使用js算总价的问题
Jun 23 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
js中的数组对象排序分析
Dec 11 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
javascript生成大小写字母
Jul 03 #Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 #Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 #Javascript
javascript 闭包详解
Jul 02 #Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 #Javascript
浅谈Javascript线程及定时机制
Jul 02 #Javascript
JavaScript获得url查询参数的方法
Jul 02 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Django实现celery定时任务过程解析
2020/04/21 Python
Keras 使用 Lambda层详解
2020/06/10 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
小班下学期评语
2014/05/04 职场文书
建筑施工安全责任书
2014/07/24 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
签约仪式致辞
2015/07/30 职场文书
会计主管竞聘书
2015/09/15 职场文书
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js