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 相关文章推荐
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
编程语言JavaScript简介
Oct 16 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
详解Vue中watch的高级用法
May 02 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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无法连接mysql数据库的正确解决方法
2016/07/01 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
浅析TypeScript 命名空间
2020/03/19 Javascript
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python面向对象法实现图书管理系统
2019/04/19 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
战友聚会邀请函
2014/01/18 职场文书
写给老师的表扬信
2014/01/21 职场文书
运动会致辞稿50字
2014/02/04 职场文书
民主生活会发言材料
2014/10/20 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书