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

Question

我的目标如下：

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

我尝试了下面的代码：

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 = (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'] }

Answer 2

问题是您仅循环第一个数组。您必须对数组中的每个值执行所有函数。

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 3

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

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 4

这里有两种额外的（更基本的）方法来解决这个问题，以帮助学习过程：

function multiMap(vals, CB) {
/* 
// OPTION 1: ----------------------------------------------------------------

  let fOut = {};
  
  for (let i = 0; i < vals.length; i++) {
    let e = vals[i];
    
    fOut[e] = [];   // set key = empty arr
    
    for (let j = 0; j < CB.length; j++) {   // nested for loop to populate value arr
      fOut[e].push(CB[j](e));
    }
    
  }
  return fOut;
 */

  
// OPTION 2: ----------------------------------------------------------------
  let fOut = {};    // initalize empty object for results
  
    vals.forEach( (e) => {    // for each element in the vals arr:
        fOut[e] = CB.map( (funct) => {    // map each function of the CB arr
            return funct(e);
        });
    });
  
    return fOut;
}