JavaScript JSON创建与解析

最新推荐文章于 2025-04-17 08:25:53 发布

birdlun

最新推荐文章于 2025-04-17 08:25:53 发布

阅读量421

点赞数

CC 4.0 BY-SA版权

分类专栏： 04 javascript 05 jquery

本文链接：https://blog.youkuaiyun.com/Birdmotianlun/article/details/95065123

04 javascript 同时被 2 个专栏收录

25 篇文章

订阅专栏

05 jquery

16 篇文章

订阅专栏

本文深入讲解JSON（JavaScript Object Notation）的基本概念与应用，涵盖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>