如何用JS标准数组方法实现类似RXJS tap的流式调用链观测功能

标准数组方法实现同等tap能力 #

不用修改Array原型的前提下，使用IIFE（立即执行函数表达式）包裹中间数组即可实现完全一致的效果，副作用仅执行一次，不修改原数组，也符合流式编码风格，示例代码如下：

const numbers = [0,1,2,3,4,5];

const sumOfOdds = ((arr) => {
  // 此处执行任意tap侧逻辑，比如打印中间状态
  console.log(arr)
  // 原样返回数组，不影响后续链式调用
  return arr
})(numbers.filter(x => x%2))
.reduce((acc, cur) => acc + cur, 0)

console.log(sumOfOdds)

这种实现完全符合ECMAScript标准，无原型污染风险，执行效率和自定义tap方法完全一致。如果你不接受IIFE的包裹写法，也可以自己封装一个通用的tap工具函数：

const tap = (arr, fn) => {
  fn(arr)
  return arr
}

// 调用示例
const sumOfOdds = tap(numbers.filter(x => x%2), arr => console.log(arr))
  .reduce((acc, cur) => acc + cur, 0)

ECMAScript规范相关情况 #

目前没有将tap方法加入Array原型的正式生效提案，TC39委员会过往讨论中不新增该能力的核心考量如下：

• 兼容风险过高：大量现有业务代码、第三方库已经自定义了Array.prototype.tap方法，官方新增同名方法会直接导致这部分代码出现不可预期的行为，兼容性成本远大于收益。
• 可替代性强：现有语法已经可以很好的实现同等能力，无论是临时变量拆分、IIFE包裹还是自定义工具函数，都能满足需求，没有必须新增原生方法的必要性。
• 场景适配性低：数组链式调用的场景大多链路较短，调试中间状态完全可以通过断点、临时变量实现，高频依赖tap的场景大多出现在RxJS这类异步流库中，和数组的使用场景匹配度不高。
• 语义分歧：部分委员认为tap的核心语义是「响应式流的副作用监听」，放在一次性求值的数组操作中语义不清晰，容易造成开发者误用。

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