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-toolkit本篇技术指南聚焦 es-toolkit 函数式编程入口es-toolkit/fp中的union函数。它把合并两个数组并去除重复值这一操作封装成柯里化data-last形式专门用于与pipe组合让你以自顶向下的管道式写法完成去重合并而不必手工维护中间变量。读完本文你将掌握 fp 版union的参数约定、返回值语义、与普通版union的取舍以及它在pipe惰性求值机制下的底层工作方式。一、union是什么为管道而生的合并去重操作符union创建一个函数将两个数组合并为一个不含重复值的新数组。它属于 es-toolkit 函数式编程fp入口核心定位是与pipe配合使用const result pipe(array, union(secondArray));fp 体系的核心设计是data-last所有函数先接收配置参数如union(secondArray)返回一个等待数据的函数再由pipe把数据依次注入。union正是这一模式的典型代表——你只需传入第二个数组管道中的数据流会自动成为第一个数组。[!NOTE] 如果是在普通命令式代码中直接调用官方建议使用 es-toolkit 主入口的union只有当你在用pipe串联变换时才使用这里的 fp 版。两者底层共享同一实现只是调用形态不同。二、使用方式与返回语义2.1 基本用法union的求值顺序是首先返回管道传入数组中的全部唯一值随后追加secondArray中尚未出现过的值。import { pipe, union } from es-toolkit/fp; pipe([1, 2, 2], union([2, 3])); // [1, 2, 3]拆解执行过程管道输入[1, 2, 2]去重后得到[1, 2]遍历secondArray [2, 3]其中2已经出现过被跳过3是首次出现被追加最终返回[1, 2, 3]。元素的首次出现顺序被完整保留这与 es-toolkit 主入口union的行为保持一致该语义在 src/fp/array/union.ts 的 JSDoc 中有明确说明。2.2 参数与返回值项类型说明secondArrayreadonly T[]在管道传入数组之后要合并的第二个数组返回值(array: readonly T[]) T[]一个把readonly T[]映射为两个数组并集的新函数注意union的入参只收一个数组secondArray因为它是一个待注入数据的操作符真正的第一个数组来自管道上游。这是它与普通版union(arr1, arr2)在签名上最直观的区别。2.3 在管道中串联多个变换union可以与任意一元函数组合进同一条管道例如先过滤再合并import { filter, pipe, union } from es-toolkit/fp; const result pipe( [1, 2, 2, 3, 4], filter(x x % 2 0), // [2, 2, 4] union([3, 4, 5]) // [2, 4, 3, 5] );2.4 测试验证仓库中的单元测试直接印证了上述语义。fp 版测试 src/fp/array/union.spec.ts 验证了管道内工作场景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]); }); });主入口的测试 src/array/union.spec.ts 则验证了原始语义union([2, 1], [2, 3])等于[2, 1, 3]——第一个数组元素优先、顺序保持、第二个数组仅补充缺失值。三、源码剖析从 fp 封装到核心算法3.1 fp 封装层柯里化委托src/fp/array/union.ts 的实现非常精简本质是柯里化封装——先捕获secondArray再返回等待数据数组的函数最终把调用转发给主入口实现import { 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); }; }该文件由 src/fp/array/index.ts 统一导出export { union } from ./union.ts;因此你可以直接从es-toolkit/fp导入。3.2 核心算法concat uniq真正完成并集计算的逻辑在主入口 src/array/union.tsimport { uniq } from ./uniq.ts; export function unionT(arr1: readonly T[], arr2: readonly T[]): T[] { return uniq(arr1.concat(arr2)); }它先使用concat将两个数组拼接再交给uniq去重而uniq的实现src/array/uniq.ts仅一行基于原生Set保证元素唯一性与首次出现顺序export function uniqT(arr: readonly T[]): T[] { return [...new Set(arr)]; }因此整个去重合并链路为pipe 数据流 ──► union(secondArray) ──► arr1.concat(arr2) ──► new Set(...) ──► [...set] ──► 结果从源码结构看可以推断union借助Set的哈希语义去重时间复杂度整体为 O(n)readonly数组签名意味着它不会修改输入数组而是返回全新数组符合函数式编程的不可变约定。3.3 与pipe的协作惰性求值背景pipe实现见 src/fp/pipe.ts支持对连续的惰性函数map、filter、take等做融合优化元素逐个穿过整段管道不构建中间数组且遇到take(n)这类短路函数可提前终止遍历。而union属于非惰性eager操作符在管道中按序执行当它与惰性函数相邻时pipe会把函数序列按惰性/非惰性分组chunkFunctions对非惰性组逐个应用、对惰性组走融合路径。这正是 fp 版设计的意义——数据流以自顶向下的可读顺序流动无需嵌套调用// 命令式嵌套写法 vs fp 管道写法 union(filter(arr, isEven), [3, 4, 5]); pipe(arr, filter(isEven), union([3, 4, 5]));四、普通版union对照何时用哪个维度es-toolkit/fp的uniones-toolkit主入口的union导入路径import { union } from es-toolkit/fpimport { union } from es-toolkit/array或es-toolkit调用形态union(secondArray)返回待数据函数union(arr1, arr2)直接计算典型场景与pipe串联的管道式变换普通命令式代码中的一次性合并底层实现柯里化封装后委托给主入口实现uniq(arr1.concat(arr2))主入口版本对两个数组一视同仁同样遵循第一个数组元素优先、第二个数组仅补充缺失值的顺序规则例如union([1, 2, 3], [2, 3, 4, 5])返回[1, 2, 3, 4, 5]其中1, 2, 3来自第一个数组4, 5来自第二个数组。选择建议非常明确写管道用 fp 版直接调用用普通版。五、小结fp 版union接收secondArray: readonly T[]返回(array: readonly T[]) T[]专为pipe设计语义为管道数组唯一值优先secondArray追加未出现项保持首次出现顺序底层实现为uniq(arr1.concat(arr2))基于原生Set不修改输入、返回全新数组见 src/array/union.ts 与 src/array/uniq.ts普通场景请优先使用主入口的union管道组合场景使用 fp 版二者共享同一核心实现相关测试见 src/fp/array/union.spec.ts 与 src/array/union.spec.ts可直接作为语义的权威参照。【免费下载链接】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），仅供参考 es-toolkit fp 版 `union` 函数详解：在 `pipe` 管道中优雅地合并去重
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-toolkit本篇技术指南聚焦 es-toolkit 函数式编程入口es-toolkit/fp中的union函数。它把合并两个数组并去除重复值这一操作封装成柯里化data-last形式专门用于与pipe组合让你以自顶向下的管道式写法完成去重合并而不必手工维护中间变量。读完本文你将掌握 fp 版union的参数约定、返回值语义、与普通版union的取舍以及它在pipe惰性求值机制下的底层工作方式。一、union是什么为管道而生的合并去重操作符union创建一个函数将两个数组合并为一个不含重复值的新数组。它属于 es-toolkit 函数式编程fp入口核心定位是与pipe配合使用const result pipe(array, union(secondArray));fp 体系的核心设计是data-last所有函数先接收配置参数如union(secondArray)返回一个等待数据的函数再由pipe把数据依次注入。union正是这一模式的典型代表——你只需传入第二个数组管道中的数据流会自动成为第一个数组。[!NOTE] 如果是在普通命令式代码中直接调用官方建议使用 es-toolkit 主入口的union只有当你在用pipe串联变换时才使用这里的 fp 版。两者底层共享同一实现只是调用形态不同。二、使用方式与返回语义2.1 基本用法union的求值顺序是首先返回管道传入数组中的全部唯一值随后追加secondArray中尚未出现过的值。import { pipe, union } from es-toolkit/fp; pipe([1, 2, 2], union([2, 3])); // [1, 2, 3]拆解执行过程管道输入[1, 2, 2]去重后得到[1, 2]遍历secondArray [2, 3]其中2已经出现过被跳过3是首次出现被追加最终返回[1, 2, 3]。元素的首次出现顺序被完整保留这与 es-toolkit 主入口union的行为保持一致该语义在 src/fp/array/union.ts 的 JSDoc 中有明确说明。2.2 参数与返回值项类型说明secondArrayreadonly T[]在管道传入数组之后要合并的第二个数组返回值(array: readonly T[]) T[]一个把readonly T[]映射为两个数组并集的新函数注意union的入参只收一个数组secondArray因为它是一个待注入数据的操作符真正的第一个数组来自管道上游。这是它与普通版union(arr1, arr2)在签名上最直观的区别。2.3 在管道中串联多个变换union可以与任意一元函数组合进同一条管道例如先过滤再合并import { filter, pipe, union } from es-toolkit/fp; const result pipe( [1, 2, 2, 3, 4], filter(x x % 2 0), // [2, 2, 4] union([3, 4, 5]) // [2, 4, 3, 5] );2.4 测试验证仓库中的单元测试直接印证了上述语义。fp 版测试 src/fp/array/union.spec.ts 验证了管道内工作场景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]); }); });主入口的测试 src/array/union.spec.ts 则验证了原始语义union([2, 1], [2, 3])等于[2, 1, 3]——第一个数组元素优先、顺序保持、第二个数组仅补充缺失值。三、源码剖析从 fp 封装到核心算法3.1 fp 封装层柯里化委托src/fp/array/union.ts 的实现非常精简本质是柯里化封装——先捕获secondArray再返回等待数据数组的函数最终把调用转发给主入口实现import { 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); }; }该文件由 src/fp/array/index.ts 统一导出export { union } from ./union.ts;因此你可以直接从es-toolkit/fp导入。3.2 核心算法concat uniq真正完成并集计算的逻辑在主入口 src/array/union.tsimport { uniq } from ./uniq.ts; export function unionT(arr1: readonly T[], arr2: readonly T[]): T[] { return uniq(arr1.concat(arr2)); }它先使用concat将两个数组拼接再交给uniq去重而uniq的实现src/array/uniq.ts仅一行基于原生Set保证元素唯一性与首次出现顺序export function uniqT(arr: readonly T[]): T[] { return [...new Set(arr)]; }因此整个去重合并链路为pipe 数据流 ──► union(secondArray) ──► arr1.concat(arr2) ──► new Set(...) ──► [...set] ──► 结果从源码结构看可以推断union借助Set的哈希语义去重时间复杂度整体为 O(n)readonly数组签名意味着它不会修改输入数组而是返回全新数组符合函数式编程的不可变约定。3.3 与pipe的协作惰性求值背景pipe实现见 src/fp/pipe.ts支持对连续的惰性函数map、filter、take等做融合优化元素逐个穿过整段管道不构建中间数组且遇到take(n)这类短路函数可提前终止遍历。而union属于非惰性eager操作符在管道中按序执行当它与惰性函数相邻时pipe会把函数序列按惰性/非惰性分组chunkFunctions对非惰性组逐个应用、对惰性组走融合路径。这正是 fp 版设计的意义——数据流以自顶向下的可读顺序流动无需嵌套调用// 命令式嵌套写法 vs fp 管道写法 union(filter(arr, isEven), [3, 4, 5]); pipe(arr, filter(isEven), union([3, 4, 5]));四、普通版union对照何时用哪个维度es-toolkit/fp的uniones-toolkit主入口的union导入路径import { union } from es-toolkit/fpimport { union } from es-toolkit/array或es-toolkit调用形态union(secondArray)返回待数据函数union(arr1, arr2)直接计算典型场景与pipe串联的管道式变换普通命令式代码中的一次性合并底层实现柯里化封装后委托给主入口实现uniq(arr1.concat(arr2))主入口版本对两个数组一视同仁同样遵循第一个数组元素优先、第二个数组仅补充缺失值的顺序规则例如union([1, 2, 3], [2, 3, 4, 5])返回[1, 2, 3, 4, 5]其中1, 2, 3来自第一个数组4, 5来自第二个数组。选择建议非常明确写管道用 fp 版直接调用用普通版。五、小结fp 版union接收secondArray: readonly T[]返回(array: readonly T[]) T[]专为pipe设计语义为管道数组唯一值优先secondArray追加未出现项保持首次出现顺序底层实现为uniq(arr1.concat(arr2))基于原生Set不修改输入、返回全新数组见 src/array/union.ts 与 src/array/uniq.ts普通场景请优先使用主入口的union管道组合场景使用 fp 版二者共享同一核心实现相关测试见 src/fp/array/union.spec.ts 与 src/array/union.spec.ts可直接作为语义的权威参照。【免费下载链接】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），仅供参考