如何编写带有多个参数的 JavaScript 函数（史诗指南）

函数组合很漂亮。在之前的一篇文章中，我们研究了以下工具： compose() 和 flow()。这些组合函数允许我们创建函数管道。它们将函数排列起来，以便一个函数的输出直接流入下一个函数。当这些函数一起工作时，数据就像枫糖浆流过煎饼一样。但是当函数没有排列好时会发生什么？如果其中一些函数需要多个参数怎么办？那我们该怎么办？我们如何组合具有多个参数的函数？

这个问题的答案很简单：我们不能。

仅限一元函数组合。¹ 任何超过一个参数和组合都行不通。至少，没有帮助。我们不能组合接受多个参数的函数。

如果无法组合多个参数的函数，那写这篇文章干嘛？标题是彻头彻尾的谎言吗？

当然，一定有 某物 我们可以做到。毕竟，那些古怪的函数式程序员永远都在赞美组合的乐趣。如果没有办法使用多参数函数，它为什么会如此受欢迎？一定有办法让它发挥作用。

并且有一个方法。

我们作弊。

我们通过改变函数来解决这个限制。也就是说，我们可以包装或修改它们。我们 转换 将多参数函数转换为一元函数。在本文中，我们将介绍五种实现此目的的技术。（还有更多，但这些是最常见的。）

1. 复合数据结构
2. 部分应用
3. 柯里化
4. 使用 ap() 对于 get/set 问题
5. 使用 flatMap() 对于配置问题

复合数据结构

让我们从这个问题最简单的形式开始。假设我们有一个需要两个参数的函数。我们还有另一个返回两个值的函数。……除此之外，我们已经有一个问题了。函数不能返回多个值。每个函数只能返回一个值。仅此而已。²

幸运的是，JavaScript 提供了多种方法来组合多个值。最常见的方法是使用复合数据结构。即数组和对象。³ 例如，我们知道从一个函数返回两个值是不可能的。但在单个数组中返回两个值完全没有问题。

如果你使用过前端框架，你可能已经见过这种情况。React 的 useState() 函数返回一个数组中的值和一个 setter 函数。它看起来像这样：

const temperatureStatePair = useState(23);
const temperature = temperatureStatePair[0];
const setTemp = temperatureStatePair[1];

如果我们利用解构，我们可以将其浓缩为一行：

const [temperature, setTemp] = useState(23);

SolidJS 有类似的概念，信号。它使用相同的模式。

const [temperature, setTemp] = createSignal(23);

现在，假设我们正在开发一个用户界面（用户界面）作为恒温器。我们希望允许人们在摄氏度和华氏度之间切换。为了实现这一点，我们可能会编写一个转换函数。这个奇特的转换函数会将两者转换为 temperature() 和 setTemp() 为了我们：

const celsiusToFahrenheit = t => t * 9 / 5 + 32;
const fahrenheitToCelsius = t => (t - 32) * 5 / 9;

const stateCelsiusToFahrenheit = (temperature, setTemp) => {
   const tempF = celsiusToFahrenheit(temperature);
   const setTempF = (tempC) => setTemp(fahrenheitToCelsius(tempC));
   return [tempF, setTempF];
}

我们的函数在输出过程中将摄氏度转换为华氏度（tempF）。它在输入过程中将华氏度转换为摄氏度（setTempF()）。但是，请注意我们的函数需要两个参数。

创作 useState() 和 stateCelsiusToFahrenheit()目前，我们还不能。但由于我们正在编写函数，我们可以更改它接收参数的方式。我们可以编写它，以便它需要一个数组而不是两个参数。使用参数解构，更改只有两个字符：

const stateCelsiusToFahrenheit = ([temperature, setTemp]) => {
   const tempF = celsiusToFahrenheit(temperature);
   const setTempF = (tempC) => setTemp(celsiusToFahrenheit(tempC));
   return [tempF, setTempF];
}

完成后，我们可以用 useState() 用一个 compose() 功能：⁴

const compose = (...fns) => x0 => fns.reduceRight(
    (x, f) => f(x),
    x0
);

const useFahrenheit = compose(
    stateCelsiusToFahrenheit,
    useState
);

我们可以用我们闪亮的新 useFahrenheit() 组件内部的功能如下：

const [tempF, setTempF] = useFahrenheit(23);

这个方法可行，但不太好，因为我们必须以摄氏度设置初始温度。我们可以将另一个函数组合到管道中来解决这个问题：

const useFahrenheit = compose(
    stateCelsiusToFahrenheit,
    useState,
    fahrenheitToCelsius,
);


const [tempF, setTempF] = useFahrenheit(74);

我们现在将状态存储为摄氏度，但使用华氏度进行 用户界面。这很巧妙，但也有点毫无意义。至少，我们在这里使用它的方式是毫无意义的。我们已经将其编码，以便我们现在可以 仅有的 使用华氏温度。因此，如果我们不在任何地方共享该状态，我们不妨将温度存储为华氏温度。我们稍后会回到这个问题并做一些更有用的事情。现在，我们有一个可行的示例。我们可以看到如何使用数组来组成多参数函数。

那么对象呢​​？

让我们回到第一个 useState() 示例。我们通过引用数组索引来提取值：

const temperatureStatePair = useState(23);
const temperature = temperatureStatePair[0];
const setTemp = temperatureStatePair[1];

这很好，但您可能已经注意到顺序是任意的。也就是说，值位于零位置没有特殊含义。setter 函数位于一位置也没有任何含义。我们可以交换它们，这不会有什么区别。⁵ 我们必须记住每个任意插槽里有什么东西。

另一种方法是使用对象。这样，我们可以为每个值槽赋予有意义的名称。例如，我们可以重写 stateCelsiusToFahrenheit() 返回一个对象：

const stateCelsiusToFahrenheitObj = ([temperature, setTemp]) => {
   const tempF = celsiusToFahrenheit(temperature);
   const setTempF = (tempC) => setTemp(celsiusToFahrenheit(tempC));
   return { temperature: tempF, setTemperature: setTempF };
};

我们现在返回一个对象而不是数组。它有键 temperature 和 setTemperature。这分别代表我们的值和 setter 函数。我们的组合管道保持不变：

const useFahrenheit = compose(
    stateCelsiusToFahrenheitObj,
    useState,
    fahrenheitToCelsius,
);

什么时候我们 使用 但是，我们的钩子有点不同。我们使用命名属性来解构组合函数：

const { temperature, setTemperature } = useFahrenheit(74);

经过这种改变，我们解构值的顺序就不再重要了。例如，我们可以这样写：

const { setTemperature, temperature } = useFahrenheit(74);

行为没有改变。

但是这种方法有一个缺点。如果我们想改变这些变量的名称，它会变得相当冗长：

const {
    temperature: tempF,
    setTemperature: setTempF
} = useFahrenheit(74);

我们有一个权衡。使用数组在解构时会提供更多的灵活性。但是，使用对象会给我们更有意义的名称，并允许我们重新排序。这两种方法都有各自的用途。

不过，无论我们选择数组还是对象，我们现在都有返回值的解决方案。我们可以将几个值放入复合数据结构中并返回该值。很简单。但如果我们有一个函数 期望 多个参数？

我们也可以使用复合数据结构。我们用一元函数包装多变量函数。例如，假设我们有一个函数 el() 用于创建 HTML 元素为字符串：

const el = (tag, contents) => `<${tag}>${contents}${tag}>`;

我们不能将此函数与其他函数组合，因为它需要多个参数。但我们可以将其包装在另一个需要数组的函数中：

const elComposable = ([tag, contents]) => el(tag, contents);

我们可以像这样使用它：

const wrapListItem = compose(
    elComposable,
    item => ['li', item],
);

const wrapList = compose(
    elComposable,
    list => ['ul', list.join('')],
    list => list.map(wrapListItem),
);

const characterList = ['Holmes', 'Watson', 'Mrs. Hudson'];
const characterListHTML = wrapList(characterList);
characterListHTML

如果我们觉得更酷，我们甚至可以创建一个实用函数。它将任何函数转换为需要数组作为参数的函数。再次，参数解构使其非常简洁：

const arrayifyArgs = (fn) => (args) => fn(...args);


const elComposable = arrayifyArgs(el);

复合数据结构几乎可以解决涉及多个参数的任何组合问题。但这不是 仅有的 解决方案。

部分应用

我们之前说过，我们的 useFahrenheit() 函数毫无用处。如果我们只使用华氏度，那么存储摄氏度就毫无意义了。但是，如果我们使用共享状态，它会变得更有趣。

假设我们替换 useState() 和 useLocalStorage()。 （你可以找到 现成的钩子 在 usehooks.com）。这个钩子有一个漂亮的 API。 看起来像 useState()，只不过需要额外的 key 参数。我们可以像这样使用它：

const PREFIX = 'my-clever-prefix-to-prevent-namespace-collisions-';
const [temperature, setTemperature] = useLocalStorage(23, `${PREFIX}temperature`);

它返回的形状与 useState()。因此，似乎应该有一种方法可以将其用于我们的 compose() 管道。一种方法是创建一个新函数， key 参数部分应用。

const PREFIX = 'my-clever-prefix-to-prevent-namespace-collisions-';
const tempKey = `${PREFIX}temperature`;
const useDeconflictedLocalStorage =
    (initialVal) => useLocalStorage(initialVal, tempKey);

我们创建了一个新功能， useDeconflictedLocalStorage()。它“修复”了 key 为了 uselocalStorage() 设置为特定值。完成后，我们可以使用 useDeconflictedLocalStorage() 在我们的函数管道中如前所述：

const useFahrenheit = compose(
    stateCelsiusToFahrenheitObj,
    useDeconflictedLocalStorage,
    fahrenheitToCelsius,
);

const { temperature, setTemperature } = useFahrenheit(74);

我们现在将温度以摄氏度为单位存储在本地存储中。但我们在 用户界面 好像一切都以华氏度为单位。这不再是无用的。它允许应用程序的其他部分读取 localstorage 摄氏度值。或者我们稍后可能会切换到以 用户界面。

但这并不是进行部分应用的唯一方法。我们还可以使用 .bind() 方法内置于每个 JavaScript 函数中。为了说明这一点，让我们回到我们的 el() 函数。我们可以为不同类型的 HTML 元素。

const ul = el.bind(null, 'ul');
const li = el.bind(null, 'li');

在上面的代码中，我们创建了两个新函数。每个函数都部分应用了标签名称 el() 函数。这给我们返回了一个新函数。然后我们可以像这样使用这些函数：

const listify = compose(
    ul,
    list => list.join(''),
    list => list.map(li),
);

const characterList = ['Holmes', 'Watson', 'Mrs. Hudson'];
const characterListHTML = listify(characterList);
characterListHTML

重申一下，我们已 el() 并创建了两个带有“固定”参数的新函数。在此过程中，我们将二进制函数转换为⁶ 分为两个一元函数。

然而，使用这种技术，参数的顺序很重要。假设我们反转 el()：

const elReversed = (contents, tag) => `<${tag}>${contents}${tag}>`;

如果我们尝试使用 .bind() 和 reversed ()，我们只能修复 contents 参数。通常，这不如修复 tag。

在创建函数时请记住这一点。如果你使用 .bind() 或者柯里化，将变化最少的数据放在最前面会有所帮助。然后，我们可以修复波动较小的参数，并创建新函数，以便根据需要经常使用。

部分应用比看上去更强大。它提供了一系列令人惊讶的工具和技术。我们将在本文的其余部分探讨其中三种。

柯里化

我们可能会发现自己做了很多偏应用。在这种情况下，我们可以通过精心设计函数来简化工作，这样只需调用它们就可以修复参数。例如，考虑我们的 useLocalStorage() 函数。假设我们像这样包装它：

const useLocalStorageCurried =
    (key) => (initialVal) => useLocalStorage(initialVal, key);

我们创建了一个新功能， useLocalStorageCurried()。它只接受一个参数， key. 当我们用 key，它返回另一个接受单个值的函数， initialVal。调用该函数会返回一个数组中的一对值。调用 useLocalStorage()。

如果这听起来令人困惑，别担心。看看我们如何使用它，就会更容易理解。 useLocalStorageCurried()，我们可以创建不同用途的商店。例如：

const useTemperature = useLocalStorageCurried('temperature');
const useHeatingStatus = useLocalStorageCurried('heating');
const useCoolingStatus = useLocalStorageCurried('cooling');


const [temp, setTemp] = useTemperature(23);
const [heatingOn, setHeatingStatus] = useHeatingStatus(false);
const [coolingOn, setCoolingStatus] = useCoolingStatus(false);

柯里化是一种将多参数函数转换为一元函数的方法。我们通过将函数嵌套在一起来创建柯里化函数。调用外部函数会修复一个参数并返回一个新函数。调用该新函数会修复以下参数，依此类推。这个过程一直持续到我们拥有所需的所有参数，然后返回结果。

利用这种技术，我们可以创建一个柯里化版本 el() 功能：

const elCurried = (tag) => (contents) => `<${tag}>${contents}${tag}>`;

在此过程中，我们可以创建一些其他实用函数（均经过柯里化）：

const map = (func) => (list) => list.map(func);
const join = (joinStr) => (list) => list.join(joinStr);

一旦我们完成了这些，我们就可以使用它们 compose()：

const listify = compose(
    el('ul'),
    join(''),
    map(el('li')),
);

const characterList = ['Holmes', 'Watson', 'Mrs. Hudson'];
const characterListHTML = listify(characterList);
characterListHTML

有时，当人们看到这样的代码时，他们会感到害怕。这是因为它看起来与他们习惯的完全不同。让我们分解一下，看看它是如何工作的。回想一下 compose() 将数据从底部传输到顶部。我们将依次介绍每个部分：

• 我们创作的 listify() 函数需要一个字符串数组。
• 当我们打电话时 listify()， compose() 将此字符串数组传递给 map(el('li'))。
• map(el('li')) 列表中的每个项目都用
• 。
• 然后，Compose 将该字符串列表传递给 join('')。
• join('') 将所有列表项连接在一起，返回单个字符串值。
• 然后，Compose 将该单个字符串值传递给 el('ul')。
• el('ul') 将单个字符串值包装在 and returns our final string.

const temps = [
    { time: 1715411010990, temp: 21.2, sensor: 'bakerst' },
    { time: 1715414610990, temp: 21.5, sensor: 'bakerst' },
    { time: 1715418210990, temp: 20.8, sensor: 'bakerst' },
];

const DTFORMAT = {timeStyle: 'medium', dateStyle: 'short'}
const formatDateForLocale = (languages) => {
    const formatter = new Intl.DateTimeFormat(languages, DTFORMAT);
    return (timestamp) => formatter.format(new Date(timestamp));
}

const formatDate = formatDateForLocale(navigator.languages);

const getTimestamp = (tempObj) => tempObj.time;
const setReadableDate = (tempObj) => (value) => ({...tempObj, readableTime: value});

const ap = (binaryCurriedFn) => (unaryFn) => (value) => 
    binaryCurriedFn(value)(unaryFn(value));

const getTimestampAndFormat = compose(formatDate, getTimestamp);

const addFormattedDate = ap(setReadableDate)(getTimestampAndFormat);
const tempsWithFormattedDates = temps.map(addFormattedDate);

const get = (key) => (obj) => obj[key];
const set = (key) => (obj) => (val) => ({...obj, [key]: val});

const getSet = (setter) => (getter) => (transform) => ap(setter)(compose(transform, getter));

const transformTempReadings = compose(
    getSet(set('tempF'))(get('temp'))(celsiusToFahrenheit),
    getSet(set('readableTime'))(get('time'))(formatDate),
);

const readingsForUI = temps.map(transformTempReadings);
readingsForUI

const config = {
    locale: 'en-GB',
    timezone: 'GMT',
    defaultTarget: 23,
    defaultUnits: 'Celsius',
    baseHeatingRate: 3,
    baseCoolingRate: 5,
    sensors: {
        bakerst: {name: 'Baker St.', host: 'bakerst.thermostat.example.com' },
        gorvesnorsq: {name: 'Grosvenor Sq.', host: 'grosvenor.thermostat.example.com' },
        bedlam: {name: 'Bedlam', host: 'bedlam.thermostat.example.com' },
    },
};

const formatDateForLocale = (timestamp) => (config) =>
    (new Intl.DateTimeFormat(config.local, {timeStyle: 'medium', dateStyle: 'short'}))
        .format(new Date(timestamp));

const addReadableDate = (obj) => (config) => ({
    ...obj, readableDate: formatDateForLocale(config.locale)(obj.time)
});

const addSensorName = (obj) => (config) => ({
    ...obj, sensorName: config.sensors[obj.sensor]?.name
});

const addTempDiff = (obj) => (config) => ({
    ...obj, tempDiff: obj.temp - config.defaultTarget
});

const flatMap = (binaryCurriedFn) => (unaryFn) =>
    (x) => binaryCurriedFn(unaryFn(x))(x);

const transformTempObjs = compose(
    flatMap(addTempDiff),
    flatMap(addSensorName),
    addReadableDate
);

transformTempObjs(temps[0])(config);

const flip = (binaryCurriedFn) => (b) => (a) => binaryCurriedFn(a)(b);

const flippedTransformTempObjs = flip(compose(
    flatMap(addTempDiff),
    flatMap(addSensorName),
    addReadableDate
));

const transformedReadings = temps.map(flippedTransformTempObjs(config));
console.log(transformedReadings);