Lodash源码阅读-baseUnary

Lodash 源码阅读-baseUnary

概述

baseUnary 是 Lodash 的内部工具函数,用于将任意函数转换成只接收一个参数的函数。它创建一个函数包装器,无论原始函数设计为接收多少个参数,包装后的函数只会接收并传递第一个参数。这种转换在函数式编程和函数组合场景中特别有用。

前置学习

依赖函数

baseUnary 是基础函数,不依赖其他 Lodash 函数。

技术知识

  • 高阶函数:函数可以作为参数和返回值
  • 闭包:函数能够访问其外部作用域中的变量
  • 一元函数:只接受一个参数的函数

源码实现

js 复制代码
function baseUnary(func) {
  return function (value) {
    return func(value);
  };
}

实现思路

baseUnary 的实现简单明了:接收一个函数作为参数,返回一个新函数。这个新函数只接收一个参数,并将这个参数传给原函数,然后返回原函数的执行结果。通过这种方式,任何函数都可以被转换为严格的一元函数。

源码解析

函数签名:

js 复制代码
function baseUnary(func)
  • func: 要转换的原始函数

实现细节:

  1. 返回一个新函数,只接收一个参数 value
  2. 在新函数内部,调用原始函数 func 并只传入 value 参数
  3. 返回原始函数的执行结果

这个设计使用了闭包机制,新函数可以访问外部 baseUnary 函数作用域中的 func 变量。

应用场景

baseUnary 在 Lodash 中主要用于以下场景:

  1. 修复 parseInt 问题
js 复制代码
// 直接使用 parseInt 会有问题
const numbers = ["1", "2", "3"].map(parseInt);
// 结果: [1, NaN, NaN],因为 parseInt 接收两个参数(字符串和进制),而 map 会传递三个参数(当前值、索引、数组)给回调函数。
// 所以实际执行了:parseInt("1", 0, arr)、parseInt("2", 1, arr)、parseInt("3", 2, arr)
// 其中第二个参数被当作进制,1不是有效进制,2进制中没有"3",所以后两个结果为NaN

// 使用 baseUnary 修复
const numbers = ["1", "2", "3"].map(baseUnary(parseInt));
// 结果: [1, 2, 3],只传递第一个参数
  1. 简化函数调用
js 复制代码
// 原始函数接收多个参数
function add(a, b) {
  return a + b;
}

// 使用 baseUnary 转换为只接收一个参数
const addOne = baseUnary(add);
// 现在 addOne 只接收一个参数,第二个参数会被忽略
console.log(addOne(5)); // 5 + undefined = NaN
  1. 统一函数接口
js 复制代码
// 假设我们有一组函数,有些接收一个参数,有些接收多个
const functions = [(x) => x * 2, (x, y) => x + y, (x) => x - 1];

// 使用 baseUnary 统一接口
const unifiedFunctions = functions.map(baseUnary);
// 现在所有函数都只接收一个参数
  1. 数组处理
js 复制代码
// 处理数组时确保函数只接收一个参数
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(baseUnary((x) => x * 2));
// 结果: [2, 4, 6, 8, 10]

总结

baseUnary 尽管实现简单,但在函数式编程中具有重要作用:

  1. 简化函数接口:通过限制参数数量,使函数调用更加清晰和可预测
  2. 解决参数不匹配问题 :特别是在处理像 parseInt 这样的函数时,避免因额外参数导致的意外行为
  3. 促进函数组合:为函数组合链提供统一的函数接口规范

这个工具函数展示了 Lodash 设计理念中的重要原则:通过简单的转换函数增强代码的灵活性和复用性,使开发者能够更容易地组合和转换函数以适应不同场景。

相关推荐
2501_915373883 小时前
Vue 3零基础入门:从环境搭建到第一个组件
前端·javascript·vue.js
沙振宇6 小时前
【Web】使用Vue3开发鸿蒙的HelloWorld!
前端·华为·harmonyos
运维@小兵7 小时前
vue开发用户注册功能
前端·javascript·vue.js
蓝婷儿7 小时前
前端面试每日三题 - Day 30
前端·面试·职场和发展
oMMh7 小时前
使用C# ASP.NET创建一个可以由服务端推送信息至客户端的WEB应用(2)
前端·c#·asp.net
一口一个橘子7 小时前
[ctfshow web入门] web69
前端·web安全·网络安全
读心悦8 小时前
CSS:盒子阴影与渐变完全解析:从基础语法到创意应用
前端·css
m0_616188499 小时前
使用vue3-seamless-scroll实现列表自动滚动播放
开发语言·javascript·ecmascript
湛海不过深蓝10 小时前
【ts】defineProps数组的类型声明
前端·javascript·vue.js
layman052810 小时前
vue 中的数据代理
前端·javascript·vue.js