码迷,mamicode.com
首页 > 编程语言 > 详细

8.7 JSON存储数据方式(JavaScript对象表示法)

时间:2019-09-19 23:46:03      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:ber   ota   var   gif   自定义   ack   parse   不同的   内容   

8.7 JSON存储数据方式(JavaScript对象表示法)

JSON JavaScript 对象表示法(JavaScript Object Notation) 是一种存储数据的方式。

一、创建JSON对象

var gareen = {"name":"盖伦","hp":616}; 
这样就创建了一个JSON 对象 
JSON对象由 名称/值对组成 名称和值之间用冒号:隔开 
名称必须用双引号" 包含起来 
值可以是任意javascript数据类型,字符串,布尔,数字 ,数组甚至是对象 
不同的名称/值对之间用 逗号 , 隔开

<script>
var gareen = {"name":"盖伦","hp":616};
  
document.write("这是一个JSON对象: "+gareen);
 </script>
//运行结果
这是一个JSON对象: [object Object]

1.2、访问JSON节点

直接gareen.name访问JSON对象的属性

直接gareen.hp访问JSON对象的属性

二、通过方括号[] 创建JSON 数组

<script>
//通过方括号[] 创建JSON 数组
var heros=
[
    {"name":"盖伦","hp":616},
    {"name":"提莫","hp":313},
    {"name":"死歌","hp":432},
    {"name":"火女","hp":389}
]
 //length个数
document.write("JSON数组大小"+heros.length);
//访问JSON数组和访问普通数组一样,通过下标访问
document.write( "第4个英雄是:" +  heros[3].name);
</script>

三、JSON对象转换问题

3.1JSON对象与JavaScript对象

JavaScript对象 分内置对象(Number,String,Array,Date,Math)和自定义对象 
JSON就是自定义对象,只不过是以JSON这样的数据组织方式表达出来 
所以不存在JSON对象与JavaScript对象的转换问题

3.2字符串转为JSON对象

通过字符串拼接得到一个JSON结构的字符串,并不是一个JSON对象。 需要通过eval转换得到
转换的时候注意,eval 函数要以 开头,结尾
或者使用JQuery的$.parseJSON转换函数

<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;
  
document.write("这是一个JSON格式的字符串:" + s3);
document.write("<br>");
//1.使用JQuery的$.parseJSON转换函数
var gareen1 = $.parseJSON(s3);
document.write("这是一个JSON对象: " + gareen1);
document.write("<br>");
//2.使用eval方法
var gareen2 = eval("("+s3+")");
document.write("这是一个JSON对象: " + gareen2);
</script>

3.3  JSON转换为字符串

json 对象因为是一个javascript对象,所以如果直接打印的话,看不到里面的内容。需要通过 JSON.stringify 函数把它转换为 字符串

<script>
var hero = {"name":"盖伦","hp":"616"};
document.write("这是一个json 对象:"+ hero);
document.write("<br>");
var heroString = JSON.stringify(hero)
document.write("这是一个json 字符串:"+ heroString );
</script>

四、实际开发中的使用

 

8.7 JSON存储数据方式(JavaScript对象表示法)

标签:ber   ota   var   gif   自定义   ack   parse   不同的   内容   

原文地址:https://www.cnblogs.com/Smileing/p/11552961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!