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 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
浅析Jquery操作select
Dec 13 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
JS实现判断数组是否包含某个元素示例
May 24 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 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加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
js style动态设置table高度
2014/10/21 Javascript
深入理解js中this的用法
2016/05/28 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
python自动zip压缩目录的方法
2015/06/28 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
PyTorch实现AlexNet示例
2020/01/14 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
机械专业应届生求职信
2013/12/12 职场文书
英语生日邀请函
2014/01/23 职场文书
趣味活动策划方案
2014/02/08 职场文书
合作意向书范本
2014/03/31 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
六年级数学教学反思
2016/02/16 职场文书
辞职信怎么写?
2019/05/21 职场文书
Java界面编程实现界面跳转
2022/06/16 Java/Android