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完整方法目录上传，包括思维导图和使用目录。

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

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

相关推荐
醉の虾8 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧16 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm26 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep70139 分钟前
第8章利用CSS制作导航菜单
前端·css
hummhumm43 分钟前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解？应该在哪些方面可以更好的使用！
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具（DevTools）更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录（二）-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿