起源：juejin.im/post/5ea63f3ef265da47b177b4b6
几种遍历办法中for执行最快，它没有任何额定的函数调用栈和上下文。但在理论开发中咱们要联合语义话、可读性和程序性能，去抉择到底应用哪种计划。上面来看for , foreach , map , for...in , for...of五种办法现场battle。
for
我是最早呈现的一方遍历语句，在座的各位需称我一声爷爷。我能满足开发人员的绝大多数的需要。
// 遍历数组let arr = [1,2,3];for(let i = 0;i < arr.length;i++){ console.log(i) // 索引，数组下标 console.log(arr[i]) // 数组下标所对应的元素}// 遍历对象let profile = {name:"April",nickname:"二十七刻",country:"China"};for(let i = 0, keys=Object.keys(profile); i < keys.length;i++){ console.log(keys[i]) // 对象的键值 console.log(profile[keys[i]]) // 对象的键对应的值}// 遍历字符串let str = "abcdef";for(let i = 0;i < str.length ;i++){ console.log(i) // 索引 字符串的下标 console.log(str[i]) // 字符串下标所对应的元素}// 遍历DOM 节点let articleParagraphs = document.querySelectorAll('.article > p');for(let i = 0;i<articleParagraphs.length;i++){ articleParagraphs[i].classList.add("paragraph"); // 给class名为“article”节点下的 p 标签增加一个名为“paragraph” class属性。}forEach
我是ES5版本公布的。按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稠密数组上）。我是 for 循环的加强版。
// 遍历数组let arr = [1,2,3];arr.forEach(i => console.log(i))// logs 1// logs 2// logs 3// 间接输入了数组的元素//遍历对象let profile = {name:"April",nickname:"二十七刻",country:"China"};let keys = Object.keys(profile);keys.forEach(i => { console.log(i) // 对象的键值 console.log(profile[i]) // 对象的键对应的值})map
我也是ES5版本公布的，我能够创立一个新数组，新数组的后果是原数组中的每个元素都调用一次提供的函数后的返回值。
let arr = [1,2,3,4,5];let res = arr.map(i => i * i);console.log(res) // logs [1, 4, 9, 16, 25]for...in枚举
我是ES5版本公布的。以任意程序遍历一个对象的除Symbol以外的可枚举属性。
// 遍历对象let profile = {name:"April",nickname:"二十七刻",country:"China"};for(let i in profile){ let item = profile[i]; console.log(item) // 对象的键值 console.log(i) // 对象的键对应的值// 遍历数组let arr = ['a','b','c'];for(let i in arr){ let item = arr[i]; console.log(item) // 数组下标所对应的元素 console.log(i) // 索引，数组下标// 遍历字符串let str = "abcd"for(let i in str){ let item = str[i]; console.log(item) // 字符串下标所对应的元素 console.log(i) // 索引 字符串的下标}for...of迭代
我是ES6版本公布的。在可迭代对象（包含 Array，Map，Set，String，TypedArray，arguments 对象等等）上创立一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
// 迭代数组数组let arr = ['a','b','c'];for(let item of arr){ console.log(item)}// logs 'a'// logs 'b'// logs 'c'// 迭代字符串let str = "abc";for (let value of str) { console.log(value);}// logs 'a'// logs 'b'// logs 'c'// 迭代maplet iterable = new Map([["a", 1], ["b", 2], ["c", 3]]for (let entry of iterable) { console.log(entry);}// logs ["a", 1]// logs ["b", 2]// logs ["c", 3]// 迭代map获取键值for (let [key, value] of iterable) { console.log(key) console.log(value);}// 迭代setlet iterable = new Set([1, 1, 2, 2, 3, 3,4]);for (let value of iterable) { console.log(value);}// logs 1// logs 2// logs 3// logs 4// 迭代 DOM 节点let articleParagraphs = document.querySelectorAll('.article > p');for (let paragraph of articleParagraphs) { paragraph.classList.add("paragraph"); // 给class名为“article”节点下的 p 标签增加一个名为“paragraph” class属性。}// 迭代arguments类数组对象(function() { for (let argument of arguments) { console.log(argument); }})(1, 2, 3);// logs：// 1// 2// 3// 迭代类型数组let typeArr = new Uint8Array([0x00, 0xff]);for (let value of typeArr) { console.log(value);}// logs：// 0// 255通过第一轮的自我介绍和技能展现后，咱们理解到:
for语句是最原始的循环语句。定义一个变量i(数字类型，示意数组的下标),依照肯定的条件，对i进行循环累加。条件通常为循环对象的长度，当超过长度就进行循环。因为对象无奈判断长度，所以搭配Object.keys()应用。forEachES5 提出。自称是for语句的加强版，能够发现它比for语句在写法上简略了很多。然而实质上也是数组的循环。forEach每个数组元素执行一次 callback 函数。也就是调用它的数组，因而，不会扭转原数组。返回值是undefine。mapES5 提出。给原数组中的每个元素都按顺序调用一次 callback 函数。生成一个新数组，不批改调用它的原数组自身。返回值是新的数组。for...inES5 提出。遍历对象上的可枚举属性，包含原型对象上的属性，且按任意程序进行遍历，也就是程序不固定。遍历数组时把数组的下标当作键值，此时的i是个字符串型的。它是为遍历对象属性而构建的，不倡议与数组一起应用。for...ofES6 提出。只遍历可迭代对象的数据。
能力甄别
作为一个程序员，仅仅意识他们是远远不够的，在理论开发中甄别他们各自的优缺点。就地取材的应用他们，取长补短。从而进步程序的整体性能才是能力之所在。
对于跳出循环体
在循环中满足肯定条件就跳出循环体，或者跳过不符合条件的数据持续循环其它数据。是常常会遇到的需要。罕用的语句是break 与 continue。
简略的说一下二者的区别，就当温习好了。
break语句是跳出以后循环，并执行以后循环之后的语句；continue语句是终止以后循环，并继续执行下一次循环;
留神：forEach 与map 是不反对跳出循环体的，其它三种办法均反对。
原理 ：查看forEach实现原理，就会了解这个问题。
Array.prototype.forEach（callbackfn [，thisArg]{ }传入的function是这里的回调函数。在回调函数外面应用break必定是非法的，因为break只能用于跳出循环，回调函数不是循环体。
在回调函数中应用return，只是将后果返回到下级函数，也就是这个for循环中，并没有完结for循环，所以return也是有效的。
map() 同理。
map()链式调用
map() 办法是能够链式调用的，这意味着它能够不便的联合其它办法一起应用。例如：reduce(), sort(), filter() 等。然而其它办法并不能做到这一点。forEach()的返回值是undefined，所以无奈链式调用。
// 将元素乘以自身，再进行求和。let arr = [1, 2, 3, 4, 5];let res1 = arr.map(item => item * item).reduce((total, value) => total + value);console.log(res1) // logs 55 undefined"for...in会遍历出原型对象上的属性
Object.prototype.objCustom = function() {};Array.prototype.arrCustom = function() {};var arr = ['a', 'b', 'c'];arr.foo = 'hellofor (var i in arr) { console.log(i);}// logs// 0// 1// 2// foo// arrCustom// objCustom然而在理论的开发中，咱们并不需要原型对象上的属性。这种状况下咱们能够应用hasOwnProperty() 办法，它会返回一个布尔值，批示对象本身属性中是否具备指定的属性（也就是，是否有指定的键）。如下：
Object.prototype.objCustom = function() {};Array.prototype.arrCustom = function() {};var arr = ['a', 'b', 'c'];arr.foo = 'hellofor (var i in arr) { if (arr.hasOwnProperty(i)) { console.log(i); }}// logs// 0// 1// 2// foo// 可见数组自身的属性还是无奈解脱。此时倡议应用 forEach对于纯对象的遍历，抉择for..in枚举更不便；对于数组遍历，如果不须要晓得索引for..of迭代更适合，因为还能够中断；如果须要晓得索引，则forEach()更适合；对于其余字符串，类数组，类型数组的迭代，for..of更占上风更胜一筹。然而留神低版本浏览器的是配性。
性能
有趣味的读者能够找一组数据自行测试，文章就间接给出后果了，并做相应的解释。
for > for-of > forEach > map > for-infor循环当然是最简略的，因为它没有任何额定的函数调用栈和上下文；for...of只有具备Iterator接口的数据结构，都能够应用它迭代成员。它间接读取的是键值。forEach，因为它其实比咱们设想得要简单一些，它实际上是array.forEach(function(currentValue, index, arr), thisValue)它不是一般的 for 循环的语法糖，还有诸多参数和上下文须要在执行的时候思考进来，这里可能拖慢性能；map()最慢，因为它的返回值是一个等长的全新的数组，数组创立和赋值产生的性能开销很大。for...in须要穷举对象的所有属性，包含自定义的增加的属性也能遍历到。且for...in的key是String类型，有转换过程，开销比拟大。
总结
在理论开发中咱们要联合语义话、可读性和程序性能，去抉择到底应用哪种计划。
如果你须要将数组依照某种规定映射为另一个数组，就应该用 map。
如果你须要进行简略的遍历，用 forEach 或者 for of。
如果你须要对迭代器进行遍历，用 for of。
如果你须要过滤出符合条件的项，用 filterr。
如果你须要先依照规定映射为新数组，再依据条件过滤，那就用一个 map 加一个 filter。
总之，就地取材，因时而变。千万不要因为过分谋求性能，而疏忽了语义和可读性。在您的统治之下，他们5个只能是各自施展短处，谁都别想称霸。
近期热文举荐：
1.1,000+ 道 Java面试题及答案整顿(2021最新版)
2.别在再满屏的 if/ else 了，试试策略模式，真香！！
3.卧槽！Java 中的 xx ≠ null 是什么新语法？
4.Spring Boot 2.5 重磅公布，光明模式太炸了！
5.《Java开发手册（嵩山版）》最新公布，速速下载！
感觉不错，别忘了顺手点赞+转发哦！