JavaScript-字面量物件詳解

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

字面量物件

定義:js的字面量物件,就是一種簡化的建立物件的方式,和用建構函式建立物件一樣存在於堆記憶體當中
字面量物件表示式語法:
{屬性:屬性值,屬性:屬性值,.....}
​
屬性訪問:
1.通過(.)語法訪問:obj.propertyName
通過語法訪問[]:obj["name"]
​
遍歷字面量物件
for(var temppro in obj){
}
​
我會把js中的字面量物件進行資料解析,解析後會將資料儲存在相對應的資料模型中,資料模型就是我們js中通過相對應的建構函式建立出來的一個個物件
​
​
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
   </style>
</head>
<body>
​
<input type="button" value="這是第一個按鈕" onclick="btnClick(this)"/>
<input type="button" value="這是第而個按鈕" onclick="btnClick(this)"/>
</body>
</html>
<script type="text/javascript">
//建立字面量物件
   var person={
       name:"張三",age:19,
       dog:{
           dogName:"dsf",
           dogAge:1
       },
       friends:[
           {
               friendName:"sdfg",
               friengAge:24
​
           },
           {
               friendName:"wert",
               friengAge:27
​
           },
       ]
   }
//獲取dog名稱
   console.log(person.dog.dogName);
​
   //獲取frinedName值sdfg
   console.log(person.friends[0].friendName)
​
   //遍歷person字面量物件
//tempPro可以理解成每個屬性名稱
   for(var tempPro in person){
       console.log(tempPro);
       console.log(person[tempPro]);
       //如果當前屬性名稱為friedns的時候
       if(tempPro=="friends"){
           //獲取friends
           friends=person[tempPro];
           //遍歷friends陣列
           for(var tempIdx in person[tempPro]){
               //得到friedns陣列中的每一個物件
               var tempObj=tepfriends[tempIdx];
​
           }
       }
   }
/*封裝資料模型*/
//地區的建構函式
   function region(regionName) {
       this.regionName=regionName;
       //定義學校的陣列
       this.schools=new Array();
   }
//學校的建構函式
   function school(schollName) {
       this.schollName=schollName;
       //定義班級陣列
       this.classes=new Array();
   }
​
   //班級的建構函式
   function Class(className) {
       this.className=className;
       //建立學生陣列
       this.students=new Array()
   }
​
   //定義建構函式
   //學生
   function student(studentName) {
       this.studentName=studentName;
   }
​
   //分析字面量物件
   var rootObj={
       //地區陣列
       region:[
           //地區物件
           {
               regionName:"南昌地區",
               //學校陣列
               schools:[
                   schoolName:"南昌一中",
   //班級
classes:[
   {className:"一班",
​
   }
]
               ]
           }
       ]
​
   }
​
//找到某一個同學,解析資料,將封裝的資料模型解析出來
​
//定義一個陣列,用來儲存所有地區物件的陣列
   var regionArray=new Array();
   //遍歷地區陣列
   for(var tempRegionIdx in regions){
       //得到每一個地區的物件
       var tempRegion=regions[tempRegionIdx];
       //在這裡建立物件(建構函式)
       var tempRegionObj=new Region(tempRegion.regionName);
       //將每個地區物件儲存到全域性的陣列中
       regionArray.push(tempRegionObj);
       //得到學校陣列
       var schools=tempRegion.schools;
       //遍歷陣列
       for(var tempSchoolIdx in scholls){
           //得到每一個學校的物件
           vartempSchool=schools[tempSchoolIdx];
           //建立學校的物件(建構函式)
           var tempSchoolObj=new school(tempSchool.schoolName);
​
//給當前地區新增學校物件
           tempRegionObj.schools.push(tempSchoolObj);
           //得到班級陣列
           var classes=tempSchool.classes;
           //遍歷班級陣列
           for(var tempClassIdx in classes){
               //得到每一個班級物件
               var tempClass=classes[tempClassIdx];
               //建立班級的物件
               var tempClassObj=bew Class(tempClass.className);
               //給當前的學校班級陣列新增班級物件
               tempSchoolObj.classes.push(tempClassObj);
​
​
           }
           //得到學生陣列
           var students=tempClass.students;
           //遍歷學生陣列
           for(var tempStudentIdx in students){
               //獲取每一個學生物件
               var tempStudent=students[tempStudentIdx];
               //建立學生物件
               var tempStudentObj=new Student(tempStudent.studentName);
               //給當前的班級的學生陣列新增學生物件
               tempClassObj.students.push(tempStudentObj);
               //判斷要找的同學
               if(tempStudent.studentName=="張三"){
                   console.log("\n地區:" tempRegion.regionName "\n學校:" tempSchool.schoolName)
​
//break;
               }
​
           }
       }
   }
</script>

相關文章

程式語言 最新文章