使用JavaScript reduce方法实现multiMap函数时遇语法错误求助

挑战要求 #

构建一个名为multiMap的函数，它接受两个数组——一个值数组和一个回调函数数组。multiMap需返回一个对象，其键与值数组中的元素匹配，对应的值是由回调函数数组的输出组成的数组，每个回调函数的输入为对应的键。

参考示例代码 #

// Uncomment these to check your work!

function uppercaser(str) { return str.toUpperCase(); }

function capitalize(str) { return str[0].toUpperCase() + str.slice(1).toLowerCase(); }

function repeater(str) { return str + str; }

const items = ['catfood', 'glue', 'beer'];

const functions = [uppercaser, capitalize, repeater];

console.log(multiMap(items, functions)); // should log: { catfood: ['CATFOOD', 'Catfood', 'catfoodcatfood'], glue: ['GLUE', 'Glue', 'glueglue'], beer: ['BEER', 'Beer', 'beerbeer'] }

我的实现代码 #

function multiMap(array, callbacks) {
  const emptyArray = [];
  return array.reduce((acc, current) => {
    array.forEach(element => {
        while (callbacks.length) {
          emptyArray.push(callbacks(element));
        }
      }
      return acc[current] = emptyArray
    )
  }, {})
}

// Uncomment these to check your work!

function uppercaser(str) {
  return str.toUpperCase();
}

function capitalize(str) {
  return str[0].toUpperCase() + str.slice(1).toLowerCase();
}

function repeater(str) {
  return str + str;
}

const items = ['catfood', 'glue', 'beer'];

const functions = [uppercaser, capitalize, repeater];

console.log(multiMap(items, functions)); // should log: { catfood: ['CATFOOD', 'Catfood', 'catfoodcatfood'], glue: ['GLUE', 'Glue', 'glueglue'], beer: ['BEER', 'Beer', 'beerbeer'] }

我的问题 #

我尝试更多地使用数组方法解决编程挑战，但每次使用reduce方法时都会遇到语法错误，请求指出这段代码中的问题所在。

1. 语法错误点 #

• array.forEach的闭合括号缺失：在forEach的回调函数结束后，少了一个闭合的)，导致语法结构混乱。
• 箭头函数语句块格式错误：reduce的回调函数中，return语句的位置和写法不符合语法规范，块级作用域内的语句需要正确分隔。

2. 逻辑错误点 #

• 重复遍历数组：在reduce内部又调用array.forEach，会对原数组进行多次无意义的重复遍历。
• 无限循环的while语句：while (callbacks.length)的条件永远为真（只要回调数组不为空），且没有终止循环的逻辑，会导致代码卡死。
• 错误调用回调数组：callbacks(element)是直接调用数组对象而非数组内的回调函数，正确做法是遍历callbacks数组逐个执行函数。
• 共享数组引用：emptyArray是全局（函数内）单个数组，所有键都会指向同一个数组引用，导致所有结果被混入同一数组，无法实现每个键对应独立结果的需求。

修正后的代码 #

function multiMap(array, callbacks) {
  return array.reduce((acc, current) => {
    // 为每个元素生成独立的结果数组
    acc[current] = callbacks.map(callback => callback(current));
    return acc;
  }, {});
}

// 测试代码
function uppercaser(str) {
  return str.toUpperCase();
}

function capitalize(str) {
  return str[0].toUpperCase() + str.slice(1).toLowerCase();
}

function repeater(str) {
  return str + str;
}

const items = ['catfood', 'glue', 'beer'];
const functions = [uppercaser, capitalize, repeater];

console.log(multiMap(items, functions));

代码说明 #

• 用reduce遍历值数组，逐步构建结果对象。
• 对每个元素current，用map遍历回调函数数组，逐个调用回调并传入current，生成独立的结果数组。
• 每个键对应独立的结果数组，避免了引用共享的问题，逻辑清晰且符合语法规范。

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