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 相关文章推荐
javascript 清空form表单中某种元素的值
Dec 26 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
js添加绑定事件的方法
May 15 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
Web程序工作原理详解
2014/12/25 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
js函数调用的方式
2014/05/06 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python常用正则表达式符号浅析
2014/08/13 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
气象学专业个人求职信
2014/03/15 职场文书
十佳青年事迹材料
2014/08/21 职场文书
先进人物事迹材料
2014/12/29 职场文书
博士论文答辩开场白
2015/06/01 职场文书
成绩单家长意见
2015/06/03 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书