for、forEach 、for in、for of 、map 循环的区别

for 遍历数组

//对象数组
var  arr = [
		{Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三'}
	]
for (var i=0; i

结果：

//数组
var arr = ["星期一","星期二","星期三"]
for (var j=0; j

结果：

forEach：遍历数组，但不能使用break、continue和return语句

//对象数组
var  arr = [
		{guangzhou: '广州', shanghai: '上海', beijing: '北京'},
		{Monday: '星期一', Tuesday: '星期二', 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()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法只在给定属性存在于对象实例中时，才会返回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 也支持
//我也还没有试过，这里就先不测试了，之后再研究下

结果：

map遍历数组

   var arr = ['星期一', '星期二', '星期三'];
      var a = arr.map(function(item){
        console.log(item)
        return item  === '星期二'
    })
    console.log(a)

结果：

map 有返回值。并且可以返回一个结果数组。但是map 遍历对象的话也会报错，所以map只能循环数组或者对象数组

var obj = {guangzhou: '广州', shanghai: '上海', beijing: '北京'}
    var a = obj.map(function(item){
        console.log(item)
        return item  === '广州'
    })
    console.log(a)

结果：

总结：
for（最原始的写法）、 forEach（ES5，但是它不支持使用break、continue和return语句）也就是说明没有返回值、for…of（ES6，循环数组的元素值）这三个是循环数组（对象数组）的；
for…in循环数组索引、对象的属性，但使用 for…in 原型链上的所有属性都将被访问，用 hasOwnProperty() 方法解决。map方法有返回值，可以return 出来

原文地址： https://blog.csdn.net/demiling/article/details/83146361