for forEach for in for of 循环的区别

很基础的东西，记录下来方便自己

for：遍历数组

//对象数组var arr = [{Monday: '星期一', Tuesday: '星期二', 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: '星期一', 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 也支持//我也还没有试过，这里就先不测试了，之后再研究下

结果：

总结：

for（最原始的写法）、forEach（ES5，但是它不支持使用break、continue和return语句）、for…of（ES6，循环数组的元素值）这三个是循环数组（对象数组）的；

for…in循环数组索引、对象的属性，但使用 for…in 原型链上的所有属性都将被访问，用hasOwnProperty()方法解决。