【JavaScript中for、for...in、for...of、forEach的区别和用法】

1.for循环

1.1基本语法格式：

for(初始化变量;条件表达式;操作表达式){
	   
	       循环体语句;
	   }

普通for循环在Array和Object中都可以使用。for循环中可以使用return、break等来中断循环。

//遍历数组
        var arr = [1,2,3,4,5];
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }

//遍历对象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k=0;k<3;k++){
            console.log(obj['x'+k]);
        }

在遍历对象时，显然存在着很大的限制，对属性的命名和k的值都存在限制。

2.forEach循环-ES5

2.1基本语法格式：

☀️在ES5中，引入了新的循环，即forEach循环。使用forEach循环遍历数组，代码如下：

var arr = [1, 2, 3];
arr.forEach(function (i) {
    console.log(i);
})

运行结果：
1
2
3

---

☀️forEach方法为数组中含有有效值的每一项执行一次callback函数，那些已删除（使用 delete 方法等情况）或者从未赋值的项将被跳过（不包括那些值为undefined或null的项）。callback 函数会被依次传入三个参数：
1、数组当前项的值（data）
2、数组当前项的索引（index）
3、数组对象本身（arr）

var arr = [];
arr[0] = "a";
arr[3] = "b";
arr[10] = "c";
arr.name = "Hello world";
arr.forEach(function (data, index, array) {
    console.log(data, index, array);
});

运行结果：
a 0 [“a”, empty × 2, “b”, empty × 6, “c”, name: “Hello world”]
b 3 [“a”, empty × 2, “b”, empty × 6, “c”, name: “Hello world”]
c 10 [“a”, empty × 2, “b”, empty × 6, “c”, name: “Hello world”]

这里的 index 是 Number 类型，并且也不会像 for…in 一样遍历原型链上的属性。所以，使用 forEach 时，我们不需要专门地声明 index 和遍历的元素，因为这些都作为回调函数的参数。

---

//遍历数组
        var arr = [3,2,3,9,5];
         arr.forEach(function(value,arr){
            console.log(value);
         })

注意：.forEach()是Array原型的一种方法，它允许您遍历数组的元素， .forEach()不能遍历对象。forEach 方法没办法使用 break 语句跳出循环，或者使用return从函数体内返回。

3.for…in循环

3.1基本语法格式：

for(var 变量  in  数组名或集合名)
		 {
		    数组名[变量]
		 }

变量中存放的数组或集合的键值（也就是对象集合的属性）

---

遍历数组

 //遍历数组
        var arr = [1,2,3,4,5];
        for(var i in arr){
            console.log(arr[i]);
        }

---

遍历对象

//遍历对象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k in obj){
            console.log(obj[k]);
        }

var person = {
    name: "张三",
    age: 2
};
for (var i in person) {
    console.log(i, person[i]);
}

运行结果为：
name 张三
age 2

需要注意的是， for…in 遍历属性的顺序并不确定，即输出的结果顺序与属性在对象中的顺序无关，也与属性的字母顺序无关，与其他任何顺序也无关。

for…in 只能遍历“可枚举的属性”， length 属于不可枚举属性，实际上， Array 对象还有许多其他不可枚举的属性。看如下遍历数组的例子：

var arr = [1, 2, 3];
arr.name = "Hello world";//给arr添加name属性
for (var i in arr) {
    console.log(i, arr[i]);
}

运行结果为：
0 1
1 2
2 3
name Hello world

for…in 不仅仅遍历 array 自身的属性，其还遍历 array 原型链上的所有可枚举的属性。下面我们看个例子：

Array.prototype.fatherName = "Father";//给Array的原型添加属性
var arr = [1, 2, 3];
arr.name = "Hello world";
for (var i in arr) {
    console.log(i, arr[i]);
}

运行结果为：
0 1
1 2
2 3
name Hello world
fatherName Father

for-in 并不适合用来遍历 Array 中的元素，其更适合遍历对象中的属性，这也是其被创造出来的初衷。

4.for…of循环-ES6

4.1基本语法格式:

 for(var 变量 of 数组名或集合名) 
		 {
		     console.log(变量);
		 }

变量中存放的是数组或集合中的元素。

 //遍历数组
         var arr = [3,2,3,9,5];
         for(var value of arr){
            console.log(value);
         }

//遍历对象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k of Object.entries(obj)){
            console.log(k);
        }

entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
迭代对象中数组的索引值作为 key， 数组元素作为 value。

1.可以避免所有 for-in 循环的陷阱
2.不同于 forEach()，可以使用 break, continue 和 return
3.for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
4.它也支持字符串的遍历
5.for-of 并不适用于处理原有的原生对象

5.总结

1.'for…in’用于迭代对象的所有’可枚举’属性，包括继承的可枚举属性, 该迭代语句可用于数组字符串或普通对象，但不能用于Map或Set对象
2.'for…of’用于’可迭代’对象，迭代其值而不是其属性，该迭代语句可以与数组，字符串Map或Set对象一起使用，但不能与普通对象一起使用。