前言
在前端开发中循环是必不可少的，在很多情况下不知道该用哪种循环类型，真是让人头大 😵🐷，因此知道每种循环 ♻️ 的运行效率是武装我们自己最有效的方式。
一、循环的类型
在前端循环中，有大概八种：
第一种:普通 for 循环
for(j = 0; j < arr.length; j++) { }
第二种:优化版 for 循环(性能最高的一种)
for(j = 0,len=arr.length; j < len; j++) { }
第三种:弱化版 for 循环(性能要远远小于普通 for 循环)
for(j = 0; arr[j]!=null; j++) { }
第四种:foreach 循环(性能比普通 for 循环弱)
arr.forEach(function(e){ });
第五种:foreach 变种(比普通 foreach 弱)
Array.prototype.forEach.call(arr,function(el){ });
第六种:forin 循环(效率是最低)
for(j in arr) { }
第七种:map 遍历(实际效率还比不上 foreach)
arr.map(function(n){ });
第八种:forof 遍历(需要 ES6 支持)
for(let value of arr) { });
二、循环的性能
三、循环的区别
一、for…in 和 for…of 的区别
- 推荐在循环对象属性的时候，使用
for...in,在遍历数组的时候的时候使用for...of。 for...in循环出的是 key，for...of循环出的是 value- 注意，
for...of是 ES6 新引入的特性。修复了 ES5 引入的for...in的不足 for...of不能循环普通的对象，需要通过和Object.keys()搭配使用
for…in 循环数组下面的对象时会把 key 也拿到[{id:123,name:”王五”}{id:234,name:”张三”}]遍历对象属性
for…of 循环数组下面的对象时会拿到 name[“张三”,”李四”]遍历对象元素
二、forEach()和 map()遍历的区别
相同点：
- 都是循环遍历数组中的每一项。
- forEach() 和 map() 里面每一次执行匿名函数都支持 3 个参数：数组中的当前项 item,当前项的索引 index,原始数组 input。
- 匿名函数中的 this 都是指 Window。
- 只能遍历数组。
不同点： 1.forEach()「没有返回值」
参数：value 数组中的当前项, index 当前项的索引, array 原始数组；
数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
理论上这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改；但是可以自己通过数组的索引来修改原来的数组；
2.map()「有返回值，可以 return」
参数：value 数组中的当前项,index 当前项的索引,array 原始数组；
区别：map 的回调函数中支持 return 返回值；return 的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；
总结
循环方式对比是专门对比普通 for 循环和 foreach,以及其它遍历方式在大量运算后的结果，目前对比三大类型,for 循环,forin,foreac，以及 for 循环的几种不同运用，可以看到,不同的方式差距较大，在综合考虑性能和方便性和可靠性上还是多选用 for 吧，在循环数组的时候还是用 for 循环吧，而在循环对象的时候再用 for…in
