lodash已死？radash库方法介绍及源码解析 —— 判断方法篇

雾散声声慢2024-06-07 11:11

前言

大家好，我是阿瓜。一个励志分享更多技术的前端瓜 ~

我们已经分享了 radash 库中数组、对象等相关的方法，大家感兴趣的可以前往主页查看阅读；

或许你最近在某个地方听过或者看过 radash 这个词，它是一个typescript编写的方法库，如果你想试试使用它，我们有简单使用示例，直接套用类似情景使用即可，如果你想深入了解一下这个库，想阅读一下它的源码，我们也会带你逐行解析代码；不管是哪种，相信你都能在文章里有所收获；

后续所有方法分享完毕后，我们会整理一份详细目录文章以及思维导图，方便大家查阅使用。

isArray：判断某个值是否为数组

  1. 使用说明

    • 功能说明：跟 Array.isArray() 方法功能一致。
    • 参数：需要判断的值。
    • 返回值：是数组返回 true, 否则返回 false。

  2. 使用代码示例

    js 复制代码 
    import { isArray } from 'radash'

isArray('hello') // => false
isArray(['hello']) // => true

  3. 源码解析

    js 复制代码 
    相当于直接调用 Array.isArray
export const isArray = Array.isArray
    • 方法流程说明：
      1. 把Arrary.isArray 重新复制到 isArray，调用时直接写 isArray()

isDate：判断某个值是否为日期对象

  1. 使用说明

    • 参数：需要判断的值。
    • 返回值：是日期返回 true, 否则返回 false。

  2. 使用代码示例

    js 复制代码 
    import { isDate } from 'radash'

isDate(new Date()) // => true
isDate(12)         // => false
isDate('hello')    // => false

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isDate` 的函数。
export const isDate = (value: any): value is Date => {
  // 使用 `Object.prototype.toString` 方法获取 `value` 的内部 `[[Class]]` 属性。
  // 如果 `value` 是一个 `Date` 对象，`[[Class]]` 属性将是 "[object Date]"。
  return Object.prototype.toString.call(value) === '[object Date]'
}

    • 方法流程说明：

      1. isDate 函数接受一个任意类型的参数 value。
      2. 函数使用 Object.prototype.toString.call(value) 来获取 value 的字符串表示，这是一种检查 JavaScript 值类型的可靠方法。
      3. 函数比较这个字符串表示是否等于 '[object Date]'。
      4. 如果等于，说明 value 是一个 Date 对象，函数返回 true。
      5. 如果不等于，说明 value 不是一个 Date 对象，函数返回 false。

isEmpty：判断一个值是否为空

  1. 使用说明

    • 功能说明：用于检查一个值是否为空。"空" 的定义取决于值的类型，对于不同的数据类型有不同的判断逻辑。
    • 参数：需要判断的值。
    • 返回值：为空返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isDate } from 'radash'

isDate(new Date()) // => true
isDate(12)         // => false
isDate('hello')    // => false

  3. 源码解析

    js 复制代码 
    // 定义一个函数 `isEmpty`。
export const isEmpty = (value: any) => {
  // 如果值为布尔类型，直接返回 true，因为这里假设布尔类型不携带 "内容"。
  if (value === true || value === false) return true

  // 如果值为 null 或 undefined，返回 true，因为它们代表没有值。
  if (value === null || value === undefined) return true

  // 如果值为数字，返回是否数字为 0。
  // 这里假设 `isNumber` 是一个函数，用于检查值是否为数字类型。
  if (isNumber(value)) return value === 0

  // 如果值为日期对象，检查日期的时间是否为 NaN。
  // 这里假设 `isDate` 是一个函数，用于检查值是否为 Date 对象。
  if (isDate(value)) return isNaN(value.getTime())

  // 如果值是函数，返回 false，因为函数被认为总是 "非空"。
  // 这里假设 `isFunction` 是一个函数，用于检查值是否为函数类型。
  if (isFunction(value)) return false

  // 如果值是符号，返回 false，因为符号被认为总是 "非空"。
  // 这里假设 `isSymbol` 是一个函数，用于检查值是否为 Symbol 类型。
  if (isSymbol(value)) return false

  // 检查值是否有 length 属性，如果有，检查它是否为 0。
  const length = (value as any).length
  if (isNumber(length)) return length === 0

  // 检查值是否有 size 属性，如果有，检查它是否为 0。
  const size = (value as any).size
  if (isNumber(size)) return size === 0

  // 如果值是对象，通过获取对象的键的数量来判断。
  const keys = Object.keys(value).length
  return keys === 0
}

    • 方法流程说明：

      1. isEmpty 函数接受一个任意类型的参数 value。
      2. 函数首先检查 value 是否为布尔类型、null 或 undefined，如果是，则返回 true。
      3. 函数检查 value 是否为数字或日期对象，并对这些类型进行特定的空值检查。
      4. 函数检查 value 是否为函数或符号，如果是，则返回 false。
      5. 函数尝试获取 value 的 length 和 size 属性，并检查它们是否为 0。
      6. 如果 value 是一个对象，函数检查对象的键的数量是否为 0。
      7. 返回一个布尔值，表示 value 是否为空。

isEqual：判断两个值是否相等

  1. 使用说明

    • 功能说明：用于深度比较两个值 x 和 y 是否相等。这个函数支持比较原始值、Date 对象、RegExp 对象以及普通对象。
    • 参数：需要比较的两个值。
    • 返回值：相等返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isEqual } from 'radash'

isEqual(null, null) // => true
isEqual([], [])     // => true

isEqual('hello', 'world') // => false
isEqual(22, 'abc')        // => false

  3. 源码解析

    js 复制代码 
    // 定义一个泛型函数 `isEqual`。
export const isEqual = <TType>(x: TType, y: TType): boolean => {
  // 首先使用 `Object.is` 检查两个值是否相同，这个方法可以正确处理 `NaN` 和 `-0`。
  if (Object.is(x, y)) return true
  
  // 如果两个值都是 `Date` 对象，比较它们的时间戳。
  if (x instanceof Date && y instanceof Date) {
    return x.getTime() === y.getTime()
  }

  // 如果两个值都是 `RegExp` 对象，比较它们的字符串表示。
  if (x instanceof RegExp && y instanceof RegExp) {
    return x.toString() === y.toString()
  }

  // 如果任何一个值不是对象或者是 `null`，返回 `false`。
  if (
    typeof x !== 'object' ||
    x === null ||
    typeof y !== 'object' ||
    y === null
  ) {
    return false
  }

  // 使用 `Reflect.ownKeys` 获取 `x` 和 `y` 的所有自有属性键。
  const keysX = Reflect.ownKeys(x as unknown as object) as (keyof typeof x)[]
  const keysY = Reflect.ownKeys(y as unknown as object)

  // 如果 `x` 和 `y` 的键的数量不同，返回 `false`。
  if (keysX.length !== keysY.length) return false

  // 遍历 `x` 的键。
  for (let i = 0; i < keysX.length; i++) {
    // 检查 `y` 是否有相同的键。
    if (!Reflect.has(y as unknown as object, keysX[i])) return false

    // 递归地调用 `isEqual` 来比较 `x` 和 `y` 在当前键上的值。
    if (!isEqual(x[keysX[i]], y[keysX[i]])) return false
  }

  // 如果所有检查都通过，返回 `true` 表示 `x` 和 `y` 相等。
  return true
}

    • 方法流程说明：

      1. isEqual 函数接受两个类型为 TType 的参数 x 和 y。
      2. 首先检查两个值是否严格相等，包括处理 NaN 和 -0 的情况。
      3. 如果两个值都是 Date 或 RegExp 对象，分别比较它们的时间戳或字符串表示。
      4. 如果任何一个值不是对象或者是 null，直接返回 false。
      5. 获取两个对象的自有属性键，并比较键的数量。
      6. 遍历 x 的键，并检查 y 是否有相同的键。
      7. 递归地调用 isEqual 函数来比较在每个键上的值。
      8. 如果所有键和值都匹配，返回 true 表示两个对象相等。

isFloat：判断一个值是否为浮点数

  1. 使用说明

    • 功能说明：用于检查一个值是否为浮点数。如果是浮点数，它返回 true；否则返回 false。这个函数依赖于一个未在代码中定义的 isNumber 函数，我们可以假设 isNumber 函数用于检查一个值是否为 number 类型。
    • 参数：需要判断的值。
    • 返回值：是 float 类型返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isFloat } from 'radash'

isFloat(12.233)  // => true
isFloat(12)      // => false
isFloat('hello') // => false

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isFloat` 的函数。
export const isFloat = (value: any): value is number => {
  // 首先使用 `isNumber` 函数检查 `value` 是否为数字类型。
  // 然后检查 `value` 除以 1 的余数是否不等于 0，来确定它是否为浮点数。
  return isNumber(value) && value % 1 !== 0
}

    • 方法流程说明：

      1. isFloat 函数接受一个任意类型的参数 value。
      2. 函数使用 isNumber 函数检查 value 是否为数字类型。
      3. 函数计算 value 除以 1 的余数，如果余数不等于 0，则说明 value 是一个浮点数。
      4. 如果 value 是一个浮点数，函数返回 true。
      5. 否则，函数返回 false。

isFunction：判断一个值是否为函数

  1. 使用说明

    • 功能说明：用于检查给定的值 value 是否为函数。如果是函数，它返回 true；否则返回 false。
    • 参数：需要判断的值。
    • 返回值：是函数返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isFunction } from 'radash'

isFunction('hello') // => false
isFunction(['hello']) // => false
isFunction(() => 'hello') // => true

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isFunction` 的函数。
export const isFunction = (value: any): value is Function => {
  // 检查 `value` 是否存在，并且 `value` 是否具有 `constructor`、`call` 和 `apply` 属性。
  // 这些属性是函数对象特有的，所以这个检查用来判断 `value` 是否为函数。
  return !!(value && value.constructor && value.call && value.apply)
}

    • 方法流程说明：

      1. isFunction 函数接受一个任意类型的参数 value。
      2. 函数检查 value 是否存在，并且是否具有 constructor、call 和 apply 属性。
      3. constructor 属性存在于所有对象上，并指向创建该对象的构造函数。对于函数对象，它通常指向 Function 构造函数。
      4. call 和 apply 方法是函数对象的内置方法，用于调用函数。
      5. 如果所有这些属性都存在，说明 value 是一个函数对象，函数返回 true。
      6. 如果任何这些属性不存在，说明 value 不是一个函数对象，函数返回 false。

isInt：判断一个值是否是整数

  1. 使用说明

    • 功能说明：用于检查给定的值 value 是否为整数。如果是整数，它返回 true；否则返回 false。这个函数依赖于一个未在代码中定义的 isNumber 函数，我们可以假设 isNumber 函数用于检查一个值是否为 number 类型。
    • 参数：需要判断的值。
    • 返回值：是整数返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isInt } from 'radash'

isInt(12) // => true
isInt(12.233) // => false
isInt('hello') // => false

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isInt` 的函数。
export const isInt = (value: any): value is number => {
  // 首先使用 `isNumber` 函数检查 `value` 是否为数字类型。
  // 然后检查 `value` 除以 1 的余数是否等于 0，来确定它是否为整数。
  return isNumber(value) && value % 1 === 0
}

    • 方法流程说明：

      1. isInt 函数接受一个任意类型的参数 value。
      2. 函数使用 isNumber 函数检查 value 是否为数字类型。
      3. 函数计算 value 除以 1 的余数，如果余数等于 0，则说明 value 是一个整数。
      4. 如果 value 是一个整数，函数返回 true。
      5. 否则，函数返回 false。。

isNumber：判断一个值是否是数字

  1. 使用说明

    • 功能说明：用于检查给定的值 value 是否为数字类型。如果是数字类型，它返回 true；否则返回 false。这个函数使用了 Number 构造函数来尝试将 value 转换为数字，然后与原始值进行比较。
    • 参数：需要判断的值。
    • 返回值：是数字返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isNumber } from 'radash'

isNumber('hello') // => false
isNumber(['hello']) // => false
isNumber(12) // => true

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isNumber` 的函数。
export const isNumber = (value: any): value is number => {
  try {
    // 尝试使用 `Number` 构造函数将 `value` 转换为数字。
    // 如果转换后的值与原始值 `value` 相等，返回 `true`。
    return Number(value) === value
  } catch {
    // 如果在尝试转换过程中发生错误，返回 `false`。
    return false
  }
}

    • 方法流程说明：

      1. isNumber 函数接受一个任意类型的参数 value。
      2. 函数尝试使用 Number 构造函数将 value 转换为数字。
      3. 如果转换后的值与原始值 value 相等（且没有类型转换），则说明 value 本身就是一个数字，函数返回 true。
      4. 如果在尝试转换过程中发生错误（例如，value 是一个对象或某个无法转换为数字的值），捕获错误并返回 false。

isObject：判断一个值是否为对象

  1. 使用说明

    • 功能说明：用于检查给定的值 value 是否为普通对象（即直接由 Object 构造函数创建的对象）。如果是普通对象，它返回 true；否则返回 false。
    • 参数：需要判断的值。
    • 返回值：是对象返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isObject } from 'radash'

isObject('hello') // => false
isObject(['hello']) // => false
isObject(null) // => false
isObject({ say: 'hello' }) // => true

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isObject` 的函数。
export const isObject = (value: any): value is object => {
  // 首先检查 `value` 是否为真值，以排除 `null` 和未定义的值。
  // 然后检查 `value.constructor` 是否等于 `Object` 构造函数，
  // 这是因为普通对象的构造函数应该是 `Object`。
  return !!value && value.constructor === Object
}

    • 方法流程说明：

      1. isObject 函数接受一个任意类型的参数 value。
      2. 函数检查 value 是否为真值，以确保它不是 null 或 undefined（这些值会导致 value.constructor 访问抛出错误）。
      3. 函数检查 value 的 constructor 属性是否等于全局 Object 构造函数。这个检查用来确认 value 是否是由 Object 构造函数创建的普通对象。
      4. 如果 value 是一个普通对象，函数返回 true。
      5. 否则，函数返回 false。

isPrimitive：判断一个值是否为原始值

  1. 使用说明

    • 功能说明：用于检查给定的值 value 是否是原始值。原始值是指那些不是对象也不是函数的数据类型，包括 undefined、null、boolean、number、string 和 symbol。如果 value 是原始值，函数返回 true；否则返回 false。
    • 参数：需要判断的值。
    • 返回值：是原始值返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isPrimitive } from 'radash'

isPrimitive(22) // => true
isPrimitive('hello') // => true
isPrimitive(['hello']) // => false

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isPrimitive` 的函数。
export const isPrimitive = (value: any): boolean => {
  // 检查 `value` 是否为 `undefined` 或 `null`，这两个值是原始值。
  // 或者检查 `value` 的类型是否不是 'object' 和 'function'，这两个类型表示复合类型。
  return (
    value === undefined ||
    value === null ||
    (typeof value !== 'object' && typeof value !== 'function')
  )
}

    • 方法流程说明：

      1. isPrimitive 函数接受一个任意类型的参数 value。
      2. 函数检查 value 是否等于 undefined 或 null，这两个值是标准的原始值。
      3. 函数使用 typeof 操作符检查 value 是否不是对象('object')或函数('function')类型。
      4. 如果 value 是原始值类型之一，函数返回 true。
      5. 如果 value 是对象或函数类型，函数返回 false。

isPromise：判断一个值是否为Promise

  1. 使用说明

    • 功能说明：用于检查给定的值 value 是否是一个 Promise 对象。如果是 Promise 对象，它返回 true；否则返回 false。这个函数在检查时会考虑 value 是否存在、是否具有 then 属性，以及 then 属性是否是一个函数。
    • 参数：需要确认的值。
    • 返回值：是Promise返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isPromise } from 'radash'

isPromise('hello') // => false
isPromise(['hello']) // => false
isPromise(new Promise(res => res())) // => true

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isPromise` 的函数。
export const isPromise = (value: any): value is Promise<any> => {
  // 首先检查 `value` 是否存在，如果不存在（比如是 `null` 或 `undefined`），返回 `false`。
  if (!value) return false
  // 检查 `value` 是否具有 `then` 属性，如果没有，返回 `false`。
  // `then` 属性是 `Promise` 对象特有的。
  if (!value.then) return false
  // 使用 `isFunction` 函数检查 `value.then` 是否是一个函数，如果不是，返回 `false`。
  if (!isFunction(value.then)) return false
  // 如果通过了所有检查，返回 `true` 表示 `value` 是一个 `Promise` 对象。
  return true
}

    • 方法流程说明：

      1. isPromise 函数接受一个任意类型的参数 value。
      2. 函数检查 value 是否存在，因为 null 和 undefined 显然不是 Promise 对象。
      3. 函数检查 value 是否具有 then 属性，因为所有的 Promise 对象都有一个 then 方法用于注册回调。
      4. 函数使用 isFunction 函数检查 value.then 是否是一个函数，以确保它符合 Promise 的特性。
      5. 如果 value 满足所有条件，函数返回 true。
      6. 如果 value 不满足任何一个条件，函数返回 false。

isString：判断一个值是否为字符串

  1. 使用说明

    • 用于检查给定的值 value 是否为字符串。如果是字符串，它返回 true；否则返回 false。函数检查 value 的类型是否为 'string'，这包括了字符串字面量和字符串对象（通过 String 构造函数创建的字符串实例）。
    • 参数：需要判断的值。
    • 返回值：是字符串返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isString } from 'radash'

isString('hello') // => true
isString(['hello']) // => false

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isString` 的函数。
export const isString = (value: any): value is string => {
  // 检查 `value` 的类型是否为 'string'，这包括了字符串字面量。
  // 使用 `instanceof String` 检查 `value` 是否为字符串对象，
  // 即通过 `new String(...)` 创建的对象。
  return typeof value === 'string' || value instanceof String
}

    • 方法流程说明：

      1. isString 函数接受一个任意类型的参数 value。
      2. 函数使用 typeof 操作符检查 value 是否为 'string' 类型，这会匹配所有的字符串字面量。
      3. 函数使用 instanceof String 检查 value 是否为 String 对象，这会匹配通过 new String(...) 创建的字符串实例。
      4. 如果 value 是字符串字面量或字符串对象，函数返回 true。
      5. 如果 value 不是字符串字面量或字符串对象，函数返回 false。

isSymbol：判断一个值是否为Symbol类型

  1. 使用说明

    • 功能说明：用于检查给定的值 value 是否为 symbol 类型。如果是 symbol 类型，它返回 true；否则返回 false。
    • 参数：需要判断的值。
    • 返回值：是Symbol类型返回true，否则返回false。

  2. 使用代码示例

    js 复制代码 
    import { isSymbol } from 'radash'

isSymbol('hello') // => false
isSymbol(Symbol('hello')) // => true

  3. 源码解析

    js 复制代码 
    // 定义一个名为 `isSymbol` 的函数。
export const isSymbol = (value: any): value is symbol => {
  // 首先检查 `value` 是否为真值（即不是 `null` 或 `undefined`）。
  // 然后检查 `value.constructor` 是否等于全局 `Symbol` 函数，
  // 这是因为 `symbol` 类型的值的构造函数应该是 `Symbol`。
  return !!value && value.constructor === Symbol
}

    • 方法流程说明：

      1. isSymbol 函数接受一个任意类型的参数 value。
      2. 函数检查 value 是否为真值，以确保它不是 null 或 undefined（这些值会导致 value.constructor 访问抛出错误）。
      3. 函数检查 value 的 constructor 属性是否等于全局 Symbol 函数。这个检查用来确认 value 是否是一个由 Symbol 函数创建的 symbol 类型的值。
      4. 如果 value 是一个 symbol 类型的值，函数返回 true。
      5. 否则，函数返回 false。

最后

我相信能看到最后的都是帅气多金又想进步的~~~~人才。

如果你想查看其他 radash 相关方法，前往主页查看

目前radash库得所有方法已经更新完毕，下期阿瓜会整理一份radash完整方法目录上传，包括思维导图和使用目录。

大家有任何问题或见解，欢迎评论区留言交流和批评指正！！！

你的每一个收藏都是作者写作的动力！！！

相关推荐
GIS程序媛—椰子11 分钟前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
DogEgg_00117 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端20 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100924 分钟前
ffmpeg重复回听音频流，时长叠加问题
前端
王大锤439134 分钟前
golang通用后台管理系统07（后台与若依前端对接）
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解