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 相关文章推荐
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
JS定义类的六种方式详解
May 12 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
Vue3不支持Filters过滤器的问题
Sep 24 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
javascript html5摇一摇功能的实现
2016/04/19 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
angularjs指令之绑定策略(@、=、&)
2017/04/13 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Python语言快速上手学习方法
2018/12/14 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
七一表彰活动方案
2014/01/18 职场文书
个人贷款担保书
2014/04/01 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Python学习开发之图形用户界面详解
2021/08/23 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
MySQL数据管理操作示例讲解
2022/12/24 MySQL