for循环、for of、for in、forEach、map、filter、every、some、reduce遍历的用法（区别）

1、for循环

最普通的遍历方法。循环条件总比循环体要多执行一次。

语法：

for (let i = num; i < Array.length; i++) { } // 语句1：（代码块）开始前执行；语句2：定义运行循环（代码块）的条件；语句3：在循环（代码块）已被执行之后执行

案例： 

const arr = [1, 2, 3, 5, 0, 14, 17, 20],
  arr2 = []
for (let i = 0; i < arr.length; i++) {
  arr2.push(arr[i] * 2)
}
console.log(arr, arr2) // [1, 2, 3, 5, 0, 14, 17, 20] [2, 4, 6, 10, 0, 28, 34, 40]

2、for of

语法：

for (let val of Array) { }

案例： 

const arr = [1, 2, 3, 5, 0, 14, 17, 20],
  arr2 = []
for (const val of arr) {
  arr2.push(val * 2)
}
console.log(arr, arr2) // [1, 2, 3, 5, 0, 14, 17, 20] [2, 4, 6, 10, 0, 28, 34, 40]

3、for in

for in 语句用于循环对象属性。虽然也可以遍历数组，但是不建议用（容易出bug，比如它会遍历Array.prototype的属性与方法等）。

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

注意： 不要使用 for in 语句来循环数组的索引，你可以使用 for 语句替代。

语法：

for (let index in Object / Array) { }

案例： 

const person = { name: '小红', age: 18, job: '医生' }, allPropertys = []
for (const i in person) {
  allPropertys.push(i)
}
console.log(allPropertys) // ['name', 'age', 'job']

4、forEach

forEach() 方法用于遍历数组，无返回值。

注意: 1）forEach() 对于空数组是不会执行回调函数的。2）forEach() 本身是不支持 continue 与 break 语句的。

语法：

Array.forEach((item, index, arr) => {}) // item当前元素、index当前索引、arr当前数组

案例：

const arr = [1, 2, 3, 5, 0, 14, 17, 20],
  arr2 = []
arr.forEach((item) => {
  arr2.push(item * 2)
})
console.log(arr, arr2) // [1, 2, 3, 5, 0, 14, 17, 20] [2, 4, 6, 10, 0, 28, 34, 40]

5、map

map() 方法用于遍历数组，返回一个经过函数处理后的新数组。

map() 方法按照原始数组元素顺序依次处理元素。

注意： 1）map() 不会对空数组进行检测。2）map() 不会改变原始数组。

语法：

Array.map((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组

const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const arr2 = arr.map((item, index, arr) => item * 2)
console.log(arr, arr2) // [1, 2, 3, 5, 0, 14, 17, 20] [2, 4, 6, 10, 0, 28, 34, 40]

6、filter

filter() 方法用于筛选数组中满足条件的元素，返回一个新数组。

注意： 1）filter() 不会对空数组进行检测。2）filter() 不会改变原始数组。

语法：

Array.filter((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组

const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const filteredArr = arr.filter((item, index, arr) => {
  return item < 5
})
console.log(filteredArr) // [1, 2, 3, 0]

7、every

every() 方法用于检测数组所有元素是否都符合指定条件，返回一个布尔值。

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意： 1）every() 不会对空数组进行检测。2）every() 不会改变原始数组。

语法：

Array.every((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组

案例： 

const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const judge = arr.every((item, index, arr) => {
  return item < 18
})
console.log(judge) // false

8、some

some() 方法用于检测数组中的元素是否有满足指定条件的，返回一个布尔值。

some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

注意： 1）some() 不会对空数组进行检测。2）some() 不会改变原始数组。

语法：

Array.some((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组

案例： 

const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const judge = arr.some((item, index, arr) => {
  return item > 18
})
console.log(judge) // true

9、reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。（从左到右做累加可以用reduceRight() ）

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法：

Array.reduce((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组

案例： 

const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const sum = arr.reduce((total, num) => {
  console.log(total, num)
  return total + num
})
console.log(sum) // 62

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。