比较JavaScript中for、forEach、for...in、for...of的区别

for 循环

For 循环是经常创建循环时需要用的。
语法：

	for (语句 1; 语句 2; 语句 3) {
	     要执行的代码块;
	}

(1)三个表达式都可以省略,但是表达式之间的分号不能省略

(2)语句 1：给循环变量、其他变量进行初始化

(3)语句 2：控制循环体语句是否执行

(4)语句 3：使循环趋向结束的语句

---

for 循环遍历数组

var arr = ["唐僧","孙悟空","猪八戒","沙僧","白龙马","蜘蛛精","白骨精"];
for(var i = 0; i < arr.length; i++)
{
    if(i===1)
    {
        console.log("跳过孙悟空！！！");
        continue;
    }
    if(i===6)
    {
        console.log("退出循环！！！不打印白骨精");
        break;
    }
    console.log(arr[i]);
}

---

for 循环遍历对象

for 循环无法直接遍历对象，可以通过Object.keys(）函数将对象转为数组，然后再遍历。

var person = {
    name:"孙悟空",
    age:5777,
    gender:"男"
};
var obj = Object.keys(person);
for (var i = 0; i < obj.length; i++) {
    console.log("person." + obj[i] + ":" + person[obj[i]]);
}

---

for 循环遍历的优缺点：

优点：

1. 可以在遍历的过程中随时修改其中的值
2. 可以使用continue语句跳过一次循环和使用 break语句结束循环和return语句。

缺点：

1. 无法直接遍历对象。
2. 需要处理边界问题。

---

forEach

forEach() 方法为每个数组元素调用一次函数（回调函数）。（官方解释）
语法：

Array.forEach(fucntion(value ,index ,Array){
	console.log(变量);//代码块;
});

forEach()方法需要一个回调函数作为参数

1. 这种由我们创建但是不需要我们调用的函数就称为回调函数。
2. 数组中有几个元素，回调函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以自己来 定义形参，来读取这些内容
3. 浏览器会在回调函数中传递三个参数：
   第一个参数value，就是当前正在遍历的元素。
   第二个参数index，就是当前正在遍历的元素的索引。
   第三个参数Array，就是当前正在遍历的数组。
   添加第一个参数value

forEach遍历

var arr = ["唐僧", "孙悟空", "猪八戒", "沙僧", "白龙马", "蜘蛛精", "白骨精"];
arr.forEach(function (value) {
    console.log("value="+value);
})

添加第二个参数index

var arr = ["唐僧", "孙悟空", "猪八戒", "沙僧", "白龙马", "蜘蛛精", "白骨精"];
arr.forEach(function (value, index) {
    console.log("index="+index);
})

添加第三个参数Array

var arr = ["唐僧", "孙悟空", "猪八戒", "沙僧", "白龙马", "蜘蛛精", "白骨精"];
arr.forEach(function (value, index,Array) {
    console.log("Array="+Array);
})

---

forEach()遍历的优缺点：

优点：

1. 使用时更加简洁
2. 不用关心索引问题

缺点：

1. 支持IE8以上的浏览器，IE8及以下的浏览器都不支持。
2. 不能遍历对象
3. 不可以在遍历的过程中随时修改其中的值
4. 不可以使用continue语句跳过一次循环和使用 break语句结束循环

for…in

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。（官方解释）
for...in循环里面的index是 String类型 的。
语法：

for(var index in arr)
{
    console.log(index);//代码块
}

---

for…in遍历数组

for ... in遍历数组得到是数组索引。
for ... in是为遍历对象属性而构建的,不建议使用遍历数组

var arr = ["唐僧", "孙悟空", "猪八戒", "沙僧", "白龙马", "蜘蛛精", "白骨精"];
for(var index in arr)
{
    console.log(index);//代码块
}

---

for…in遍历对象

var person = {
    name:"孙悟空",
    age:5777,
    gender:"男"
};
for(var index in person)
{
    console.log("person." + index + ":" + person[index]);
}

---

for…in遍历的优缺点：

优点：

1. 可以更方便的去检查对象属性
2. 能够很快得到对象的索引

缺点：

1. 使用for...in来遍历数组，原型链上的属性也会被遍历到，效率较低，强烈不推荐使用遍历数组。
2. 遍历数组时，数组的键名为数字，但是for…in循环的时候是以字符串作为键名如"1"、"2"、"3"。
3. 不可以在遍历的过程中随时修改其中的值
4. 不可以使用continue语句跳过一次循环和使用 break语句结束循环

---

for…of

for...of语句在用于遍历对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）并为每个不同属性的值执行语句。
参数value当前数据
语法：

for(var value of arr)
{
    console.log(index);//代码块
}

---

for…of遍历数组

var arr = ["唐僧", "孙悟空", "猪八戒", "沙僧", "白龙马", "蜘蛛精", "白骨精"];
for (var value of arr) {

    if (value === "孙悟空") {
        console.log("跳过孙悟空！！！");
        continue;
    }
    if (value === "白骨精") {
        console.log("退出循环！！！不打印白骨精");
        break;
    }
    console.log(value);
}

---

for…of遍历对象

for...of和for 循环一样无法直接遍历对象。
可以和for 循环一样通过Object.keys(）函数将对象转为数组，然后再遍历。

var person = {
    name: "孙悟空",
    age: 5777,
    gender: "男"
};
var obj = Object.keys(person);
for (var value of obj) {

    console.log("person." + value+ ":" + person[value]);
}

---

for…of遍历的优缺点:

优点：

1. 遍历数组的时候直接遍历其中的数据，最简洁的遍历数组方法。
2. 可以在遍历的过程中随时修改其中的值
3. 可以使用continue语句跳过一次循环和使用 break语句结束循环和return语句

缺点：

1. 无法直接遍历对象。