在单个元素上调用多个功能-DEV365 开发者社区

在这篇文章中，我将介绍一种相对简单的方式，以在单个元素上调用多个功能。元素和功能都将降级为各自的数组。我们还将以元素为键和值作为每个元素上调用函数的数组来填充一个空对象。让我们来吧！

所以这是我们要使用的内容：

const uppercaser = str => str.toUpperCase();

const capitalize = str => str[0].toUpperCase() + str.slice(1);

const repeater = str => str + str;

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

const functions = [uppercaser, capitalize, repeater];

我们有三个函数，分配给functions数组，并分配给items数组的三个字符串元素。我们的目标是用items中的元素作为钥匙填充一个空对象，我们希望在items中的每个元素上调用functions的每个函数。因此，基本上，将这三个函数应用于items的每个元素。

让我们声明我们的功能，该功能都占用了两个数组并设置一个空对象：

const multiMap = (items, functions) => {
  const obj = {};
}

const uppercaser = str => str.toUpperCase();

const capitalize = str => str[0].toUpperCase() + str.slice(1);

const repeater = str => str + str;

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

const functions = [uppercaser, capitalize, repeater];

我们将使用.forEach()参数/参数上的.forEach()方法循环遍历该数组中的每个元素，但是这里变得有趣：

一旦我们在该数组上调用.forEach()方法，我们将同时填充我们的空对象obj，每个元素从items中为 key >对于obj，具有functions数组中的每个功能：

const multiMap = (items, functions) => {
  const obj = {};
  items.forEach(item => {
    obj[item] = functions.map(callback => callback(item))
  }); return obj;
}

const uppercaser = str => str.toUpperCase();

const capitalize = str => str[0].toUpperCase() + str.slice(1);

const repeater = str => str + str;

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

const functions = [uppercaser, capitalize, repeater];

我们通过在.forEach()方法末尾返回obj来结束功能。我们的输出看起来像这样：

{ 
catfood: ['CATFOOD', 'Catfood', 'catfoodcatfood'], 
glue: ['GLUE', 'Glue', 'glueglue'], 
beer: ['BEER', 'Beer', 'beerbeer'] 
}

这种工作的方式是，.forEach()将循环遍历items数组中的每个元素，然后我们将obj填充了items中的每个元素作为键。然后，items方法将在items中将每个函数应用于items中的每个元素，并从数组中的这三个函数中返回每个值，因为.map()返回了新数组。

我希望这对您有帮助！继续战斗！

<3 <3 <3