js数组循环的几个常用方法比较（for、forEach、map）

1、for循环是es5的常用数组循环方法，具体使用语法如下举例：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for (var i = 1; i < arr.length; i++) {
  console.log(i) // 打印的是1, 2， 3， 4， 5， 6
  if (i > 5) return
}

为什么打印的会是1 2 3 4 5 6呢？因为for循环中有return语句，该语句常用在函数中用来返回出一个结果，但是for循环中如果是用来return的话，可以中断循环。

2、forEach循环是es6方法，用来遍历数组的方法，具体举例如下：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]    

arr.forEach((item, index, arr) => {
   console.log(item) //  打印 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
   if (item > 5) return
})

forEach遍历数组，其中有三个参数，item为数组的元素，index为元素对应的索引， arr即为数组本身，这里也使用了return语句，但是在forEach中使用return语句是不会中断循环的进行的。

3、map循环是es6方法，用来遍历数组的方法，具体举例如下：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const newArr = arr.map((item, index, arr) => {
    console.log(item) // 输出 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    if (item < 5) {
        return item * 2
    }
    return item
})
console.log(newArr) // 输出 [2, 4, 6, 8, 5, 6, 7, 8, 9, 10]

map方法和forEach基本一样，有return语句也不会中断循环，唯一不同的是map有返回值，只要满足遍历的条件，就返回出来，组成一个新的数组。