es-toolkit/fp 中的 union在 pipe 流水线里合并去重的函数式操作符【免费下载链接】es-toolkitA modern JavaScript utility library thats 2-3 times faster and up to 97% smaller, a major upgrade to lodash.项目地址: https://gitcode.com/GitHub_Trending/es/es-toolkites-toolkit/fp的union是一个>import { union } from es-toolkit/array; const array1 [1, 2, 3]; const array2 [3, 4, 5]; union(array1, array2); // [1, 2, 3, 4, 5]而当你在用pipe组合一系列变换时则需要es-toolkit/fp下的这个柯里化版本。它的核心使用形态是const result pipe(array, union(secondArray));union(secondArray)先固定第二个数组返回一个等待数据传入的函数pipe把第一个数组作为数据流喂给这个函数。这种>import { pipe, union } from es-toolkit/fp; pipe([1, 2, 2], union([2, 3])); // [1, 2, 3]逐步拆解这个例子union([2, 3])返回一个函数(array: readonly T[]) T[]pipe将[1, 2, 2]作为array传入该函数两个数组合并得到[1, 2, 2, 2, 3]去重后得到[1, 2, 3]。[1, 2]来自第一个数组3来自secondArray重复的2只保留第一次出现的位置。再来看字符串数组与多元素场景import { pipe, union } from es-toolkit/fp; pipe([apple, banana, banana], union([banana, orange])); // [apple, banana, orange]参数secondArrayreadonly T[]在 pipe 传入的数组之后参与合并的数组。它被柯里化提前绑定因此可以在组件初始化或模块顶层预先构造好操作符复用于多条数据流。返回值(array: readonly T[]) T[]一个映射函数接收只读数组返回两个数组并集的新数组。该返回值正是pipe期望的操作符签名可直接插入流水线任意位置。类型签名export function unionT(secondArray: readonly T[]): (array: readonly T[]) T[];泛型参数T贯穿两个数组保证类型安全如果pipe传入number[]而secondArray是string[]TypeScript 会直接报类型错误而不是等到运行时才发现问题。底层实现柯里化委托与 Set 去重fp版的union实现非常简洁src/fp/array/union.tsimport { union as unionToolkit } from ../../array/union.ts; export function unionT(secondArray: readonly T[]): (array: readonly T[]) T[] { return function (array: readonly T[]): T[] { return unionToolkit(array, secondArray); }; }它本身不重复实现合并逻辑而是把参数顺序反转后委托给核心的unionsrc/array/union.tsexport function unionT(arr1: readonly T[], arr2: readonly T[]): T[] { return uniq(arr1.concat(arr2)); }核心union的合并过程分两步arr1.concat(arr2)先把两个数组拼接成一个数组不修改原数组返回新数组uniq(...)去除重复值。而去重本身又由uniq完成src/array/uniq.tsexport function uniqT(arr: readonly T[]): T[] { return [...new Set(arr)]; }uniq借助 JavaScript 内置的Set实现去重Set天然只保留不重复的元素[...new Set(arr)]再展开回数组。由于Set按插入顺序迭代结果自然保持首次出现顺序——这正是union文档所承诺的语义第一个数组的元素排前面secondArray的新元素按序补充在后。值得注意的是Set使用 SameValueZero 比较语义但NaN视为与自身相等因此union对NaN也能正确去重这是与基于indexOf/includes实现的一个重要差异。调用链可以概括为fp union(secondArray) ──► array union(array, secondArray) │ ├─► arr1.concat(arr2) └─► uniq ──► [...new Set(arr)]在 pipe 流水线中的定位fp版的union专为组合而生。除了pipe它还可以与flowsrc/fp/flow.ts等组合工具搭配且由于它是普通的一元函数操作符也能与任意自定义 unary 函数混合使用pipe的实现 src/fp/pipe.ts 接受任意(input) output函数。一个组合多个操作符的完整示例import { pipe, map, filter, union } from es-toolkit/fp; const result pipe( [1, 2, 3, 4, 5, 6], filter(x x % 2 0), // [2, 4, 6] map(x x * 10), // [20, 40, 60] union([50, 60, 70]) // [20, 40, 60, 50, 70] );关于性能有一个值得了解的细节pipe内部会把连续出现的可惰性函数如map、filter、take融合成单趟扫描见 src/fp/pipe.ts 中lazyPipe与chunkFunctions的实现。但union属于急切执行eager的操作符因为它依赖concat与Set构建完整数组无法按元素流式输出。因此实践中建议把union放在流水线的末端或靠后位置让前面的filter/map/take先完成惰性融合与提前终止short-circuit再由union做一次性合并去重从而避免在每一步都产生中间数组。与 lodash/fp union 的语义对照熟悉 lodash 的读者可以发现es-toolkit/fp的union遵循了与 lodash/fp 相同的>import { describe, expect, it } from vitest; import { union } from ./union.ts; import { pipe } from ../pipe.ts; describe(union, () { it(works in a pipe, () { expect(pipe([1, 2], union([2, 3]))).toEqual([1, 2, 3]); }); });测试直接验证了核心使用场景union在pipe内正常工作输入[1, 2]与union([2, 3])组合后输出[1, 2, 3]——第一个数组的1, 2与第二个数组补充的3与文档示例完全一致。此外仓库中还提供了unionBysrc/fp/array/unionBy.ts与unionWithsrc/fp/array/unionWith.ts两个变体unionBy允许指定一个映射函数按映射后的键值去重unionWith则接受自定义比较器。如果你的去重规则不是简单的全等比较可以按需选用这三个操作符。小结es-toolkit/fp的union把普通union的双数组调用形式改写为 contenteditable="false">【免费下载链接】es-toolkitA modern JavaScript utility library thats 2-3 times faster and up to 97% smaller, a major upgrade to lodash.项目地址: https://gitcode.com/GitHub_Trending/es/es-toolkit创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考