JavaScript JSON创建与解析

本文深入讲解JSON(JavaScript Object Notation)的基本概念与应用,涵盖JSON的创建、解析及转换技巧,通过实例展示如何使用JSON进行数据交换,适用于前端、后端及全栈开发者提升数据处理能力。

目录

JSON官网

使用JSON语法创建对象

列:创建json数据的五种形式

列:创建json字符串

列:创建json对象

列:输出1个父亲和2个儿子的名字和年龄

JSON解析对象

JSON字符串

列:创建json字符串并解析成json对象

列:创建json字符串数组并解析成json对象

JSON对象解析

列:创建json对象并解析成json数组

列:创建json对象并解析成json数组


JSON官网

www.json.org

使用JSON语法创建对象

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999(信息标准化和通信系统(由netscpace公司Brendan Eich提出, 本标准在1999年11月被ECMA General Assembly接受采纳为ECMA-262第3版。))的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。

传输数据格式:      {“名称”:“值1” ,“名称”:值2}

{"name":"laoli","age":19,"email": "www.baidu.com"}

传输对象格式:{ ”对象名“:[   

                                                {“名称”:“值1” },

                                                  {“名称”:"值2"}

                             ] }

{"employees":[ 
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"}, 
    {"firstName":"Peter", "lastName":"Jones"} 
]} 

注:数据用“大括号”括起来

列:创建json数据的五种形式

  <script language="JavaScript">
	
	  //案例一	  {key:value,key:value}			
	var person = {"firstname":"张","lastname":"三丰","age":100};	 	 
	 alert(person.lastname);//取出lastname	 
	 alert(person.age);//取出age

	 //案例二  [{key:value,key:value},{key:value,key:value}]
	 var persons = [
	                	{"firstname":"张","lastname":"三丰","age":100},
	                	{"firstname":"李","lastname":"四","age":25}
	                ]; 	
	alert(persons[1].firstname);//取出 firstname=李	
	alert(persons[0].age); //取100

   /**
	 * 案例三
	 * {
	 *   "param":[{key:value,key:value},{key:value,key:value}]
	 * } 	 
	 */
	 var json = {
			 	  "baobao":[
			 		       {"name":"小双","age":28,"addr":"扬州"},
			 		        {"name":"建宁","age":18,"addr":"紫禁城"},
			 		        {"name":"阿珂","age":10,"addr":"山西"},
			 		       ]
			 	};
	 alert(json.baobao[1].name); //取name = 建宁 
	 alert(json.baobao[2].addr);//取addr 山西

     //案例四
	 var json = {
		 			"baobao":[
			 		          	{"name":"小双","age":28,"addr":"扬州"},
			 		          	{"name":"建宁","age":18,"addr":"紫禁城"},
			 		          	{"name":"阿珂","age":10,"addr":"山西"},
		 		          	],
		 		     "student":[
			 		          	{"name":"张爽","age":25,"addr":"吉林"},
			 		          	{"name":"舒洁","age":23,"addr":"赤峰"}
				 		      ]
		 		};
	 
	alert(json.student[1].name);

 	/**
	 * 案例五
	 * {
	 *   "param1":"value1",
	 *   "param2":{},
	 *   "param3":[{key:value,key:value},{key:value,key:value}]
	 * }    
	 */	 
	 var json = {
			"key1":"value1",
			"key2":{"firstname":"张","lastname":"三丰","age":100},
			"key3":[
 		          	{"name":"小双","age":28,"addr":"扬州"},
 		          	{"name":"建宁","age":18,"addr":"紫禁城"},
 		          	{"name":"阿珂","age":10,"addr":"山西"},
 		          ]
	 };	 
	 alert(json.key2.lastname);	 
	 alert(json.key3[2].name);

  </script>

列:创建json字符串

    //创建json字符串
      var str='{"name":"小青","age":22}'; 
      alert(typeof(str))
   //创建json字符串数组
var str2='[{"address":"上海","password":"fendou1","userName":"liayin1"},
      {"address":"上海","password":"fendou2","userName":"liayin2"},
      {"address":"上海","password":"fendou3","userName":"liayin3"}]';

列:创建json对象

     var json={name:"容儿",age:23,address:"上海"};
      alert(json.name)
      
      var users={users:[{name:"容儿",age:23,address:"上海"},{name:"祖儿",age:24,address:"北京"}]};
      alert(users.users[0].name);

 

列:输出1个父亲和2个儿子的名字和年龄

JSON解析对象

使用json解析对象时,需要导入json2.js文件夹

   <script type="text/javascript" src="js/json2.js"></script>

 

JSON字符串

字符串,我们常说的JavaScript中的字符串是单引号或者双引号引起来的。

json字符串转json对象,调用parse方法

列:创建json字符串并解析成json对象

	   <script type="text/javascript" src="js/json2.js"></script>	
       <script type="text/javascript">
           //创建json字符串
			var str = '{"name":"小青","age":22}'; //创建json字符串
			document.write("  str类型:" + typeof(str))
			document.write("<br/> 输出json字符串:" + str)
			var obj1 = JSON.parse(str);	//将json字符串解析成json对象
			document.write("<br/>输出对象的名字: " + obj1.name)
		</script>

结果:

列:创建json字符串数组并解析成json对象

	  <script type="text/javascript" src="js/json2.js"></script>
      <script type="text/javascript">
var str2 ='[
              {"address":"上海","password":"fendou1","userName":"liayin1"}, 
              {"address":"上海","password":"fendou2","userName":"liayin2"},
              {"address":"上海","password":"fendou3","userName":"liayin3"}
             ]';
			document.write(typeof(str2));
			var obj3 = JSON.parse(str2);//将字符串解析成对象
			document.write(obj3[0].userName)
</script>

结果:

JSON对象解析

json对象解析成数组,调用stringify方法

列:创建json对象并解析成json数组

   <script type="text/javascript" src="js/json2.js"></script>
   <script type="text/javascript">
			//创建json对象
			var obj2 = {
				"name": "小青",
				"age": 22
			};
			document.write("<br/>" + obj2.name);
			var str1 = JSON.stringify(obj2);//json2解析对象
			document.write("<br/>字符串输出" + str1)
  </script>

结果:

列:创建json对象并解析成json数组

	   <script type="text/javascript" src="js/json2.js"></script>
   <script type="text/javascript">
	<script type="text/javascript">
			创建json对象
			var json = {
				name: "容儿",
				age: 23,
				address: "上海"
			};
			alert(json.name)

			var users = {
				users: [{
					name: "容儿",
					age: 23,
					address: "上海"
				}, {
					name: "祖儿",
					age: 24,
					address: "北京"
				}]
			};
			alert(users.users[0].name);
		</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值