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 八进制转义字符(8进制)
Apr 08 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
用vue写一个日历
Nov 02 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
input 高级限制级用法
2009/03/26 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
js实现内置计时器
2019/12/16 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python实现装饰器、描述符
2018/02/28 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
python构造IP报文实例
2020/05/05 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
养殖行业的创业计划书
2014/01/05 职场文书
超市创意活动方案
2014/08/15 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
Python中re模块的元字符使用小结
2022/04/07 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫