为什么使用forEach会出现意外“return”令牌报错，且赋值无预期返回值？

1. 为什么使用forEach时会出现意外的“return”令牌报错？ #

• 首先要明确：在forEach的回调函数内部使用return本身是合法语法，不会触发报错，此时return只会终止当前次回调的执行，不会中断整个遍历流程。
• 触发意外令牌报错的常见场景有两类：
  • 你在forEach回调中使用了break、continue这类仅能用于循环代码块的语句，forEach的回调是独立的函数作用域，不属于循环块上下文，因此这类语句会被识别为非法令牌。
  • 你的代码存在语法书写错误，比如回调函数的括号、花括号不闭合，在非函数作用域的位置直接写了return语句。

2. 如下代码中，为什么变量ara没有报意外令牌错误，也没有返回数组每个元素加23后的结果？ #

示例代码：

var aras = [1,2,3,4,5]
let ara = aras.forEach(item => item + 23);

• 代码没有报错的原因：整段代码语法完全符合ECMAScript规范，不存在非法的字符或语句结构。
• 没有得到预期结果的原因：forEach方法的返回值固定为undefined，它的设计定位是仅执行遍历操作，不会收集回调函数的返回值生成新数组。你在箭头函数中返回的item + 23结果会被直接丢弃，因此ara最终的值为undefined。
• 如果你需要生成每个元素加23后的新数组，应该使用专门做数组映射的map方法，修改后的代码如下：

var aras = [1,2,3,4,5]
let ara = aras.map(item => item + 23);
// ara最终值为 [24, 25, 26, 27, 28]

内容的提问来源于stack exchange，提问作者Nikola Jensen