您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

H5前端工程师必学JSON对象详解

时间:2019-07-30 11:20:02  来源:  作者:

JSON对象详解

JSON(JAVAScript Object Notation)一种简单的数据格式,比xml更轻巧。XML曾经是程序界风靡一时的语言,但JSON的出现对他也有不小的冲击。

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

JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。

规则如下:

1) JSON的属性名称要求以“双引号”包裹

2) 映射用冒号(“:”)表示。”名称”:值

3) 并列的数据之间用逗号(“,”)分隔。名称1:值1,名称2:值2

4) 映射的集合(对象)用大括号(“{}”)表示。{名称1:值1,名称2:值2}

5) 并列数据的集合(数组)用方括号(“[]”)表示。

[

{名称1:值,名称2:值2},

{名称1:值,名称2:值2}

]

6) 元素值可具有的类型:string, number, object, array, true, false, null

1.1. JSON示例

JSON 用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。

var obj = {};

对象描述中存储的数据可以是字符串,数字或者布尔值。对象描述也可存储函数,那就是对象的方法。

1.2. 解析JSON

JSON 只是一种文本字符串。

可以JavaScript 的 eval 语句。函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的,所以它本身是可执行的

代码实例:

<script language="JavaScript">

var jsonObj = {"name":"xiaoq","age":18};

// 查看json对象的原生结构

console.debug(jsonObj); // "({name:"xiaoq", age:18})"

</script>

<script language="JavaScript">

var jsonStr =’{"name":"xiaoq","age":18}’;

// 查看json对象的原生结构

console.debug(eval(“(”+jsonStr+”)”)); //

</script>

1.3. JSON和JS字面量(重要)

JS字面量:

{name:”小强”}

JSON:

{name:”小强”}

格式的识别,可以采用字符串转换方式。

但是,eval的参数是js字符串(并不是JSON字符串)。

var obj = eval("(" + jsonText + ")");

在ECMAScript3.1标准中,已经提供了一个名为JSON的全局对象,专门用来解析和反解析JSON字符串。

var obj = JSON.parse("{}"); // 字符串转JSON

JSON.stringify(obj);// 对象转JSON

1.4. 操作JSON

例子1:

<script language="JavaScript">

var people ={"firstName": "Brett", "lastName":"McLaughlin",

"email": "brett@newInstance.com" };

alert(people.firstName);

alert(people.lastName);

alert(people.email);

</script>

<script language="JavaScript">

var people =[

{"firstName": "Brett","email": "brett@newInstance.com" },

{"firstName": "Mary","email": "mary@newInstance.com" }

];

alert(people[0].firstName);

alert(people[0].email);

alert(people[1].firstName);

alert(people[1].email);

</script>

<script language="JavaScript">

var people ={

"username":"mary",

"age":"20",

"info":{"tel":"1234566","celltelphone":788666},

"address":[

{"city":"beijing","code":"1000022"},

{"city":"shanghai","code":"2210444"}

]

};

window.alert(people.username);

window.alert(people.info.tel);

window.alert(people.address[0].city);

</script>

1.5. JSON小结

优点:

作为一种数据传输格式,JSON 与 XML 很相似,但是它更加灵巧。

JSON 不需要从服务器端发送含有特定内容类型的首部信息。

缺点:

语法过于严谨

代码不易读

eval 函数存在风险

看完文章,您能总结JavaScript字面量和JSON之间的区别了吗?欢迎评论,谢谢



Tags:H5 JSON   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
JSON对象详解JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。XML曾经是程序界风靡一时的语言,但JSON的出现对他也有不小的冲击。JSON是JavaScript原生格式,这...【详细内容】
2019-07-30  Tags: H5 JSON  点击:(442)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(229)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条