前端大佬能当场写出这道题吗？

[zhaomeicheng]

当场没写出来，面试官劝我别紧张，说这道题很基础，可是面试后自己在这也没写出来...

[Yumwey]

看看 koa 的源码吧，这是很基础的 compose 了，实现方式很多，递归，迭代都可以

[Biwood]

感觉还好，思路：遍历，使用.bind()把后一个 fn 作为参数绑定到前一个 fn 上，即前一个 fn 参数中的 next ，遍历完后执行第一个 fn 即可。

猜测一下，expressjs 这类框架的中间件大概是类似原理吧。

[Yumwey]

https://github.com/koajs/compose/blob/master/index.js

[Yumwey]

也可以看看 redux 的实现，应该都挺常见的

[Cbdy]

一行代码的事情

export function compose(middlewares = (ctx, next) => (void 0)) {
if (!middlewares || !middlewares.length) {
return ctx => (void 0)
}
return ctx => middlewares[0](ctx, () => compose(middlewares.slice(1))(ctx))
}

[zhaomeicheng]

@Cbdy 是怎么做到一下子写出来的...看来这道题真的很基础，面试官没说错。

[cyrbuzz]

```
const compose = arr => {
const run = lastArr => {
if (lastArr.length === 0) {
return;
}
const first = lastArr.shift();

first(() => run(arr));
};
return () => {
run(arr);
};
};
```

这样？运行结果是 ok 的，没做检查。

[rabbbit]

哎，想了十几分钟才有思路。现场肯定是写不出来了
function compose(arr) {
const next = (fn = (() => {}), arr) => {
fn(next.bind(this, arr[0], arr.slice(1)));
};
return next.bind(this, arr[0], arr.slice(1));
}

[zhaomeicheng]

@cyrbuzz 对的，我刚刚自己又尝试了一下，写出来的与你思路一致... 看样子我是能做出来的...唉

[cyrbuzz]

@zhaomeicheng

hh ，我一开始也没有思路，不过有个好队友提示。

[TWorldIsNButThis]

swr 的 middleware 就是这个结构
其他前端框架应该有不少类似的

[des]

忘了在哪里看到的了
arr.reverse().reduce((a, b) => () => b(a), Function.prototype)()

[rabbbit]

哪里有类似 Leetcode 能刷这种题的题库吗？

[Cbdy]

如果觉得 JS 版本太难懂，可以看一下 Java 版本
https://github.com/cbdyzj/nanometer/blob/main/common/src/main/java/nano/support/Onion.java

[enchilada2020]

```JS
const compose = ([f, ...arr]) => arr.length
? () => f(compose(arr))
: () => f?.(() => { });
```

[enchilada2020]

没想到还有更简单的

```JS
const compose = arr => arr.reduceRight((acc, cur) => () => cur(acc), () => { });
```

[tyx1703]

想了十几分钟，代码倒是简单，思路很重要。估计我面试时也会紧张写不出来。

// 递归
function compose(middlewares) {
if (middlewares.length === 0) {
return () => {}
}
const middleware = middlewares.shift()
return middleware.bind(null, compose(middlewares))
}

// 迭代
function compose(middlewares) {
let res;
for (let i = middlewares.length - 1; i >= 0; i--) {
if (!res) {
res = middlewares[i].bind(null, () => {})
} else {
res = middlewares[i].bind(null, res)
}
}
return res;
}

[dinjufen]

@rabbbit bigfrontend.dev

[sweetcola]

综合上面回答的缩减版（）

const compose = ([fn, ...fns]) => () => fn?.(compose(fns))

[isbase]

https://s2.loli.net/2022/06/20/UiwjuvXhOoVeLAm.png

Github Copilot 自动补全的代码