JS中for,for...in,for...of和forEach的区别和用法实例

for循环

基本语法格式：

 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的值都存在限制。

forEach循环

基本语法格式：

   arr.forEach(function(k){
         console.log(k);
       })

依次从数组中取出元素放在k中,然后将k作为参数传递给函数

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

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

for…in循环

基本语法格式：

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]);
        }

1.下标的值可能会是字符串（String）类型

2.循环不仅会遍历数组元素，还会遍历任意其他自定义添加的属性，如，obj上面包含自定义属性，obj.name，那这次循环中也会出现此name属性

3.某些情况下，上述代码会以随机顺序循环数组

for-in循环设计之初，是给普通以字符串的值为key的对象使用的。而非数组。

for…of循环

基本语法格式：

 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 并不适用于处理原有的原生对象

总结

1.'for…in'用于迭代对象的所有'可枚举'属性，包括继承的可枚举属性, 该迭代语句可用于数组字符串或普通对象，但不能用于Map或Set对象

2.'for…of'用于'可迭代'对象，迭代其值而不是其属性，该迭代语句可以与数组，字符串Map或Set对象一起使用，但不能与普通对象一起使用。