[关闭]
@GivenCui 2016-05-27T13:45:04.000000Z 字数 3291 阅读 682

重新认识字面量对象

js高级

目录

[JS课程合集跳转链接][1]

一、字面量对象的概念

JS的字面量对象, 就是最简单化的创建对象的方式, 和用构造函数创建的对象一样存在于堆内存中.

二、字面量对象表达式的语法

语法 { 属性1 : 属性值 , 属性2 : 属性值, .... }
属性访问
1. 通过" . " 语法访问    eg. obj.propertyName
2. 通过" [ ] " 语法访问    eg. obj["propertyName"]

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>创建字面量对象</title>
  6.     <script type = "text/javascript">
  7. // 创建字面量对象
  8. // 里面可以是任意类型
  9. // 数组中也可以放对象
  11. var person = {
  12.     name : "周大生",
  13.     age : 18,
  14.     isMarried : false,
  15.     dog : {
  16.         name : "Nimo",
  17.         age : 0.2
  18.     },
  19.     friends : [
  20.         {
  21.             name : "杜甫",
  22.             age : 18
  23.         },
  24.         {
  25.             name : "诺顿",
  26.             age : 500
  27.         },
  28.         {
  29.             name : "乔布斯",
  30.             age : 30
  31.         },
  32.         {
  33.             name : "霍金",
  34.             age : 48
  35.         }        
  36.     ] 
  37. };
  39. // 获得"Nimo"这个属性值
  40.     console.log(person.dog.name);
  42. // 获得"杜甫"这个属性值
  43.     console.log(person.friends[0].name);
  45.     </script>
  46. </head>
  47. <body>
  49. </body>
  50. </html>

三、遍历字面量对象

用 for-in 方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>遍历字面量对象</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  10. // 创建字面量对象
  11. // 里面可以是任意类型
  12. // 数组中也可以放对象
  14. var person = {
  15.     name : "周大生",
  16.     age : 18,
  17.     isMarried : false,
  18.     dog : {
  19.         name : "Nimo",
  20.         age : 0.2
  21.     },
  22.     friends : [
  23.         {
  24.             name : "杜甫",
  25.             age : 18
  26.         },
  27.         {
  28.             name : "诺顿",
  29.             age : 500
  30.         },
  31.         {
  32.             name : "乔布斯",
  33.             age : 30
  34.         },
  35.         {
  36.             name : "霍金",
  37.             age : 48
  38.         }        
  39.     ] 
  40. };
  43. //  遍历自变量对象
  45. // tempPro是每个属性的名字
  46. // 想得到friends中的每个对象的名字和年龄
  47. for (var tempPro in person) {
  48.     // console.log( tempPro);
  49.     // console.log(person[tempPro]);
  50.     if (tempPro === 'friends'){
  51.         // 遍历friends数组
  52.         for (var index in person[tempPro]) {
  53.             console.log("我的朋友是" + person[tempPro][index].name + ",年龄是"+ person[tempPro][index].age);
  54.         }
  55.     }
  56. }
  58. </script>
  59. </body>
  60. </html>

字面量对象的实例(创建与遍历)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字面量对象的实例(创建与遍历)</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  10. // 分析字面量对象
  11. // 字面量对象也可以搭建一种树形结构
  13. // 假数据,用来测试系统的
  14.     //分析字面量对象
  15.         var rootObj = {
  16.             //地区数组
  17.             regions : [
  18.                 //地区对象
  19.                 {
  20.                     regionName : "北京地区",
  21.                     //学校数组
  22.                     schools : [
  23.                         {
  24.                             schoolName : "北京一中",
  25.                             //班级数组
  26.                             classes : [
  27.                                 {
  28.                                     className : "H5-1604",
  29.                                     //学生数组
  30.                                     students : [
  31.                                         {
  32.                                             studentName : "丁丁"
  33.                                         },
  34.                                         {
  35.                                             studentName : "马丹丹"
  36.                                         }
  37.                                     ]
  38.                                 },
  39.                                 {
  40.                                     className : "iOS-1602",
  41.                                     //学生数组
  42.                                     students : [
  43.                                         {
  44.                                             studentName : "丁环宇"
  45.                                         },
  46.                                         {
  47.                                             studentName : "张俊"
  48.                                         }
  49.                                     ]
  50.                                 }
  51.                             ]
  52.                         },
  53.                         {
  54.                             schoolName : "北京二中",
  55.                             //班级数组
  56.                             classes : [
  57.                                 {
  58.                                     className : "H5-1605",
  59.                                     //学生数组
  60.                                     students : [
  61.                                         {
  62.                                             studentName : "刘升升"
  63.                                         },
  64.                                         {
  65.                                             studentName : "张三三"
  66.                                         }
  67.                                     ]
  68.                                 },
  69.                                 {
  70.                                     className : "iOS-1603",
  71.                                     //学生数组
  72.                                     students : [
  73.                                         {
  74.                                             studentName : "丁丁"
  75.                                         },
  76.                                         {
  77.                                             studentName : "肖小军"
  78.                                         }
  79.                                     ]
  80.                                 }
  81.                             ]
  82.                         }
  83.                     ]
  84.                 }
  85.             ]
  86.         }
  90. //  找到丁丁同学,并且打印其相关信息
  91. //  得到地区数组
  92. var regions = rootObj.regions;
  94. // 遍历地区数组
  95. for (var tempRegionIdx in regions) {
  96.     //得到每个地区对象
  97.     var tempRegion = regions[tempRegionIdx];
  98.     //得到学校数组
  99.     var schools = tempRegion.schools;
  100.     // 遍历学校数组
  101.     for (var tempSchoolsIdx in schools) {
  102.         // 得到每个学校对象
  103.         var tempSchool = schools[tempSchoolsIdx];
  104.         // 得到班级数组
  105.         var classes = tempSchool.classes;
  106.         // 遍历班级数组
  107.         for ( var tempClassIdx in classes) {
  108.             // 得到每一个班级对象
  109.             Var tempClass = classes[tempClassIdx];
  110.             // 得到学生数组
  111.             var students = tempClass.students;
  112.             // 遍历学生数组
  113.             for(var tempStudentIdx in students){
  114.                 // 得到每一个学生对象
  115.                 var tempStudent = students[tempSchoolsIdx];
  116.                 // 判断要找的学生
  117.                 if(tempStudent.name === '学生test'){
  118.                     console.log("\n 地区 : "+tempRegion.name + "\n 学校 : " + tempSchool.name + "\n 班级 :" + "\n 学生 : " + tempStudent.name);
  119.                     break;
  120.                 }
  121.             }
  122.         }
  123.     }
  124. }
  126. </script>
  127. </body>
  128. </html>

四、数据模型

数据模型 : 我们会把JS中的字面量对象进行数据解析,解析后的数据会存储在相应的数据模型中,数据模型就是JS中的通过相应构造函数创建出来的一个个对象.

  1. /**************封装数据模型***************/
  3. // 最后把地区对象存到数组中
  4. // 地区的构造函数
  5. function Region (regionName) {
  6.     this.regionName = regionName;
  7.     // 学校数组
  8.     this.schools = new Array();
  9. }
  11. // 学校的构造函数'
  12. function School (schoolName) {
  14.     this.schoolName = schoolName;
  15.     // 班级数组
  16.     this.classes = new Array();
  17. }
  19. // 班级的构造函数
  20. function Class (className) {
  21.     this.className = className;
  22.     // 学生数组
  23.     this.students = new Array();
  24. }
  26. // 学生的构造函数
  27. function Student (studentName) {
  28.     this.studentName = studentName;
  29. }
  30. /********************************************/
  32. //在解析了*每一个对象*(用for-in遍历)后在相应的信息存入对应的对象
  33. // 每一个json字面量对象 ====> new一个实例对象
  34. // json字面量对象不是真正的对象概念,只是一种数据结构而已.
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注