1. 程式人生 > >for、forEach 、for in、for of 迴圈的區別

for、forEach 、for in、for of 迴圈的區別

很基礎的東西,記錄下來方便自己

for:遍歷陣列

//物件陣列
var  arr = [
		{Monday: '星期一', Monday: '星期二', Wednesday: '星期三'}
	]
for (var i=0; i<arr.length;i++){ // i是下標(索引)
	console.log(i)
	console.log(arr[i])
}

結果: 在這裡插入圖片描述

//陣列
var arr = ["星期一","星期二","星期三"]
for (var j=0; j<arr.length;j++){// j是下標(索引)
	console.log(j)
	console.log(arr[j])
}

結果: 在這裡插入圖片描述

forEach:遍歷陣列,但不能使用break、continue和return語句

//物件陣列
var  arr = [
		{guangzhou: '廣州', shanghai: '上海', beijing: '北京'},
		{Monday: '星期一', Monday: '星期二', Wednesday: '星期三'}
	]
arr.forEach(function(value,index){ //第一個引數是值,第二個引數是下標(索引)
	console.log(value)
	console.log(index)
})

結果: 在這裡插入圖片描述

//陣列
var arr = ["星期一"
,"星期二","星期三"]; arr.forEach(function(value,index){//第一個引數是值,第二個引數是下標(索引) console.log(value) console.log(index) })

結果: 在這裡插入圖片描述

for…in:遍歷陣列索引、物件的屬性 使用for…in遍歷時,原型鏈上的所有屬性都將被訪問 例如:

//陣列
var arr = ["星期一","星期二","星期三"];
Array.prototype.something = ["放假","休息咯"];
for (var i in arr){ // i是下標(索引)
	console.log(arr[i])
}

結果: 在這裡插入圖片描述 如果把該例子的陣列,寫成像上面的物件陣列,效果與陣列也是一樣的,就不再次用物件陣列來測試了。

//物件
var obj = {guangzhou: '廣州', shanghai: '上海', beijing: '北京'}
Object.prototype.something2={shenzhen:'深圳'}
for (var i in obj){ 
	console.log(obj[i])
}

結果:

解決方法:使用hasOwnProperty() hasOwnProperty()方法返回一個布林值,判斷物件是否包含特定的自身(非繼承)屬性。

//陣列
var arr = ["星期一","星期二","星期三"];
Array.prototype.something = ["放假","休息咯"];
for (var i in arr){
	if(arr.hasOwnProperty(i)){ 
		console.log(arr[i])
	}
}

結果: 在這裡插入圖片描述

//物件
var obj = {guangzhou: '廣州', shanghai: '上海', beijing: '北京'}
Object.prototype.something2={shenzhen:'深圳'}
for (var i in obj){ 
	if(obj.hasOwnProperty(i)){
		console.log(obj[i])
	}
}

結果: 在這裡插入圖片描述

for…of:遍歷陣列的值

//陣列
var arr = ["星期一","星期二","星期三"];
for (var i of arr){ //i是值
	console.log(i) 
}
//物件
var obj = {guangzhou: '廣州', shanghai: '上海', beijing: '北京'}
for (var i of obj){ //i是值
	console.log(i)
}
//物件會報錯:Uncaught TypeError: obj is not iterable
//不能遍歷一個普通的物件,可以通過 內建Object.keys() 方法讓 for..of 也支援
//我也還沒有試過,這裡就先不測試了,之後再研究下

結果: 在這裡插入圖片描述

總結: for(最原始的寫法)、 forEach(ES5,但是它不支援使用break、continue和return語句)、for…of(ES6,迴圈陣列的元素值)這三個是迴圈陣列(物件陣列)的; for…in迴圈陣列索引、物件的屬性,但使用 for…in 原型鏈上的所有屬性都將被訪問,用 hasOwnProperty() 方法解決。