如何通过函数链式调用简化含forEach、map等操作的JavaScript代码？

我想了解如何通过链式调用简化这些函数调用，是否可以将forEach、push、数组解构以及map操作进行链式调用？

原代码：

let selectorsForLoader = ['a', 'b'];
let loadingElements = [];
selectorsForLoader.forEach(selector => {
  loadingElements.push(...Array.from(document.querySelectorAll(selector)));
});
let loaders = loadingElements.map(loadingElement => {
  loadingElement.doSomething();
});

我所说的函数链式调用示例：

food.map(item => item.type)
  .reduce((result, fruit) => {
    result.push(fruit);
    return [...new Set(result)];
  }, []);

完全可以用链式调用简化，核心是用flatMap替换原来的forEach+push组合——flatMap既能遍历每个选择器生成对应的元素数组，又能自动把这些子数组合并成一维数组，刚好替代你原来的循环推操作。之后直接链式map就行：

const loaders = ['a', 'b']
  .flatMap(selector => Array.from(document.querySelectorAll(selector)))
  .map(loadingElement => loadingElement.doSomething());

细节说明： #

• 用flatMap一步完成“遍历选择器→获取元素数组→合并成一维数组”，省去了中间变量loadingElements，也不用手动push和解构。
• 后续的map和原逻辑完全一致，对每个元素执行doSomething()。

如果你的运行环境不支持flatMap（比如部分旧版浏览器），可以用map加flat的组合替代，效果一样：

const loaders = ['a', 'b']
  .map(selector => Array.from(document.querySelectorAll(selector)))
  .flat()
  .map(loadingElement => loadingElement.doSomething());

这样整个逻辑就变成了连贯的链式调用，代码更简洁清爽。

内容的提问来源于stack exchange，提问作者Dotista