JS函数内操作变量累加 forEach遍历后为何输出undefined

这个问题和JavaScript闭包没有关系，核心错误是对Array.prototype.forEach()方法的返回值逻辑、赋值语句执行顺序理解有误：

• forEach()的设计目标只是遍历数组、对每个元素执行传入的回调，它本身固定返回undefined，不会返回任何遍历计算的结果。
• 你的代码执行顺序如下：
  1. var声明的totalBalance会发生变量提升，初始值为undefined
  2. 执行赋值语句时，会先运行等号右侧的forEach逻辑，遍历所有元素执行回调：回调里的totalBalance += obj确实在执行累加操作，所以你能在回调内部的打印看到值变化
  3. 等forEach遍历完全部元素，会拿到它的固定返回值undefined，再把这个undefined赋值给totalBalance，直接覆盖掉回调里累加得到的数值
  4. 最终你在外层打印totalBalance时，拿到的就是被覆盖后的undefined
• 额外的逻辑问题：你没有给累加变量设置初始值0，初始的undefined和数字相加会得到NaN，哪怕不被返回值覆盖也拿不到正确的求和结果。

修正forEach写法 #

不要把forEach的返回值赋值给累加变量，提前给累加变量设置初始值0即可：

let accounts = [];
accounts[0] = 30;
accounts[1] = 25;
accounts[2] = 45;

var totalBalance = 0; // 提前初始化累加基准值
accounts.forEach(function(obj){
    totalBalance += obj;
    console.log(totalBalance)
})

console.log(totalBalance); // 最终输出100

更推荐的求和写法 #

数组求和优先用reduce方法，它本身就是为归约计算设计的，会直接返回最终累加结果，代码更简洁：

let accounts = [30,25,45];
const totalBalance = accounts.reduce((sum, currentVal) => sum + currentVal, 0);
console.log(totalBalance); // 输出100

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