循环: for、for...in、for...of、forEach、map

for:遍历数组

//  数组对象
var  arr = [
		{ a: 'a', b: 'b', c: 'c' },
		{ a: 'a1', b: 'b1', c: 'c1' },
		{ a: 'a2', b: 'b2', c: 'c2' }
	]
for (var i=0; i<arr.length;i++){ 
    // i是下标(索引)
	console.log(i)
	console.log(arr[i]) 
}
// 结果
// 下标是0
0
{a: 'a', b: 'b', c: 'c'}
// 下标是1
1
{a: 'a1', b: 'b1', c: 'c1'}
// 下标是2
2
{a: 'a2', b: 'b2', c: 'c2'}

///

//数组
var arr2 = ["星期一","星期二","星期三"]
for (var j=0; j<arr2.length;j++){
    // j是下标(索引)
	console.log(j)
	console.log(arr2[j])
}
// 结果
// 下标是0
0
星期一
// 下标是1
1
星期二
// 下标是2
2
星期三

forEach:遍历数组,但不能使用return、break、continue语句

// 数组对象
var  arr3 = [
		{guangzhou: '广州', shanghai: '上海', beijing: '北京'},
		{Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三'}
	]
arr3.forEach( function (value,index) { 
    //第一个参数(value)是值,第二个参数(index)是下标(索引)
	console.log(value)
	console.log(index)
})

返回结果:
在这里插入图片描述


// 数组
var arr4 = ["星期一","星期二","星期三"];
arr4.forEach( function (value,index) {
        //第一个参数(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()方法可以检测一个属性是存在于实例中,还是存在于原型中。这个方法只在给定属性存在于对象实例中时,才会返回true。

//数组
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() 方法解决。

猜你喜欢

转载自blog.csdn.net/qq_37148353/article/details/120753169