lodash已死？radash库方法介绍及源码解析 —— 函数柯里化 + Number篇

舌吻

写在前面

tips：点赞 + 收藏 = 学会！

• 主页有更多其他篇章的方法，欢迎访问查看。
  
• 本篇我们继续介绍radash中函数柯里化和Number 相关的方法使用和源码解析。
  

函数柯里化

chain：创建一个函数链并依次执行

• 使用说明
  
  
  • 功能描述：用于创建一个函数链，该链依次执行一系列函数，每个函数的输出都是下一个函数的输入。这种模式常见于函数式编程，特别是在数据转换和流水线处理中。
    
  • 参数：函数数组（或者说任意数量的函数）。
    
  • 返回值：返回一个新的函数。
    
  
  
• 使用代码示例
  1. import { chain } from 'radash'
  3. const add = (y: number) => (x: number) => x + y
  4. const mult = (y: number) => (x: number) => x * y
  5. const addFive = add(5)
  6. const double = mult(2)
  8. const chained = chain(addFive, double)
  10. chained(0) // => 10
  11. chained(7) // => 24

  复制代码
• 源码解析
  1. // 定义一个名为 `chain` 的函数。
  2. export function chain(
  3.  // `funcs` 是一个由函数组成的数组，这些函数将会被依次执行。
  4.  // 每个函数都可以接受任意参数，并返回任何类型的值。
  5.  ...funcs: ((...args: any[]) => any)[]
  6. ) {
  7.  // `chain` 函数返回一个新的函数，这个新函数接受任意参数。
  8.  return (...args: any[]) => {
  9.    // 使用 `funcs` 数组中的第一个函数和传入的参数 `args` 来初始化累加器 `acc`。
  10.    // 然后，使用 `reduce` 方法依次执行剩余的函数。
  11.    return funcs.slice(1).reduce(
  12.      // 在每个迭代中，将前一个函数的返回值作为下一个函数的输入。
  13.      (acc, fn) => fn(acc),
  14.      // 第一次迭代的初始值是 `funcs` 数组中第一个函数的执行结果。
  15.      funcs[0](...args)
  16.    )
  17.   }
  18. }

  复制代码
  
  
  • 方法流程说明：
    
    
    • chain 函数接受任意数量的函数作为参数，并返回一个新的函数。
      
    • 当新函数被调用时，它首先使用传入的参数调用 funcs 数组中的第一个函数。
      
    • 然后，它使用 reduce 方法依次执行 funcs 数组中剩余的函数，每个函数的返回值都被传递给下一个函数。
      
    • 最终，返回最后一个函数的执行结果。
      
    
    
  
  

compose：依次执行传入的函数，每个函数的输出作为下一个函数的输入

• 使用说明
  
  
  • 功能描述：接受一系列函数作为参数，并返回一个新的函数。这个新函数将从右到左依次执行传入的函数，每个函数的输出作为下一个函数的输入。这是函数式编程中的组合（composition）模式。
    
  • 参数：一系列函数（函数数组）。
    
  • 返回值：一个新的函数。
    
  
  
• 使用代码示例
  1. import { compose } from 'radash'
  3. const useZero = (fn: any) => () => fn(0)
  4. const objectize = (fn: any) => (num: any) => fn({ num })
  5. const increment = (fn: any) => ({ num }: any) => fn({ num: num + 1 })
  6. const returnArg = (arg: any) => (args: any) => args[arg]
  8. const composed = compose(
  9.  useZero,
  10.  objectize,
  11.  increment,
  12.  increment,
  13.  returnArg('num')
  14. )
  16. composed() // => 2

  复制代码
• 源码解析
  1. // 定义一个名为 `compose` 的函数。
  2. export function compose(
  3.  // 使用展开运算符接收一个函数数组，每个函数可以接受任意参数并返回任何类型的值。
  4.  ...funcs: ((...args: any[]) => any)[]
  5. ) {
  6.  // `compose` 函数返回一个新的函数。
  7.  return (...args: any[]) => {
  8.    // 首先反转 `funcs` 数组，因为我们需要从右到左执行函数。
  9.    // 然后使用 `reduce` 方法来组合这些函数。
  10.    return funcs.reverse().reduce((acc, fn) => {
  11.      // 在每次迭代中，将上一个函数的返回值（acc）作为当前函数（fn）的参数。
  12.      return fn(acc);
  13.    }, args); // 初始值 `args` 是传递给组合函数的参数。
  14.   };
  15. }

  复制代码
  
  
  • 方法流程说明：
    
    
    • 接受任意数量的函数作为参数。
      
    • 返回一个新的函数，这个新函数接受任意参数。
      
    • 当新函数被调用时，它首先反转 funcs 数组，以确保函数能够从右到左执行。
      
    • 使用 reduce 方法应用每个函数，从最右边的函数开始，每个函数的返回值都作为下一个函数的输入。
      
    • 最终，返回最左边函数的执行结果。
      
    
    
  
  

debounce：函数防抖

• 使用说明
  
  
  • 功能描述：创建一个防抖函数，该函数会在指定的延迟时间后执行。防抖（debouncing）是一种控制函数执行频率的技术，它确保函数只在最后一次被调用后的一段时间后执行，通常用于处理像窗口调整大小或键盘输入这样的连续事件。
    
  • 参数：配置对象（包含delay——延时）、需要防抖的函数。
    
  • 返回值：返回防抖后的函数。
    
  
  
• 使用代码示例
  1. import { debounce } from 'radash'
  3. const makeSearchRequest = (event) => {
  4.  api.movies.search(event.target.value)
  5. }
  7. input.addEventListener('change', debounce({ delay: 100 }, makeSearchRequest))

  复制代码
• 源码解析
  1. // 定义一个泛型函数 `debounce`。
  2. export const debounce = <TArgs extends any[]>(
  3.  // 第一个参数是一个对象，包含 `delay` 属性，它是函数延迟执行的毫秒数。
  4.   { delay }: { delay: number },
  5.  // 第二个参数 `func` 是需要被防抖的函数。
  6.  func: (...args: TArgs) => any
  7. ) => {
  8.  // 初始化一个变量 `timer` 用于保存 setTimeout 的返回值。
  9.  let timer: NodeJS.Timeout | undefined = undefined
  10.  // 初始化一个标志变量 `active` 来控制函数是否应该执行。
  11.  let active = true
  13.  // 定义一个防抖后的函数 `debounced`。
  14.  const debounced: DebounceFunction<TArgs> = (...args: TArgs) => {
  15.    // 如果 `active` 是 `true`，则执行防抖逻辑。
  16.    if (active) {
  17.      // 清除之前的定时器（如果有的话）。
  18.      clearTimeout(timer)
  19.      // 设置一个新的定时器，延迟 `delay` 毫秒后执行 `func`。
  20.      timer = setTimeout(() => {
  21.        // 检查 `active` 是否仍然是 `true`，如果是，则执行 `func`。
  22.        active && func(...args)
  23.        // 执行后，将 `timer` 设置为 `undefined`。
  24.        timer = undefined
  25.      }, delay)
  26.    } else {
  27.      // 如果 `active` 是 `false`，则立即执行 `func`，不使用防抖逻辑。
  28.      func(...args)
  29.    }
  30.   }
  31.  // 为 `debounced` 函数添加一个方法 `isPending`，用于检查是否有等待执行的 `func`。
  32.  debounced.isPending = () => {
  33.    return timer !== undefined
  34.   }
  35.  // 为 `debounced` 函数添加一个方法 `cancel`，用于取消执行 `func`。
  36.  debounced.cancel = () => {
  37.    active = false
  38.   }
  39.  // 为 `debounced` 函数添加一个方法 `flush`，用于立即执行 `func`。
  40.  debounced.flush = (...args: TArgs) => func(...args)
  42.  // 返回防抖后的函数 `debounced`。
  43.  return debounced
  44. }

  复制代码
  
  
  • 方法流程说明：
    
    
    • 接受一个包含延迟时间 delay 的对象和一个需要被防抖的函数 func 作为参数。
      
    • 返回一个新的函数 debounced，这个函数在被连续调用时会取消之前的调用并重新计时。
      
    • 如果在延迟时间 delay 内没有再次被调用，func 将被执行。
      
    • debounced 函数提供了三个额外的方法：isPending 检查是否有等待执行的函数，cancel 取消等待执行的函数，flush 立即执行函数。
      
    • 使用 debounce 函数可以帮助你控制函数的执行频率，尤其是在处理频繁触发的事件时。
      
    
    
  
  

memo：创建一个记忆化（memoized）版本的给定函数

• 使用说明
  0. 功能描述：记忆化是一种优化技术，它存储函数执行的结果，并在后续调用中重用这个结果，以避免重复执行相同计算。这种技术特别适用于计算成本高昂或调用频繁的函数。
  0. 参数：需要被记忆化的函数、可选配置对象。
  0. 返回值：返回一个记忆版本的函数。
  
• 使用代码示例
  1. import { memo } from 'radash'
  3. const timestamp = memo(() => Date.now())
  5. const now = timestamp()
  6. const later = timestamp()
  8. now === later // => true

  复制代码
• 源码解析
  1. // 定义一个泛型函数 `memo`。
  2. export const memo = <TArgs extends any[], TResult>(
  3.  // 第一个参数 `func` 是需要被记忆化的函数。
  4.  func: (...args: TArgs) => TResult,
  5.  // 第二个参数 `options` 是一个可选的配置对象。
  6.  options: {
  7.    // `key` 是一个可选的函数，用于根据函数的参数生成一个唯一的缓存键。
  8.    key?: (...args: TArgs) => string
  9.    // `ttl` 是一个可选的数字，表示缓存的生存时间（以毫秒为单位）。
  10.    ttl?: number
  11.   } = {} // 如果没有提供 `options`，则使用一个空对象作为默认值。
  12. ) => {
  13.  // `memo` 函数返回一个记忆化版本的 `func`。
  14.  return memoize({}, func, options.key ?? null, options.ttl ?? null) as (
  15.    // 返回的函数类型与原始 `func` 相同。
  16.    ...args: TArgs
  17.   ) => TResult
  18. }

  复制代码
  
  
  • 方法流程说明：
    
    
    • memo 函数接受一个函数 func 和一个可选的配置对象 options。
      
    • options 对象包含两个可选的属性：key 和 ttl。key 是一个函数，用于生成缓存键；ttl 是缓存的生存时间。
      
    • memo 函数调用 memoize 函数（在代码片段中未定义）来创建一个记忆化版本的 func。memoize 函数接受一个缓存对象、原始函数 func、键生成函数 options.key 和生存时间 options.ttl。
      
    • 如果没有提供 options.key，则使用 null 作为默认值；如果没有提供 options.ttl，也使用 null 作为默认值。
      
    • memo 函数返回一个记忆化版本的 func，它的类型与原始 func 相同。
      
    
    
  
  

partial ：创建一个偏应用的部分函数（允许你预先填充一些参数，只需传入剩余参数）

• 使用说明
  
  
  • 功能描述：创建一个新函数，这个新函数是原始函数 fn 的偏应用版本。偏应用（Partial Application）是一种函数式编程技术，它允许你预先填充一些参数，并返回一个新函数，这个新函数只需要剩余的参数就可以执行。
    
  • 参数：原始函数，原始参数数组。
    
  • 返回值：返回一个接受剩余的参数数组 rest的新函数。
    
  
  
• 使用代码示例
  1. import { partial } from 'radash'
  3. const add = (a: number, b: number) => a + b
  5. const addFive = partial(add, 5)
  7. addFive(2) // => 7

  复制代码
• 源码解析
  1. // 定义一个泛型函数 `partial`。
  2. export const partial = <T extends any[], TA extends Partial<T>, R>(
  3.  // `fn` 是原始函数，它接受一个参数数组 `T` 并返回一个结果 `R`。
  4.  fn: (...args: T) => R,
  5.  // 使用展开运算符接收一个或多个预先填充的参数数组 `args`，其类型为 `TA`。
  6.  // `TA` 是原始参数数组 `T` 的部分类型。
  7.  ...args: TA
  8. ) => {
  9.  // `partial` 函数返回一个新函数，这个新函数接受剩余的参数数组 `rest`。
  10.  return (...rest: RemoveItemsInFront<T, TA>) =>
  11.    // 新函数调用原始函数 `fn`，首先展开预先填充的参数 `args`，然后展开剩余的参数 `rest`。
  12.    // 使用类型断言 `as T` 确保参数数组的类型正确。
  13.    fn(...([...args, ...rest] as T))
  14. }

  复制代码
  
  
  • 这段代码中使用了几个未定义的函数和类型，如 tryit、list、fork 和 sort，以及类型 WorkItemResult。我们可以假设这些函数和类型具有以下功能：
    
    
    • partial 函数接受一个原始函数 fn 和一系列预先填充的参数 args。
      
    • 返回一个新函数，这个新函数接受剩余的参数 rest。
      
    • 当新函数被调用时，它将预先填充的参数 args 和剩余的参数 rest 合并成一个完整的参数数组，并调用原始函数 fn。
      
    • 原始函数 fn 被执行，并返回结果。
      
    • 类型 RemoveItemsInFront 是一个类型操作，它从类型 T 中移除与 TA 对应的项。它在这段代码中没有定义，我们可以假设它的作用是确保 rest 参数只包含原始函数 fn 还需要的参数。
      
    
    
  
  

partob：创建一个偏应用的部分函数（跟partial类似，不过接收参数不一样）

• 使用说明
  
  
  • 功能描述：创建一个新的函数，该函数是原始函数 fn 的偏应用版本。这个新函数将接受一个对象参数 restobj，它包含了原始函数 fn 所需参数的剩余部分，然后将 restobj 与预先填充的参数对象 argobj 合并后调用 fn。
    
  • 参数：原始函数、预先填充的参数对象。
    
  • 返回值：返回一个接收剩余参数对象 restobj的新函数。
    
  
  
• 使用代码示例
  1. import { partob } from 'radash'
  3. const add = (props: { a: number; b: number }) => props.a + props.b
  5. const addFive = partob(add, { a: 5 })
  7. addFive({ b: 2 }) // => 7

  复制代码
• 源码解析
  1. // 定义一个泛型函数 `partob`。
  2. export const partob = <T, K, PartialArgs extends Partial<T>>(
  3.  // `fn` 是原始函数，它接受一个类型为 `T` 的参数对象，并返回一个类型为 `K` 的结果。
  4.  fn: (args: T) => K,
  5.  // `argobj` 是一个预先填充的参数对象，其类型为 `PartialArgs`，它是原始参数对象 `T` 的部分类型。
  6.  argobj: PartialArgs
  7. ) => {
  8.  // `partob` 函数返回一个新的函数，该函数接受一个类型为 `Omit<T, keyof PartialArgs>` 的参数对象 `restobj`。
  9.  // `Omit<T, keyof PartialArgs>` 表示从 `T` 中省略掉 `PartialArgs` 中已有的键，只保留剩余的键。
  10.  return (restobj: Omit<T, keyof PartialArgs>): K =>
  11.    // 新函数调用原始函数 `fn`，传入合并后的参数对象。
  12.    fn({
  13.      // 使用展开运算符将 `argobj` 和 `restobj` 合并为一个新对象。
  14.      // 这里的类型断言确保合并后的对象符合原始参数对象 `T` 的类型。
  15.      ...(argobj as Partial<T>),
  16.      ...(restobj as Partial<T>)
  17.    } as T)
  18. }

  复制代码
  
  
  • 方法流程说明：
    
    
    • partob 函数接受一个原始函数 fn 和预先填充的参数对象 argobj。
      
    • 返回一个新的函数，该函数接受剩余参数对象 restobj。
      
    • 当新函数被调用时，它将预先填充的参数对象 argobj 和剩余参数对象 restobj 合并成一个完整的参数对象，并调用原始函数 fn。
      
    • 原始函数 fn 被执行，并返回结果。
      
    
    
  
  

proxied：创建动态代理对象

• 使用说明
  
  
  • 功能描述：创建的代理对象可以拦截对其属性的访问并返回由一个处理函数 handler 产生的值。
    
  • 参数：处理函数（该函数接受一个属性名）。
    
  • 返回值：返回一个新的 Proxy 对象。
    
  
  
• 使用代码示例
  1. import { proxied } from 'radash'
  3. type Property = 'name' | 'size' | 'getLocation'
  5. const person = proxied((prop: Property) => {
  6.  switch (prop) {
  7.    case 'name':
  8.      return 'Joe'
  9.    case 'size':
  10.      return 20
  11.    case 'getLocation'
  12.      return () => 'here'
  13.   }
  14. })
  16. person.name // => Joe
  17. person.size // => 20
  18. person.getLocation() // => here

  复制代码
• 源码解析
  1. // 定义一个泛型函数 `proxied`。
  2. export const proxied = <T, K>(
  3.  // `handler` 是一个函数，接受一个属性名 `propertyName` 并返回一个类型为 `K` 的值。
  4.  handler: (propertyName: T) => K
  5. ): Record<string, K> => {
  6.  // 返回一个新的 Proxy 对象。
  7.  return new Proxy(
  8.    // 第一个参数是要代理的目标对象，这里是一个空对象。
  9.    {},
  10.    // 第二个参数是一个处理器对象，它定义了多种拦截操作的方法。
  11.    {
  12.      // `get` 方法用于拦截对属性的读取操作。
  13.      get: (target, propertyName: any) =>
  14.        // 当尝试读取属性时，调用 `handler` 函数并传入属性名。
  15.        // 返回 `handler` 函数的结果作为属性的值。
  16.        handler(propertyName)
  17.    }
  18.   )
  19. }

  复制代码
  
  
  • 方法流程说明：
    
    
    • proxied 函数接受一个 handler 函数作为参数。
      
    • 使用 new Proxy() 创建一个新的 Proxy 对象，它代理一个空对象。
      
    • 定义 Proxy 对象的 get 方法，用于拦截对代理对象属性的读取操作。
      
    • 当尝试读取任何属性时，get 方法调用 handler 函数，传入被读取的属性名称。
      
    • handler 函数返回的值作为属性的值返回给调用者。
      
    • 返回创建的 Proxy 对象，它的类型为 Record，表示一个对象，其属性名为字符串，属性值的类型为 K。
      
    
    
  
  

throttle ：函数节流

• 使用说明
  
  
  • 功能描述：节流（Throttling）是一种控制函数调用频率的技术，它确保函数在指定的时间间隔内最多只执行一次。这通常用于限制频繁触发的事件（如窗口调整大小、滚动等）的处理函数。
    
  • 参数：对象（{interval}）—— 触发间隔、需要节流的函数。
    
  • 返回值：返回节流后的函数。
    
  
  
• 使用代码示例
  1. import { throttle } from 'radash'
  3. const onMouseMove = () => {
  4.  rerender()
  5. }
  7. addEventListener('mousemove', throttle({ interval: 200 }, onMouseMove))

  复制代码
• 源码解析
  1. // 定义一个泛型函数 `throttle`。
  2. export const throttle = <TArgs extends any[]>(
  3.  // 第一个参数是一个对象，包含 `interval` 属性，它是函数执行之间的毫秒间隔。
  4.   { interval }: { interval: number },
  5.  // 第二个参数 `func` 是需要被节流的函数。
  6.  func: (...args: TArgs) => any
  7. ) => {
  8.  // 初始化一个标志变量 `ready`，表示函数是否准备好执行。
  9.  let ready = true
  10.  // 初始化一个变量 `timer` 用于保存 setTimeout 的返回值。
  11.  let timer: NodeJS.Timeout | undefined = undefined
  13.  // 定义一个节流后的函数 `throttled`。
  14.  const throttled: ThrottledFunction<TArgs> = (...args: TArgs) => {
  15.    // 如果函数尚未准备好执行，直接返回。
  16.    if (!ready) return
  17.    // 调用 `func` 并传入参数。
  18.    func(...args)
  19.    // 设置 `ready` 为 `false`，防止函数在间隔时间内再次执行。
  20.    ready = false
  21.    // 设置一个定时器，在 `interval` 毫秒后将 `ready` 重新设为 `true`，允许函数再次执行。
  22.    timer = setTimeout(() => {
  23.      ready = true
  24.      // 定时器执行完毕后，清除 `timer`。
  25.      timer = undefined
  26.    }, interval)
  27.   }
  28.  
  29.  // 为 `throttled` 函数添加一个方法 `isThrottled`，用于检查函数是否处于节流状态。
  30.  throttled.isThrottled = () => {
  31.    return timer !== undefined
  32.   }
  33.  
  34.  // 返回节流后的函数 `throttled`。
  35.  return throttled
  36. }

  复制代码
  
  
  • 方法流程说明：
    
    
    • throttle 函数接受一个配置对象（包含 interval 属性）和一个需要被节流的函数 func 作为参数。
      
    • 返回一个新的函数 throttled，该函数在被连续调用时会限制函数的执行频率。
      
    • 当 throttled 函数被调用时，如果 ready 是 true（即函数准备好执行），func 将被执行。
      
    • 执行 func 后，ready 设置为 false，并通过 setTimeout 设置一个定时器，定时器在 interval 毫秒后执行，将 ready 设置回 true。
      
    • 如果 throttled 函数在定时器完成之前再次被调用，由于 ready 是 false，func 不会被执行。
      
    • throttled 函数提供了一个额外的方法 isThrottled，用于检查函数是否正在等待下一次执行的间隔。
      
    
    
  
  

Number相关

inRange ：检查给定数字是否在两个数字之间

• 使用说明
  
  
  • 功能描述：检查给定数字是否在两个数字之间。判断包含起始值。不包含结束值。范围的开始和结束可以是升序或降序。如果未指定结束值，则将其设置为起始值。并且把起始值设置为0。
    
  • 参数：需要检查的值，判断的起始值，[判断的结束值]。
    
  • 返回值：在范围内返回 true，否则返回 false。
    
  
  
• 使用代码示例
  1. import { inRange } from 'radash'
  3. inRange(10, 0, 20) // true
  4. inRange(9.99, 0, 10) // true
  5. inRange(Math.PI, 0, 3.15) // true
  6. inRange(10, 10, 20) // true
  7. inRange(10, 0, 10) // false
  9. inRange(1, 2) // true
  10. inRange(1, 0) // false

  复制代码
• 源码解析
  1. // 定义一个名为 `inRange` 的函数。
  2. function inRange(number, start, end) {
  3.    // 首先检查传入的参数类型是否正确：`number` 和 `start` 必须是数字类型，
  4.    // `end` 要么是未定义，要么是数字类型。
  5.    const isTypeSafe = typeof number === "number" && typeof start === "number" && (typeof end === "undefined" || typeof end === "number");
  6.    // 如果参数类型不正确，直接返回 `false`。
  7.    if (!isTypeSafe) {
  8.      return false;
  9.    }
  11.    // 如果 `end` 参数未提供（即 `undefined`），则将 `end` 设置为 `start` 的值，
  12.    // 而将 `start` 设置为 `0`。这样就创建了一个从 `0` 到 `start` 的范围。
  13.    if (typeof end === "undefined") {
  14.      end = start;
  15.      start = 0;
  16.    }
  18.    // 检查 `number` 是否在 `start` 和 `end` 指定的范围内。
  19.    // 使用 `Math.min` 和 `Math.max` 来确保 `start` 和 `end` 的顺序正确，
  20.    // 即使它们被反向提供（例如 `end` 小于 `start`）。
  21.    return number >= Math.min(start, end) && number < Math.max(start, end);
  22. }

  复制代码
  
  
  • 方法流程说明：
    
    
    • 首先验证所有参数的类型。如果 number 或 start 不是数字，或者 end 不是数字且不是 undefined，函数返回 false。
      
    • 如果 end 参数未定义，函数将其解释为只提供了一个参数的情况，即一个从 0 到 start 的范围。
      
    • 函数计算 number 是否大于等于范围的最小值（Math.min(start, end)）并且小于范围的最大值（Math.max(start, end)）。
      
    • 如果 number 在这个范围内，函数返回 true；否则返回 false。
      
    
    
  
  

toFloat ：可能的情况下，将一个值转为浮点值

• 使用说明
  
  
  • 功能描述：将一个值转换为浮点数。如果转换失败或者提供的值是 null 或 undefined，函数将返回默认值。
    
  • 参数：需要转换的值、默认值。
    
  • 返回值：能转换则返回转换后的浮点数，否则返回传入的默认值。
    
  
  
• 使用代码示例
  1. import { toFloat } from 'radash'
  3. toFloat(0) // => 0.0
  4. toFloat(null) // => 0.0
  5. toFloat(null, 3.33) // => 3.33

  复制代码
• 源码解析
  1. // 定义一个名为 `toFloat` 的函数。
  2. const toFloat = (value, defaultValue) => {
  3.  // 如果没有提供 `defaultValue`，则使用 `0` 作为默认值。
  4.  // `void 0` 是 `undefined` 的一种安全写法。
  5.  const def = defaultValue === void 0 ? 0 : defaultValue;
  7.  // 如果 `value` 是 `null` 或 `undefined`，返回默认值 `def`。
  8.  if (value === null || value === void 0) {
  9.    return def;
  10.   }
  12.  // 尝试将 `value` 转换为浮点数。
  13.  const result = parseFloat(value);
  15.  // 如果转换结果是 `NaN`（Not-a-Number），返回默认值 `def`。
  16.  // 否则，返回转换后的浮点数 `result`。
  17.  return isNaN(result) ? def : result;
  18. };

  复制代码
  
  
  • 方法流程说明：
    
    
    • 首先检查 defaultValue 是否提供，如果没有提供，则将 def 设置为 0。
      
    • 检查 value 是否是 null 或 undefined，如果是，返回 def。
      
    • 使用 parseFloat 函数尝试将 value 转换为浮点数。
      
    • 使用 isNaN 函数检查转换结果是否为 NaN。
      
    • 如果结果是 NaN，返回 def；如果转换成功，返回浮点数结果 result。
      
    
    
  
  

toInt：可能的情况下，将一个值转为整数

• 使用说明
  
  
  • 功能描述：将一个值转换为整数。如果转换失败或者提供的值是 null 或 undefined，函数将返回默认值。
    
  • 参数：需要转换的值、默认值。
    
  • 返回值：能转换则返回转换后的整数，否则返回传入的默认值。
    
  
  
• 使用代码示例
  1. import { toInt } from 'radash'
  3. toInt(0) // => 0
  4. toInt(null) // => 0
  5. toInt(null, 3) // => 3

  复制代码
• 源码解析
  1. // 定义一个名为 `toFloat` 的函数。
  2. const toFloat = (value, defaultValue) => {
  3.  // 如果没有提供 `defaultValue`，则使用 `0` 作为默认值。
  4.  // `void 0` 是 `undefined` 的一种安全写法。
  5.  const def = defaultValue === void 0 ? 0 : defaultValue;
  7.  // 如果 `value` 是 `null` 或 `undefined`，返回默认值 `def`。
  8.  if (value === null || value === void 0) {
  9.    return def;
  10.   }
  12.  // 尝试将 `value` 转换为浮点数。
  13.  const result = parseFloat(value);
  15.  // 如果转换结果是 `NaN`（Not-a-Number），返回默认值 `def`。
  16.  // 否则，返回转换后的浮点数 `result`。
  17.  return isNaN(result) ? def : result;
  18. };

  复制代码
  
  
  • 方法流程说明：
    
    
    • 首先检查 defaultValue 是否提供，如果没有提供，则将 def 设置为 0。
      
    • 检查 value 是否是 null 或 undefined，如果是，返回 def。
      
    • 使用 parseFloat 函数尝试将 value 转换为浮点数。
      
    • 使用 isNaN 函数检查转换结果是否为 NaN。
      
    • 如果结果是 NaN，返回 def；如果转换成功，返回浮点数结果 result。
      
    
    
  
  

写在后面

• 老实说能看到这里的人呢，都是美丽帅气有眼光又多金的人才，感谢阅读到最后，Peace and Love！
  
• 后续我们会继续分享 Radash 库中其他方法的使用和源码解析。
  
• 大家有任何问题或见解，欢迎评论区留言交流和批评指正！！！
  
• 你的每一个点赞和收藏都是作者写作的动力！！！（求个点赞《《小声逼逼》》）
  
• 点击访问：radash官网
  

来源:https://www.cnblogs.com/muqiqiang/p/18201248
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！