JS中的JSON对象定义和取值[通俗易懂]

全栈程序员-站长 • 2022年4月20日下午2:00 • 未分类 • 阅读 138

大家好，又见面了，我是你们的朋友全栈君。

   1.JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 
  
   JSON的规则很简单：对象是一个无序的“‘名称:值

   '对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值'

   对”之间使用“,”（逗号）分隔。
  
   规则如下:
  
   1）映射用冒号（“：”）表示。名称:值
  
   2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
  
   3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
  
   4） 并列数据的集合（数组）用方括号(“[]”)表示。
  
   [
  
   {名称1:值,名称2:值2},
  
   {名称1:值,名称2:值2}
  
   ]
  
   5 )元素值可具有的类型：string, number, object, array, 

   true

   , 

   false

   , 

   null
  
   2.json中的五种写法：
  
   1）传统方式存储数据，调用数据
  
   复制代码代码如下:
  
   <script type=

   "text/javascript"

   > 
  
   //JS传统方式下定义"类" 
  
   function

   Person(id,name,age){ 
  
   this

   .id = id; 
  
   this

   .name = name; 
  
   this

   .age = age; 
  
   } 
  
   //JS传统方式下创建"对象" 
  
   var

   p = 

   new

   Person(20141028,

   "一叶扁舟"

   ,22);
  
   //调用类中的属性，显示该Person的信息 
  
   window.alert(p.id); 
  
   window.alert(p.name); 
  
   window.alert(p.age); 
  
   </script> 
  
   2）第一种样式：
  
   复制代码代码如下:
  
   <script type=

   "text/javascript"

   > 
  
   var

   person = { 
  
   id:001, 
  
   name:

   "一叶扁舟"

   , 
  
   age:23 
  
   } 
  
   window.alert(

   "编号:"

   +person.id); 
  
   window.alert(

   "用户名:"

   +person.name); 
  
   window.alert(

   "年龄:"

   +person.age); 
  
   </script>
  
   3）第二种样式： 
  
   复制代码代码如下:
  
   <script type=

   "text/javascript"

   > 
  
   var

   p = [ 
  
   {id:001,name:

   "一叶扁舟"

   ,age:22}, 
  
   {id:002,name:

   "无悔"

   ,age:23}, 
  
   {id:003,name:

   "无悔_一叶扁舟"

   ,age:24} 
  
   ];
  
   for

   (

   var

   i = 0; i < p.length; i++){ 
  
   window.alert(

   "编号:"

   +p[i].id); 
  
   window.alert(

   "用户名:"

   +p[i].name); 
  
   window.alert(

   "年龄:"

   +p[i].age);
  
   } 
  
   </script>
  
   4）第三种样式:
  
   复制代码代码如下:
  
   <script type=

   "text/javascript"

   > 
  
   var

   p = { 
  
   "province"

   :[ 
  
   {

   "city"

   :

   "福州"

   }, 
  
   {

   "city"

   :

   "厦门"

   }, 
  
   {

   "city"

   :

   "莆田"

   } 
  
   ] 
  
   }; 
  
   window.alert(

   "所在城市："

   + p.province[0].city); 
  
   </script>
  
   5)第四种样式：
  
   复制代码代码如下:
  
   <script type=

   "text/javascript"

   > 
  
   var

   p = { 
  
   "ids"

   :[ 
  
   {

   "id"

   :001}, 
  
   {

   "id"

   :002}, 
  
   {

   "id"

   :003} 
  
   ], 
  
   "names"

   :[ 
  
   {

   "name"

   :

   "一叶扁舟"

   }, 
  
   {

   "name"

   :

   "无悔"

   }, 
  
   {

   "name"

   :

   "无悔_一叶扁舟"

   } 
  
   ] 
  
   };
  
   for

   (

   var

   i = 0; i < p.names.length; i++){ 
  
   window.alert(

   "名字:"

   +p.names[i].name);
  
   } 
  
   for

   (

   var

   i = 0; i < p.ids.length; i++){ 
  
   window.alert(

   "id:"

   +p.ids[i].id); 
  
   }
  
   </script> 
  
   6）第五种样式:
  
   复制代码代码如下:
  
   <script type=

   "text/javascript"

   > 
  
   var

   p = { 
  
   "province"

   :[

   "福州"

   ,

   "厦门"

   ,

   "莆田"

   ] 
  
   }; 
  
   window.alert(

   "城市的个数:"

   +p.province.length); 
  
   window.alert(

   "分别是：\n"

   ); 
  
   for

   (

   var

   i=0;i<p.province.length;i++){ 
  
   window.alert(p.province[i]); 
  
   } 
  
   </script>