lodash已死？radash庫方法介紹及原始碼解析 —— 判斷方法篇

雾散声声慢發表於2024-06-07
原始碼

前言

大家好，我是阿瓜。一個勵志分享更多技術的前端瓜 ~

我們已經分享了 radash 庫中陣列、物件等相關的方法，大家感興趣的可以前往主頁檢視閱讀；

或許你最近在某個地方聽過或者看過 radash 這個詞，它是一個typescript編寫的方法庫，如果你想試試使用它，我們有簡單使用示例，直接套用類似情景使用即可，如果你想深入瞭解一下這個庫，想閱讀一下它的原始碼，我們也會帶你逐行解析程式碼；不管是哪種，相信你都能在文章裡有所收穫；

後續所有方法分享完畢後，我們會整理一份詳細目錄文章以及思維導圖，方便大家查閱使用。

isArray：判斷某個值是否為陣列

  1. 使用說明

    • 功能說明：跟 Array.isArray() 方法功能一致。
    • 引數：需要判斷的值。
    • 返回值：是陣列返回 true, 否則返回 false。

  2. 使用程式碼示例

    import { isArray } from 'radash'

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

  3. 原始碼解析

    相當於直接呼叫 Array.isArray
export const isArray = Array.isArray
    • 方法流程說明：
      1. 把Arrary.isArray 重新複製到 isArray，呼叫時直接寫 isArray()

isDate：判斷某個值是否為日期物件

  1. 使用說明

    • 引數：需要判斷的值。
    • 返回值：是日期返回 true, 否則返回 false。

  2. 使用程式碼示例

    import { isDate } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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. 使用程式碼示例

    import { isDate } from 'radash'

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

  3. 原始碼解析

    // 定義一個函式 `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. 使用程式碼示例

    import { isEqual } from 'radash'

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

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

  3. 原始碼解析

    // 定義一個泛型函式 `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. 使用程式碼示例

    import { isFloat } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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. 使用程式碼示例

    import { isFunction } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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. 使用程式碼示例

    import { isInt } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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. 使用程式碼示例

    import { isNumber } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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. 使用程式碼示例

    import { isObject } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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. 使用程式碼示例

    import { isPrimitive } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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. 使用程式碼示例

    import { isPromise } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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. 使用程式碼示例

    import { isString } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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. 使用程式碼示例

    import { isSymbol } from 'radash'

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

  3. 原始碼解析

    // 定義一個名為 `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完整方法目錄上傳，包括思維導圖和使用目錄。

大家有任何問題或見解，歡迎評論區留言交流和批評指正！！！

你的每一個收藏都是作者寫作的動力！！！

相關文章