如何将ES6箭头函数版混合数组求和函数改写为标准长格式？

问题出在哪？ #

你的代码有两个关键错误：

• 提前return导致reduce未执行：在sumMix函数里，你先执行x.map(...)并直接return了这个结果，函数执行到这里就结束了，后面的str.reduce(...)完全没机会运行。
• 变量未定义：str这个变量在当前作用域里根本不存在，你想操作的应该是map转换后的数组。

改写为你熟悉的长格式写法 #

把链式调用拆成分步操作，完全用传统函数写法，不用箭头函数的隐式return：

const myArr = [3, 7, 8, "5", "9", 6, "2"];

function sumMix(x) {
  // 第一步：把数组所有元素转成数字，存到变量里
  const convertedArr = x.map(function(str) { 
    return parseInt(str);
  });
  // 第二步：对转换后的数组求和（注意给reduce加初始值0，避免空数组等异常）
  const total = convertedArr.reduce(function(acc, cur) {
    return acc + cur;
  }, 0);
  // 第三步：返回求和结果
  return total;
}

console.log(sumMix(myArr)); // 输出：40

关于简洁箭头函数版本的理解 #

你看到的可行方案用了链式调用，map返回的数组直接调用reduce，而且箭头函数在只有一行代码时可以省略{}和return，它等价于下面的传统写法：

function sumMix(x){
  return x.map(function(str) {
    return parseInt(str);
  }).reduce(function(acc, cur) {
    return acc + cur;
  }, 0);
}

箭头函数只是让写法更简洁，核心逻辑和上面的长格式完全一致。

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