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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
vue小白入门教程
Apr 02 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 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实现的功能是显示8条基色色带
2006/10/09 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
对js eval()函数的一些见解
2016/08/15 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
Python 文件操作实现代码
2009/10/07 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
pycharm设置注释颜色的方法
2018/05/23 Python
对Python中plt的画图函数详解
2018/11/07 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
virtualenv介绍及简明教程
2020/06/23 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
喝酒驾驶检讨书
2014/10/01 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
倡议书范文大全
2015/04/28 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
请假条应该怎么写?
2019/06/24 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
css样式important规则的正确使用方式
2022/06/10 HTML / CSS