從前面的文章我們可以看出 Vue 是用物件的方式來存取資料，這邊我們就複習一下物件和陣列的差別。

陣列

假設我們今天要計算全班同學的數學成績平均(假設班上只有3個人)，在沒有陣列的狀況下，寫法如下 。

var math1 = 80;
var math2 = 90;
var math3 = 60;
var total = math1 + math2 + math3;
var average = total / 3

但是如果使用陣列之後，可以這樣寫。

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個人，就可以減少宣告很多變數，達到更簡潔的程式碼。

物件

假設我們今天除了上面的數學考試，還多了英文考試，此時如果我們要紀錄每個同學的名字還有成績，如果用陣列的寫法如下。

var name = ['Leo','Amy','Perter'] //紀錄學生名字
var math = [80,90,60]; //紀錄數學成績
var english = [60,80,90]; //紀錄英文成績

假設今天有很多個班級，如果每個班級都傳上面的變數，這樣我們要如何來分辨不同的班級，此時就可以使用到物件。

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]
}

物件包物件

宣告方法

var class1 = {
	'Leo':{
		math:80,
		english:60
	},
	'Jack':{
		math:90,
		english:80
	},
	'Amy':{
		math:60,
		english:55
	}
}

取值方法

console.log(class1.Leo.math) //取得 Leo 數學成績 80 分

物件包方法

宣告方法

var class1 = {
	'Leo':{
		math:80,
		english:60
	},
	'Jack':{
		math:90,
		english:80
	},
	'Amy':{
		math:60,
		english:55
	},
	show:function(){
		console.log('class1')
	}
}

取值方法

class1.show() // 記得一定要加()

陣列包物件

宣告方法

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')
		}
	}
];

取值方法

console.log(clas[0].Leo.math)//取得陣列0中Leo的英文成績