在JavaScript中使用JSON数据


Posted in Javascript onFebruary 15, 2016

JSON 是 JavaScript 原生格式,这意味着 在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

JSON语法

JSON建构于两种结构:

对象——名称/值对的集合。不同的语言中,它被理解为对象,纪录,结构,字典,哈希表,有键列表(keyed list),或者关联数组。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间使用“,”(逗号)分隔。

数组——值的有序列表。在大部分语言中,它被理解为数组。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

JSON没有变量或其他控制结构。JSON只用于数据传输。

将JSON 数据赋值给变量

例如,可以创建一个新的 JavaScript 变量,然后将 JSON 格式的数据字符串直接赋值给它:

var people =
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
]
}

这非常简单;现在 people 包含前面看到的 JSON 格式的数据。但是,这还不够,因为访问数据的方式似乎还不明显。

访问数据

尽管看起来不明显,但是上面的长字符串实际上只是一个数组;将这个数组放进 JavaScript 变量之后,就可以很轻松地访问它。实际上,只需用点号表示法来表示数组元素。所以,要想访问 programmers 列表的第一个条目的姓氏,只需在 JavaScript 中使用下面这样的代码:

people.programmers[0].lastName;

注意,数组索引是从零开始的。所以,这行代码首先访问 people 变量中的数据;然后移动到称为 programmers 的条目,再移动到第一个记录( [0] );最后,访问 lastName 键的值。结果是字符串值 “McLaughlin” 。

下面是使用同一变量的几个示例。

people.authors[1].genre 
// Value is "fantasy"
people.musicians[3].lastName 
// Undefined. This refers to the fourth entry,and there isn't one
people.programmers[2].firstName 
// Value is "Elliotte"

利用这样的语法,可以处理任何 JSON 格式的数据,而不需要使用任何额外的 JavaScript 工具包或 API 。

修改 JSON 数据

正如可以用点号和括号访问数据,也可以按照同样的方式轻松地修改数据:

people.musicians[1].lastName = "Rachmaninov";

在将字符串转换为 JavaScript json 格式对象之后,就可以像这样修改变量中的数据。

注意:json 格式的对象和 json 文本是不同的

var obj={name:" 张三 ","sex":' 男 '}; //json 格式的对象
var str=" { name: " 张三 " , "sex" : ' 男 ' }" ; //json 格式的字符串( json 格式的文本)

转换回字符串

当然,如果不能轻松地将对象转换回本文提到的文本格式,那么所有数据修改都没有太大的价值。在 JavaScript 中这种转换也很简单:

var newJSONtext = people.toJSONString();

这样就行了!现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作 Ajax 应用程序中的请求字符串。

更重要的是,可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换,只需执行相同形式的命令:

<script type="text/javascript">
function Car(make,model,year,color)
{
this.make=make; 
this.model=model; 
this.year=year; 
this.color=color;
} 
function showCar()
{
var carr = new Car("Dodge","Coronet R/T",1968,"yellow"); 
alert(carr.toJSONString()); 
}
</script>

这就是 JSON 与其他数据格式之间最大的差异。如果使用 JSON ,只需调用一个简单的函数,就可以获得经过格式化的数据,可以直接使用了。对于其他数据格式,需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API (提供了将自己的数据结构转换为文本的函数),也需要学习这个 API 并使用 API 的对象,而不是使用原生的 JavaScript 对象和语法。

最终结论是,如果要处理大量 JavaScript 对象,那么 JSON 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式(Ajax) 。

JSON字符串转换为JSON对象的方法

要使用上面的str1,必须使用下面的方法先转化为JSON对象:

//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后,就可以这样读取:

Alert(obj.name);
Alert(obj.sex);

特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。

Javascript 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 #Javascript
轻松搞定jQuery.noConflict()
Feb 15 #Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 #Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 #Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 #Javascript
10个JavaScript中易犯小错误
Feb 14 #Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 #Javascript
You might like
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
Js面试算法详解
2018/04/08 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
Vue实现手机计算器
2020/08/17 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Python求离散序列导数的示例
2019/07/10 Python
python树的同构学习笔记
2019/09/14 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
财务会计专业毕业生自荐信
2013/10/02 职场文书
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
主管会计岗位责任制
2014/02/10 职场文书
员工生日会策划方案
2014/06/14 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript