Vue.js报fooCounter已赋值未使用但实际在forEach中使用怎么解决

• Array.prototype.forEach() 执行后永远返回 undefined，你将 truck.bar.forEach(...) 的返回值直接赋值给truck.tenantCount的操作完全无效
• 累加完成的fooCounter没有被赋值给任何变量，也没有参与后续业务逻辑，因此触发ESLint的no-unused-vars规则校验报错
• 循环内部存在变量引用错误：你遍历truck.bar时的参数命名为unit，但代码里写的是bar.foo.length，运行时会触发bar is not defined报错

formatData() {
 this.trucks.forEach(truck => {
   truck.barCount = truck.bar.length
   let fooCounter = 0
   // 单独执行遍历累加
   truck.bar.forEach(unit => {
     fooCounter += unit.foo.length
   })
   // 遍历完成后将计算结果赋值给tenantCount
   truck.tenantCount = fooCounter
 });
}

可以用Array.prototype.reduce()直接完成累计计数，无需额外声明中间变量：

formatData() {
 this.trucks.forEach(truck => {
   truck.barCount = truck.bar.length
   truck.tenantCount = truck.bar.reduce((total, unit) => total + unit.foo.length, 0)
 });
}

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