JS中forEach传console.log与箭头函数的输出差异解析

一、直接传console.log的输出逻辑 #

数组的forEach方法会给回调函数传递三个固定参数：当前遍历到的元素、元素的索引、原数组本身。

当你直接把console.log作为回调函数传给forEach时，forEach会依次把这三个参数全部传给console.log。而console.log本身支持接收任意数量的参数，并会把所有参数按顺序输出，所以就出现了这样的结果：

const numbers = [1, 2, 3]
numbers.forEach(console.log)

// 输出：
// 1 0 [ 1, 2, 3 ]
// 2 1 [ 1, 2, 3 ]
// 3 2 [ 1, 2, 3 ]

二、是否必须使用箭头函数？ #

不需要，箭头函数只是实现需求的一种简洁方式，你还有其他可选方案：

• 使用普通匿名函数包裹：

  const numbers = [1, 2, 3]
  numbers.forEach(function(number) {
    console.log(number)
  })
  

• 自定义一个只输出第一个参数的函数：

  function logElement(element) {
    console.log(element)
  }
  const numbers = [1, 2, 3]
  numbers.forEach(logElement)
  

核心逻辑就是：只要让回调函数只接收并输出第一个参数（当前元素），就能得到你想要的结果，箭头函数只是最简洁的写法而已。

内容的提问来源于stack exchange，提问作者Rajesh Chamarthi