尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

es-toolkit fp 版 minBy 详解:用 pipe 组合出声明式的最小值筛选

es-toolkit fp 版 minBy 详解:用 pipe 组合出声明式的最小值筛选 es-toolkit fp 版 minBy 详解用 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中的minBy算子讲解它如何与pipe组合把取出每项得分、筛选得分最小项这类逻辑写成清晰的数据流。读完你将掌握 fp 版minBy的参数签名、返回值、与普通版minBy的取舍以及它的底层实现原理。一、fp 版 minBy 是什么es-toolkit 提供了两套 API常规命令式版本位于es-toolkit函数式编程版本位于es-toolkit/fp。fp 版的特点是数据最后传入data-last函数先用配置参数构造出一个算子再由pipe把数据喂给它。fp 版minBy就是这样一个算子——它接收一个取值函数getValue返回一个能把readonly T[]映射为得分最小项的新函数const result pipe(array, minBy(getValue));它适用于对数组每一项计算一个分数再找出分数最小的那一项的场景。典型应用包括从对象数组中按某个数值属性价格、分数、年龄找最小项、按计算后的距离/偏差找最近点等。二、使用法与 pipe 组合minBy会对管道传入数组的每个值调用getValue返回结果最小的那个元素数组为空时返回undefinedimport { minBy, pipe } from es-toolkit/fp; pipe( [{ score: 10 }, { score: 30 }, { score: 20 }], minBy(item item.score) ); // { score: 10 }参数getValue(item: T) number返回用于比较的数值的函数。从源码签名看它实际接收三个参数当前元素element、索引index、以及整个数组arraysrc/fp/array/minBy.ts。返回值(array: readonly T[]) T | undefined一个把readonly T[]映射为最小项或undefined的函数。三、何时用 fp 版何时用普通版官方文档建议在普通代码中优先使用原始 es-toolkit 的minBy只有当你用pipe串联多个变换时才使用 fp 版。import { minBy } from es-toolkit/array; const people [ { name: john, age: 30 }, { name: jane, age: 28 }, { name: joe, age: 26 }, ]; minBy(people, person person.age); // { name: joe, age: 26 }两者差异本质是参数顺序普通版是minBy(items, getValue)fp 版是minBy(getValue)返回算子。单独调用一次时普通版更直观一旦要串接map、filter、take等多步变换fp 版能让每一步都保持算子形态数据流自左向右一气呵成。四、源码实现原理fp 版minBy的实现非常精简它本身不重复造轮子而是闭包捕获getValue后把数组转发给普通版实现// src/fp/array/minBy.ts export function minByT( getValue: (element: T, index: number, array: readonly T[]) number ): (array: readonly T[]) T | undefined { return function (array: readonly T[]): T | undefined { return minByToolkit(array, getValue); }; }核心逻辑位于 src/array/minBy.ts空数组短路items.length 0时直接返回undefined与文档描述一致。线性扫描用min Infinity作为初始哨兵值遍历每个元素并调用getValue(element, index, items)。NaN 传播一旦getValue返回NaN立即返回产生该 NaN 的元素与Math.min的 NaN 传播行为一致避免 NaN 参与比较导致结果失真。严格小于比较value min时更新最小值因此多个元素得分相同时返回第一个最小项。fp 版还提供了两个重载当传入的数组类型为readonly [T, ...T[]]非空元组时返回类型收窄为T不会为undefined否则返回T | undefined在类型层面精确反映了空数组会得到 undefined的语义。五、在管道中的实际组合示例由于pipe会把数据从左到右依次穿过每个算子minBy可以自然地放在处理链的末尾或中间import { pipe, map, minBy } from es-toolkit/fp; // 先转换再求最小 pipe( [ { name: a, score: 10, bonus: 2 }, { name: b, score: 30, bonus: 5 }, { name: c, score: 20, bonus: 1 }, ], map(item ({ ...item, total: item.score item.bonus })), minBy(item item.total) ); // { name: c, score: 20, bonus: 1, total: 21 }从 src/fp/pipe.ts 的实现看pipe会把连续的惰性算子如map、filter、take融合成单趟遍历并支持提前终止minBy这类非惰性算子则按顺序逐个应用最终返回最小项或undefined。六、边界行为小结场景行为空数组返回undefinedgetValue返回NaN返回产生 NaN 的元素NaN 传播与Math.min一致多个元素得分相同返回第一个得分最小的元素非空数组返回得分最小的元素这些行为在 src/array/minBy.ts 及 fp 版重载中均有明确实现与类型声明fp 版的单元测试 src/fp/array/minBy.spec.ts 也验证了其在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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表