JavaScript中forEach，for in，for of的区别

蔚落 2022-04-14 03:21 272阅读 0赞

在学习TypeScript时，又遇见了for of，一直以来对于这三者之间的区别都有些模糊，现在就通过几个简单的例子，做一下系统的区分。  
**上代码：**

var arr = [1,2,3,4,5,6];
    console.log(arr);

**运行结果：**  
![在这里插入图片描述][20181123161950684.png]  
先简单输出一下，方便接下来进行比较；

## 一：forEach（） ##

var arr = [1,2,3,4,5,6];
    arr.forEach(function(value){
        console.log(value);
    });

**运行结果：**  
![在这里插入图片描述][20181123162507848.png]  
*尝试添加break语句，报错信息如下：*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
**分析：**  
使用forEach方法可以将数组中的元素进行循环遍历输出；但是有一个缺点就是他不能在某一个条件下跳出循环。

## 二：for in ##

var arr1 = [11,22,33,44,55,66];
    for (var n in arr1){
        console.log(n);
    }；

运行结果为：  
![在这里插入图片描述][20181123163340681.png]  
卧槽？？？？？  
什么情况？？循环中输出的n竟然不是数组中的元素。  
在使用for in循环时，循环的n是下标！是数组的键值。  
修改代码：

var arr1 = [11,22,33,44,55,66];
    for (var n in arr1){
        console.log(arr1[n]);
    }；

运行结果：  
![在这里插入图片描述][20181123163816817.png]  
**分析：**  
此时已经可以正常输出数组的元素了；  
在使用for in循环时，他循环的是数组集合中的下标，即键的名字；在js中每一个对象和数组都是一个个键值对的集合，在这个数组中一共有6个键值对，那么他所循环的就是数组的键Key而不是value；  
**for in循环的方法虽然可以用来遍历数组，但是他被设计出来实际上是为了遍历对象的属性的；因此：for in的作用是遍历对象【注意for in有时会遍历出一些你不想要的东西，他会把原型中的属性方法遍历出来，有一种恶心的感觉】**

var obj = {
        arr1:[1,2,3],
        arr2:[3,4,5],
        age:12,
        name:"zs"
    };
    for(var n in obj){
        console.log(n + "：" + obj[n]);
    }

**运行结果为：**  
![在这里插入图片描述][2018112316500845.png]

## 三： for of ##

在forEach和for in的基础上ES6做出了拓展，而身为JavaScript的超集TypeScript他也包含了for of的强大功能：  
1：他可以在满足一定条件的情况下退出循环（弥补forEach的缺陷）

var arr2 = [11,22,33,44,55,66];
    for (var n of arr2){
        if (n > 3){
            break;
        }
        console.log(arr2[n]);
    }

**运行结果：**  
![在这里插入图片描述][20181123165744120.png]  
**分析：**  
从上述可以看出for of的遍历基础仍然是key值；  
而且他也可以在满足一定条件的情况下break出来；  
在TypeScript中的for of循环中不会像for in循环一样将不该遍历的遍历出来；

## 总结 ##

1：forEach 缺点是不能够break；  
2：for in虽然可以用来遍历数组，但是他主要是用来遍历对象的；而且他还会将原型中的方法遍历出来；  
3：for of是这两者的强化版，可以break，也不会遍历出原型中的东西；

**简单的将这三者进行自认为系统的总结，如果有错误非常欢迎能够指正**

[20181123161950684.png]: /images/20220414/467e9ad0834f465ab6c4a3ae82cfad53.png
[20181123162507848.png]: /images/20220414/64b1510ee43641cb8b605ca676fa2f2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220414/28715f07e2464e1e802794fbc6977308.png
[20181123163340681.png]: /images/20220414/fb8f6ff43b794a07a50ad4d51b24735c.png
[20181123163816817.png]: /images/20220414/16b1554e0c8349f7afa89bb3a69b6ec5.png
[2018112316500845.png]: /images/20220414/2173084a281a43f7a83b63c8476f0339.png
[20181123165744120.png]: /images/20220414/10776635ffee48d898fa428231a45d00.png