es-toolkit 函数式编程 zipWith用 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/fp的zipWith是一个数据优先data-last的高阶函数它接收若干待合并的数组与一个combine函数返回一个可接入pipe流水线的变换函数将管道传入的数组与配置数组按索引一一结合。本文以 docs/ja/fp/reference/zipWith.md 为骨架结合 fp 版实现源码、原始数组版实现 与单元测试讲解它的用法、参数语义、长度不齐时的行为以及底层实现原理读完即可在数据流水线中熟练使用zipWith完成多数组的按位合并。核心概念为 pipe 而生的数据优先 zipWith函数式编程fp版的zipWith会创建一个函数该函数将管道传入的数组与预先配置好的数组按索引合并。它专为与pipe组合使用而设计const result pipe(array, zipWith(...arrs, combine));在普通命令式代码中优先使用 es-toolkit 原始版非 fp的zipWith而当需要把zipWith作为变换步骤串联进pipe流水线时才使用这里的fp版。这一分工与 es-toolkit/fp 的整体设计一致pipe是es-toolkit/fp的入口见 src/fp/index.ts 与 pipe.ts每个 fp 函数都采用先传配置、后收数据的柯里化形态由pipe依次供给数据。使用示例zipWith将管道传入的数组与配置数组在同一索引上的值一起交给combine。如果数组长度不同缺失位置的值以undefined传入。import { pipe, zipWith } from es-toolkit/fp; // 两个等长数组按索引相加 pipe( [1, 2], zipWith([10, 20], (a, b) a b) ); // [11, 22] // 长度不齐时缺失值以 undefined 传入可用默认参数兜底 pipe( [1, 2, 3], zipWith([10], (a, b 0) a b) ); // [11, 2, 3]第二个例子中[1, 2, 3]的长度为 3而配置数组[10]的长度为 1因此索引 1、2 处b的值为undefined配合默认参数b 0后计算结果分别为11、2、3。参数arrsArrayreadonly unknown[]与管道传入数组一同合并的数组。combine(...values: unknown[]) R接收各数组同一索引上的值最后还附带索引返回一个新值的函数。返回值返回(array: readonly T[]) R[]一个将管道传入数组映射为合并结果数组的函数。源码原理柯里化包装与参数重载查看 fp 版实现 可以发现它并没有重新实现合并逻辑而是对原始版zipWith做了一层延迟求值包装调用zipWith(...arrs, combine)时先以rest收集全部配置参数并返回一个新函数该函数被pipe调用时再把管道传入的数组拼到配置参数前面转调原始版完成合并export function zipWith(...rest: unknown[]): unknown { return function (array: readonly unknown[]): unknown[] { return (zipWithToolkit as (array: readonly unknown[], ...rest: unknown[]) unknown[])(array, ...rest); }; }这解释了文档中pipe(array, zipWith(...arrs, combine))的调用形态zipWith的参数顺序先数组、后 combine与原始版完全一致只是被柯里化成了配置阶段 数据阶段两步。从类型重载可以看出fp 版zipWith支持最多 1 个管道数组 3 个配置数组的组合共 4 个数组每个重载都会把index作为combine的最后一个参数传入见 src/fp/array/zipWith.ts。底层合并逻辑与长度处理fp 版转调的是 src/array/zipWith.ts 中的实现其核心行为如下const arrs [arr1, ...rest.slice(0, -1)]; const combine rest[rest.length - 1] as (...items: any[]) R; const maxIndex Math.max(...arrs.map(arr arr.length)); const result: R[] Array(maxIndex); for (let i 0; i maxIndex; i) { const elements: T[] arrs.map(arr arr[i]); result[i] combine(...elements, i); }结果长度取最长数组maxIndex取所有数组长度的最大值短数组缺失位置的值自然为undefined这与文档描述完全一致索引始终作为最后一个参数combine(...elements, i)保证combine的最后一个参数一定是当前索引i预分配结果数组Array(maxIndex)提前分配容量避免动态扩容从实现层面保证了性能。与 pipe 的协作普通函数的流水线语义zipWith返回的是普通非惰性函数pipe会将其与其他非惰性函数一样逐个顺序应用只有连续出现map、filter、take等惰性函数时pipe才会融合为单趟短路求值见 pipe.ts 的分组逻辑与 lazyPipe 的实现。因此zipWith在流水线中遵循上一步输出、下一步输入的直觉语义数据流自顶向下清晰可读。测试验证文档行为有据可依src/fp/array/zipWith.spec.ts 用两个用例固化了文档描述的行为管道内正常工作pipe([1, 2], zipWith([10, 20], (a, b) a b))断言结果为[11, 22]按最长数组取长度缺失值传 undefinedpipe([1, 2, 3], zipWith([a, b], (a, b, index) [a, b, index]))断言结果为[[1, a, 0], [2, b, 1], [3, undefined, 2]]。第二个用例同时验证了三点结果长度等于最长数组长度3、缺失值以undefined传入、index作为combine的最后一个参数。这些断言与文档中不同长度的数组足りない値はundefinedとして渡される缺失值作为 undefined 传入的说明相互印证。实战建议与边界情况在 pipe 内使用 fp 版在普通代码中使用原始版若没有流水线需求直接import { zipWith } from es-toolkit/array调用原始版参考 docs/reference/array/zipWith.mdAPI 更直接处理长度不齐的数据利用undefined补位特性在combine中通过默认参数如(a, b 0) a b或空值合并a ?? 0提供兜底逻辑避免产生NaN或拼接出undefined利用索引参数combine的最后一个参数是索引可用于生成带位置信息的合并结果或实现需要按位置加权的业务逻辑组合多个配置数组fp 版重载支持同时传入 1~3 个配置数组例如合并时间、价格、数量三组数据时combine一次即可拿到全部按位对齐的值。总结es-toolkit 的 fp 版zipWith通过柯里化包装将原始数组版zipWith无缝接入pipe数据流水线它以最长数组为准进行按索引合并缺失值以undefined补位并把索引作为combine的最后一个参数。借助 fp 版源码、原始版源码 与单元测试 的相互印证你可以放心地将它用于多数组对齐、按位求和、字符串拼接等流水线场景。【免费下载链接】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），仅供参考 
长河君 · 2026/9/16 18:09:14 · 阅读 1.2k es-toolkit 函数式编程 zipWith：用 pipe 按索引合并多个数组的完整指南
es-toolkit 函数式编程 zipWith用 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/fp的zipWith是一个数据优先data-last的高阶函数它接收若干待合并的数组与一个combine函数返回一个可接入pipe流水线的变换函数将管道传入的数组与配置数组按索引一一结合。本文以 docs/ja/fp/reference/zipWith.md 为骨架结合 fp 版实现源码、原始数组版实现 与单元测试讲解它的用法、参数语义、长度不齐时的行为以及底层实现原理读完即可在数据流水线中熟练使用zipWith完成多数组的按位合并。核心概念为 pipe 而生的数据优先 zipWith函数式编程fp版的zipWith会创建一个函数该函数将管道传入的数组与预先配置好的数组按索引合并。它专为与pipe组合使用而设计const result pipe(array, zipWith(...arrs, combine));在普通命令式代码中优先使用 es-toolkit 原始版非 fp的zipWith而当需要把zipWith作为变换步骤串联进pipe流水线时才使用这里的fp版。这一分工与 es-toolkit/fp 的整体设计一致pipe是es-toolkit/fp的入口见 src/fp/index.ts 与 pipe.ts每个 fp 函数都采用先传配置、后收数据的柯里化形态由pipe依次供给数据。使用示例zipWith将管道传入的数组与配置数组在同一索引上的值一起交给combine。如果数组长度不同缺失位置的值以undefined传入。import { pipe, zipWith } from es-toolkit/fp; // 两个等长数组按索引相加 pipe( [1, 2], zipWith([10, 20], (a, b) a b) ); // [11, 22] // 长度不齐时缺失值以 undefined 传入可用默认参数兜底 pipe( [1, 2, 3], zipWith([10], (a, b 0) a b) ); // [11, 2, 3]第二个例子中[1, 2, 3]的长度为 3而配置数组[10]的长度为 1因此索引 1、2 处b的值为undefined配合默认参数b 0后计算结果分别为11、2、3。参数arrsArrayreadonly unknown[]与管道传入数组一同合并的数组。combine(...values: unknown[]) R接收各数组同一索引上的值最后还附带索引返回一个新值的函数。返回值返回(array: readonly T[]) R[]一个将管道传入数组映射为合并结果数组的函数。源码原理柯里化包装与参数重载查看 fp 版实现 可以发现它并没有重新实现合并逻辑而是对原始版zipWith做了一层延迟求值包装调用zipWith(...arrs, combine)时先以rest收集全部配置参数并返回一个新函数该函数被pipe调用时再把管道传入的数组拼到配置参数前面转调原始版完成合并export function zipWith(...rest: unknown[]): unknown { return function (array: readonly unknown[]): unknown[] { return (zipWithToolkit as (array: readonly unknown[], ...rest: unknown[]) unknown[])(array, ...rest); }; }这解释了文档中pipe(array, zipWith(...arrs, combine))的调用形态zipWith的参数顺序先数组、后 combine与原始版完全一致只是被柯里化成了配置阶段 数据阶段两步。从类型重载可以看出fp 版zipWith支持最多 1 个管道数组 3 个配置数组的组合共 4 个数组每个重载都会把index作为combine的最后一个参数传入见 src/fp/array/zipWith.ts。底层合并逻辑与长度处理fp 版转调的是 src/array/zipWith.ts 中的实现其核心行为如下const arrs [arr1, ...rest.slice(0, -1)]; const combine rest[rest.length - 1] as (...items: any[]) R; const maxIndex Math.max(...arrs.map(arr arr.length)); const result: R[] Array(maxIndex); for (let i 0; i maxIndex; i) { const elements: T[] arrs.map(arr arr[i]); result[i] combine(...elements, i); }结果长度取最长数组maxIndex取所有数组长度的最大值短数组缺失位置的值自然为undefined这与文档描述完全一致索引始终作为最后一个参数combine(...elements, i)保证combine的最后一个参数一定是当前索引i预分配结果数组Array(maxIndex)提前分配容量避免动态扩容从实现层面保证了性能。与 pipe 的协作普通函数的流水线语义zipWith返回的是普通非惰性函数pipe会将其与其他非惰性函数一样逐个顺序应用只有连续出现map、filter、take等惰性函数时pipe才会融合为单趟短路求值见 pipe.ts 的分组逻辑与 lazyPipe 的实现。因此zipWith在流水线中遵循上一步输出、下一步输入的直觉语义数据流自顶向下清晰可读。测试验证文档行为有据可依src/fp/array/zipWith.spec.ts 用两个用例固化了文档描述的行为管道内正常工作pipe([1, 2], zipWith([10, 20], (a, b) a b))断言结果为[11, 22]按最长数组取长度缺失值传 undefinedpipe([1, 2, 3], zipWith([a, b], (a, b, index) [a, b, index]))断言结果为[[1, a, 0], [2, b, 1], [3, undefined, 2]]。第二个用例同时验证了三点结果长度等于最长数组长度3、缺失值以undefined传入、index作为combine的最后一个参数。这些断言与文档中不同长度的数组足りない値はundefinedとして渡される缺失值作为 undefined 传入的说明相互印证。实战建议与边界情况在 pipe 内使用 fp 版在普通代码中使用原始版若没有流水线需求直接import { zipWith } from es-toolkit/array调用原始版参考 docs/reference/array/zipWith.mdAPI 更直接处理长度不齐的数据利用undefined补位特性在combine中通过默认参数如(a, b 0) a b或空值合并a ?? 0提供兜底逻辑避免产生NaN或拼接出undefined利用索引参数combine的最后一个参数是索引可用于生成带位置信息的合并结果或实现需要按位置加权的业务逻辑组合多个配置数组fp 版重载支持同时传入 1~3 个配置数组例如合并时间、价格、数量三组数据时combine一次即可拿到全部按位对齐的值。总结es-toolkit 的 fp 版zipWith通过柯里化包装将原始数组版zipWith无缝接入pipe数据流水线它以最长数组为准进行按索引合并缺失值以undefined补位并把索引作为combine的最后一个参数。借助 fp 版源码、原始版源码 与单元测试 的相互印证你可以放心地将它用于多数组对齐、按位求和、字符串拼接等流水线场景。【免费下载链接】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），仅供参考