前端怎么用js模拟应用 JSON-通俗易懂

前端怎么用js模拟应用 JSON-通俗易懂,这是转载额

好多孩子 弄不明白复杂的json 格式的应用,下面从基础来看一看JSON,怎么玩,

其实结构理解清了,写起来比html还爽吧!

0.前言

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。

JSON大致3种结构,JSON对象、JSON数组和JSON对象和数组嵌套。

1 JSON对象

JSON对象简单而言便是键值对或名值对,而“值”可以是数值、字符串和布尔类型等。

JSON对象具体格式如图1所示。

图1 JSON对象格式

1.1 JSON数值

请注意数值不需要加引号,键值对之间使用","。

【单个数值】

{“value”:12}

【多个数值】

{"maxValue":24, "minValue":12};

[javascript] view
plain
 copy

  1. <script>
  2. var jsonObj = {"maxValue":24, "minValue":12};
  3. console.log(jsonObj.maxValue);
  4. console.log(jsonObj.minValue);
  5. </script>

【输出】

24

12

1.2 JSON字符串

字符串需要加引号,键值对之间使用","。

【单个字符串】

{"name":"xukai871105"}

【多个字符串】

{"name":"xukai871105", "blog":"http://blog.csdn.net/xukai871105"}

[javascript] view
plain
 copy

  1. <script>
  2. var jsonObj = {"name":"xukai871105", "blog":"http://blog.csdn.net/xukai871105"};
  3. console.log(jsonObj.name);
  4. console.log(jsonObj.blog);
  5. </script>

【输出】

[plain] view
plain
 copy

  1. xukai871105
  2. http://blog.csdn.net/xukai871105

1.3 JSON布尔

请注意JSON格式中的值可以使用布尔类型,且不需要加引号,如果true或false被引号包裹,那么便解析为JSON字符串,请处理稍有不同。

{"success":false}

[javascript] view
plain
 copy

  1. <script>
  2. var jsonObj = {"success":false};
  3. console.log(jsonObj.success);
  4. </script>

【输出】

false

2 JSON数组

JSON数组的表达方法和C语言数组的表达方法完全相同。下面的例子中存在一个JSON对象,该JSON对象只有一个键值对,键为lists而键值为JSON数组——[5,6,7,8]。这里已经存在JSON类型的嵌套,具体请看下面一个例子。

{"lists":[5,6,7,8]}

图2 JSON数组格式

[javascript] view
plain
 copy

  1. <script>
  2. var jsonObj = {"lists":[5,6,7,8]};
  3. console.log(jsonObj.lists);
  4. for(var i=0; i<jsonObj.lists.length; i++) {
  5. console.log(jsonObj.lists[i]);
  6. }
  7. </script>

【输出】

[plain] view
plain
 copy

  1. [5, 6, 7, 8]
  2. 5
  3. 6
  4. 7
  5. 8

3 JSON嵌套

JSON格式可以嵌套,所谓嵌套便是JSON对象中可包括JSON数组,JSON数组中可包括JSON对象。下面的例子中rows为JSON对象,对象中嵌套JSON数组,每一个JSON数组的元素又是一个JSON对象。这种嵌套情况在实际情况中经常出现。

[javascript] view
plain
 copy

  1. <script>
  2. var jsonObj =
  3. {
  4. "total": 3,
  5. "rows": [
  6. {
  7. "title": "树莓派学习笔记——索引博文",
  8. "url": "http://blog.csdn.net/xukai871105/article/details/23115627"
  9. },
  10. {
  11. "title": "树莓派学习笔记——GPIO功能学习",
  12. "url": "http://blog.csdn.net/xukai871105/article/details/12684617"
  13. },
  14. {
  15. "title": "物联网学习笔记——索引博文",
  16. "url": "http://blog.csdn.net/xukai871105/article/details/23366187"
  17. }
  18. ]
  19. };
  20. console.log(jsonObj.total);
  21. for(var i=0; i<jsonObj.rows.length; i++) {
  22. console.log(jsonObj.rows[i].title);
  23. console.log(jsonObj.rows[i].url);
  24. }
  25. </script>

【输出】

[plain] view
plain
 copy

  1. 3
  2. 树莓派学习笔记——索引博文
  3. http://blog.csdn.net/xukai871105/article/details/23115627
  4. 树莓派学习笔记——GPIO功能学习
  5. http://blog.csdn.net/xukai871105/article/details/12684617
  6. 物联网学习笔记——索引博文
  7. http://blog.csdn.net/xukai871105/article/details/23366187

4.javascript中eval函数

【为什么要加括号 】

加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。参考——【3】javascript
eval和JSON之间的联系

[javascript] view
plain
 copy

  1. <script>
  2. var jsonStr = ‘{"total":3}‘;
  3. var jsonObj= eval(‘(‘ + jsonStr + ‘)‘);
  4. console.log(jsonObj.total);
  5. </script>

【输出】

3

5.常见错误

【1】多一个逗号

}或]前多一个, 这种情况不符合JSON,但是某些浏览器可以容忍,例如chrome和火狐,但是某些浏览器就无法容忍,例如IE。最好还是选择JSON校验工具测试一下JSON数据包是否合法。请注意下面一个例子中url最后的",",该逗号是多余的。

[plain] view
plain
 copy

  1. {
  2. "title": "树莓派学习笔记——索引博文",
  3. "url": "http://blog.csdn.net/xukai871105/article/details/23115627",
  4. }

6.参考资料

【1】JSON格式化工具

【2】JSON校验工具

【3】javascript eval和JSON之间的联系

JS前端实用开发QQ群 :147250970  欢迎加入~!

时间: 2024-11-08 00:48:08

前端怎么用js模拟应用 JSON-通俗易懂的相关文章

JS模拟土豆弹窗——链式运动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS模拟土豆弹窗——链式运动</title> <style> *{padding: 0; margin: 0;} body{ font-size: 12px; font-family: "微软雅黑"; overflow: hidden;} #foot{ width:

原生JS模拟百度搜索框

近期有个新入行的小伙伴一直在问一些基础知识,突然觉得人的记忆力有限,有些平常很少用到的知识点虽简单却也其实很容易模糊,或者是一个单词,或者是一个语法.所以想着应该利用一下工作之余的碎片时间,记录一些工作上的问题和一些有趣的小案例,于是开通了播客,一方面便于自己日后翻阅,一方面给刚学习的小伙伴一个参考. 今天先写一个简单的小案例:原生JS模拟百度搜索框. 需求: 1.当在输入框输入时,每输入一个文字,就会在下方展示相关内容列表 2.每一次输入框输入,清空上一次内容 3.鼠标移入列表内容时,对应的内

好程序员前端学习路线分享模拟JavaScript中面向对象技术

好程序员前端学习路线分享模拟JavaScript中面向对象技术,在C#和Java语言中,面向对象是以类的方式实现的,特别是继承这个特性,类的方式继承表现出了强大的功能,而且也易于学习.JavaScript不是纯的面向对象的语言,而是基于对象的语言,对象的继承是以原型函数的形式继承的,很多初学者刚开始接触的时候不太理解,但是JavaScript这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能,本文主要讨论了JavaScript的面向对象技术.?一.原型对

js实现格式化JSON数据方法

前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上述原因,所以就创建了一个全局的数据格式配置文件,通过es6 中的模板字符串来实现,这样就解决了代码可视化不优雅的问题.但是后面又增加了一个动态数据格式的需求,这样一来就不能通过模板字符串来 解决了,所以就有了这篇文章中讲述的通过js格式画JSON数据的方案,这篇文章旨在记录方案实现的方法,方便自己

mock.js模拟数据

一.mock解决的问题 开发时,后端还没完成数据输出,前端只好写静态模拟数据.数据太长了,将数据写在js文件里,完成后挨个改url.某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼.想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据.特殊的格式,例如IP,随机数,图片,地址,需要去收集 二.mock优点 1.前后端分离 让前端工程师独立于后端进行开发. 2.增加测试的真实性 通过随机数据,模拟各种场景. 3.开发无侵入 不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数

单篇文章JS模拟分页

废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请求的时候,就已经把全文回传给客户端了,只是我们通过js的方式,把全文隐藏,每次翻页至显示出我们需要的那一部分,而不是真正的按需要去发出HTML请求.所以,在做这个插件的时候去掉了ajax请求的功能及其附带参数,去掉了pageSize参数(恒等于1).这里就不讨论具体的技术细节了和上一篇的分页计算原理

用js解析经json序列化后的C#的DateTime类型数据

用js解析经json序列化后的C#的DateTime类型数据 (2012-09-21 19:36:03) 转载▼ 标签: 杂谈 分类: javascript // val为经json直接序列化后的C#的DateTime类型的数据function formatTime(val) {    var re = /-?\d+/;    var m = re.exec(val);    var d = new Date(parseInt(m[0]));// 按[2012-02-13 09:09:09]的格

由chrome剪贴板问题研究到了js模拟鼠标键盘事件

写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.clipboardData.getData("Text") 可是在chrome下面就行不通了,chrome下面没有类似ie的这种方法,那应该怎么办呢,百度了一下,发现还真有办法. 只要在HTML界面上放上一个text类型的控件,如下所示 <textarea id="textAre

JSON(二)——JavaScript中js对象与JSON格式字符串的相互转换

首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是js中JSON格式的字符串,它只是一个js的字符串. var JSONStr2 = "{'name' : '张三'}"; 我们看JSON语法中对于字符串的定义:是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义.一个字符(character)即一个单独的字符串(characte