JavaScript：创建 function，它返回一个 object，其键使用回调与值数组中的元素匹配

Question

我的目标如下：

构造一个 function multiMap，它将接受两个 arrays - 一个值数组和一个回调数组。 multiMap 将返回一个 object，其键与值数组中的元素匹配。 分配给键的相应值将为 arrays，由回调数组的输出组成，其中每个回调的输入是键。

我尝试了下面的代码：

const multiMap = (arrOne, arrTwo) => {

  let newObj = {}; 

  for (let i=0; i<arrOne.length; i++){
    let element = arrOne[i]; 

    console.log(i)

    newObj[element] = arrTwo[i](element); 
  }
  return newObj; 
}



// 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; }

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


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

我的代码返回： { catfood: 'CATFOOD', glue: 'Glue', beer: 'beerbeer' }

我希望它返回： { catfood: ['CATFOOD', 'Catfood', 'catfoodcatfood'], glue: ['GLUE', 'Glue', 'glueglue'], beer: ['BEER', 'Beer', 'beerbeer'] }, 'Beer', 'beerbeer'] }

我究竟做错了什么？

注意：我知道我可以使用修改函数（即 reduce）来执行此操作，但我想先使用 for 循环来弄清楚。

Answer 1

问题是你只在第一个数组上循环。 您必须遍历数组中每个值的所有函数。

 const multiMap = (arrOne, arrTwo) => { let newObj = {}; for (let i=0; i<arrOne.length; i++){ let element = arrOne[i]; newObj[element] = []; for(let j=0;j < arrTwo.length; j++) { newObj[element].push(arrTwo[j](element)); } } return newObj; } // 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; } // arrOne const items = ['catfood', 'glue', 'beer']; // arrTwo const functions = [uppercaser, capitalize, repeater]; console.log(multiMap(items, functions)); 

Answer 2

您必须遍历函数数组才能创建关联的结果数组。

 const multiMap = (arrOne, arrTwo) => { let newObj = {}; for (let i=0; i<arrOne.length; i++){ let element = arrOne[i]; console.log(i) var arr = []; for (let f=0;f<functions.length;f++) { arr.push(functions[f](element)); } newObj[element] = arr; } return newObj; } // 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; } // arrOne const items = ['catfood', 'glue', 'beer']; // arrTwo const functions = [uppercaser, capitalize, repeater]; console.log(multiMap(items, functions)); 

Answer 3

一个更实用的解决方案是，

 const multiMap = (arrVals, arrCallbacks) => arrVals.reduce((acc, curr) => { acc[curr] = arrCallbacks.map(cb => cb(curr)); return acc; }, {}); console.log(multiMap(['catfood', 'glue', 'beer'], [(str) => str.toUpperCase(), (str) => str[0].toUpperCase() + str.slice(1).toLowerCase(), (str) => str + str])); // should log: { catfood: ['CATFOOD', 'Catfood', 'catfoodcatfood'], glue: ['GLUE', 'Glue', 'glueglue'], beer: ['BEER', 'Beer', 'beerbeer'] }