for, forEach, for...in, for...of

日期：2019 年 11 月 26 日

几种循环方式的差异比较

我们平常在代码中经常会用到 for , forEach , for···in ， for···of，map ，但是它们之间的区别是什么、能否终止循环以及适用的场景又是什么呢？ 这篇文章针对这几种循环的方式作了一个小结，如下表：

方法名	break	continue	return	返回值	特性
for	跳出循环体	结束当前的循环	报错	没有返回值	循环次数确定
forEach	报错	报错	结束当前的循环	没有返回值	调用数组的每个元素，并将元素传递给回调函数
for...in	跳出循环体	结束当前的循环	报错	没有返回值	以任意顺序迭代对象的可枚举属性
for...of	跳出循环体	结束当前的循环	报错	没有返回值	遍历可迭代对象定义要迭代的数据
map	报错	报错	结束当前的循环	有返回值	遍历数组，返回新数组，但不改变原数组

详细案例请阅读下面的部分

for

for 循环一般用于循环次数确定的情况

当在 for 循环中使用 break 的时候，会直接跳出循环体

for-break.png

当在 for 循环中使用 continue 的时候，会结束当前的循环，进入下一次循环

for-continue.png

当在 for 循环中使用 return 的时候，会报错

for-return.png

for 循环是没有返回值的

forEach

forEach() 用于调用数组的每个元素，并将元素传递给回调函数
注意: forEach() 对于空数组是不会执行回调函数的

// 语法
array.forEach(function(currentValue, index, arr), thisValue)

param.png

当在 forEach 中使用 break 的时候，会报错

each-break.png

当在 forEach 中使用 continue 的时候，也会报错

each-continue.png

当在 forEach 中使用 return 的时候，会结束当前的循环，进入下一次循环

each-retrun.png

forEach 也是没有返回值的

for···in

for...in 语句用于对数组或者对象的属性进行循环操作
for...in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作
注意：for...in 语句以任意顺序迭代对象的可枚举属性（所以我们遍历的是数组索引或者对象的属性）

当在 for...in 中使用 break 的时候，会跳出循环体

in-break.png

当在 for...in 中使用 continue 的时候，会结束当前的循环，进入下一次循环

in-continue.png

当在 for...in 中使用 return 的时候，会报错

in-return.png

for...in 也是没有返回值的

for···of

for...of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
注意：for...of 语句遍历可迭代对象定义要迭代的数据（遍历的就是对应的值，而不是索引或者属性）

当在 for...of 中使用 break 的时候，会跳出循环体

of-break.png

当在 for...of 中使用 continue 的时候，会结束当前的循环，进入下一次循环

of-continue.png

当在 for...of 中使用 return 的时候，会报错

of-return.png

for...of 也是没有返回值的

map

map() 方法按照原始数组元素顺序依次处理元素
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
注意：map() 不会改变原始数组

// 用法：
array.map(function(currentValue,index,arr), thisValue)

map-pa.png

当在 map 中使用 break 的时候，会报错

map-break.png

当在 map 中使用 continue 的时候，会报错

map-continue.png

当在 map 中使用 return 的时候，会结束当前的循环，进入下一次循环

map-return.png

map 是有返回值的