從前面的文章我們可以看出 Vue 是用物件的方式來存取資料，這邊我們就複習一下物件和陣列的差別。
陣列
假設我們今天要計算全班同學的數學成績平均(假設班上只有3個人)，在沒有陣列的狀況下，寫法如下 。
1
2
3
4
5
| var math1 = 80;
var math2 = 90;
var math3 = 60;
var total = math1 + math2 + math3;
var average = total / 3
|
但是如果使用陣列之後，可以這樣寫。
1
2
3
4
5
6
| var math = [80,90,60];
var total = 0;
for(var i=0;i<math.length;i++){
total += math[i]
}
var average_math = total / 3
|
雖然和第一個程式相比感覺程式沒有減少太多程式碼，但是當如果我們變數變多，比如50個人，就可以減少宣告很多變數，達到更簡潔的程式碼。
物件
假設我們今天除了上面的數學考試，還多了英文考試，此時如果我們要紀錄每個同學的名字還有成績，如果用陣列的寫法如下。
1
2
3
| var name = ['Leo','Amy','Perter']
var math = [80,90,60];
var english = [60,80,90];
|
假設今天有很多個班級，如果每個班級都傳上面的變數，這樣我們要如何來分辨不同的班級，此時就可以使用到物件。
1
2
3
4
5
6
7
8
9
10
11
| var class1 = {
name:['Leo','Amy','Perter'],
math:[80,90,60],
english:[60,80,90]
}
var class2 = {
name:['Jack','Alleb','Ray'],
math:[80,90,60],
english:[60,80,90]
}
|
物件包物件
宣告方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| var class1 = {
'Leo':{
math:80,
english:60
},
'Jack':{
math:90,
english:80
},
'Amy':{
math:60,
english:55
}
}
|
取值方法
1
| console.log(class1.Leo.math)
|
物件包方法
宣告方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| var class1 = {
'Leo':{
math:80,
english:60
},
'Jack':{
math:90,
english:80
},
'Amy':{
math:60,
english:55
},
show:function(){
console.log('class1')
}
}
|
取值方法
陣列包物件
宣告方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| var clas = [
{
'Leo':{
math:80,
english:60
},
'Jack':{
math:90,
english:80
},
'Amy':{
math:60,
english:55
},
show:function(){
console.log('class1')
}
},
{
'Leo':{
math:80,
english:60
},
'Jack':{
math:90,
english:80
},
'Amy':{
math:60,
english:55
},
show:function(){
console.log('class2')
}
}
];
|
取值方法
1
| console.log(clas[0].Leo.math)
|