lodash已死？radash最全使用介紹（附原始碼說明）—— Array方法篇（4）

雾散声声慢發表於2024-04-24
原始碼

寫在前面

tips：點贊 + 收藏 = 學會！

  • 我們已經介紹了radash的相關資訊和部分Array相關方法，詳情可前往主頁檢視。
  • 本篇我們繼續介紹radash中Array的相關方法的剩餘方法。
  • 本期文章釋出後，作者也會同步整理出Array方法的使用目錄，包括文章說明和腦圖說明。
    • 因為方法較多，後續將專門釋出一篇Array篇總結文件，方便大家查閱使用。

replace ：查詢指定項，並用傳入的去替換；

  1. 使用說明
    • 引數：物件陣列1、用於替換的物件、條件函式。
    • 返回值：替換目標項後的原始素組副本（新陣列）。
  2. 使用程式碼示例
    import { replace } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105
  },
  {
    name: 'Bass',
    weight: 8
  },
  {
    name: 'Trout',
    weight: 13
  }
]

const salmon = {
  name: 'Salmon',
  weight: 22
}

// read: replace fish with salmon where the name is Bass
replace(fish, salmon, f => f.name === 'Bass') // => [marlin, salmon, trout]
  3. 原始碼解析
    // 定義一個泛型函式 `replace`。
export const replace = <T>(
  // 第一個引數是一個具有隻讀屬性的泛型陣列 `list`。
  list: readonly T[],
  // 第二個引數是一個新元素 `newItem`，它將用來替換陣列中的一個現有元素。
  newItem: T,
  // 第三個引數是一個 `match` 函式，它接受一個陣列元素和它的索引，
  // 返回一個布林值來指示是否找到了要被替換的元素。
  match: (item: T, idx: number) => boolean
): T[] => {
  // 如果傳入的陣列 `list` 不存在，則返回一個空陣列。
  if (!list) return []
  // 如果新元素 `newItem` 是未定義的，則返回 `list` 陣列的副本。
  if (newItem === undefined) return [...list]
  // 遍歷 `list` 陣列，尋找一個匹配的元素。
  for (let idx = 0; idx < list.length; idx++) {
    const item = list[idx]
    // 使用 `match` 函式檢查當前元素 `item` 是否是要被替換的元素。
    if (match(item, idx)) {
      // 如果找到匹配的元素，建立並返回一個新陣列，該陣列是透過以下方式構建的：
      // 1. `list` 的開始到匹配位置之前的部分（不包括匹配位置）。
      // 2. 新元素 `newItem`。
      // 3. 匹配位置之後的 `list` 的剩餘部分。
      return [
        ...list.slice(0, idx),
        newItem,
        ...list.slice(idx + 1, list.length)
      ]
    }
  }
  // 如果沒有找到匹配的元素，返回 `list` 陣列的副本。
  return [...list]
}
    • 方法流程說明：
      1. 檢查 list 是否存在。如果不存在，返回一個空陣列。
      2. 檢查 newItem 是否是未定義的。如果是，返回 list 的副本。
      3. 遍歷 list 陣列。對於每個元素，使用 match 函式檢查該元素是否是要被替換的元素。
      4. 如果 match 函式返回 true，則在該位置用 newItem 替換現有元素，並返回新構建的陣列。
      5. 如果遍歷結束後沒有任何元素匹配，返回 list 的副本。
      6. 注意：這個 replace 函式可以用於更新陣列中的元素，而不改變原始陣列，因為它總是返回一個新的陣列。

select ：對陣列同時進行過濾和對映，篩選和轉換陣列中的元素；

  1. 使用說明
    • 引數：物件陣列、對映條件函式、過濾條件函式。
    • 返回值：過濾完後的對映值組成的陣列。
  2. 使用程式碼示例
    import { select } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105,
    source: 'ocean'
  },
  {
    name: 'Bass',
    weight: 8,
    source: 'lake'
  },
  {
    name: 'Trout',
    weight: 13,
    source: 'lake'
  }
]

select(
  fish,
  f => f.weight,
  f => f.source === 'lake'
) // => [8, 13]
  3. 原始碼解析
    // 定義一個泛型函式 `select`。
export const select = <T, K>(
  // 第一個引數是一個具有隻讀屬性的泛型陣列 `array`。
  array: readonly T[],
  // 第二個引數是一個 `mapper` 函式，它接受一個陣列元素和它的索引，
  // 返回一個新型別 `K` 的值。
  mapper: (item: T, index: number) => K,
  // 第三個引數是一個 `condition` 函式，它也接受一個陣列元素和它的索引，
  // 返回一個布林值來指示元素是否滿足選擇條件。
  condition: (item: T, index: number) => boolean
) => {
  // 如果傳入的陣列 `array` 不存在，則返回一個空陣列。
  if (!array) return []
  // 使用陣列的 `reduce` 方法來構建一個新陣列，該陣列僅包含滿足 `condition` 的元素，
  // 並且這些元素已經透過 `mapper` 函式轉換。
  return array.reduce((acc, item, index) => {
    // 使用 `condition` 函式檢查當前元素 `item` 是否滿足條件。
    if (!condition(item, index)) return acc
    // 如果元素滿足條件，則使用 `mapper` 函式對其進行轉換，並將結果新增到累加器 `acc`。
    acc.push(mapper(item, index))
    // 返回更新後的累加器 `acc`。
    return acc
  }, [] as K[]) // 初始化累加器 `acc` 為一個空陣列。
}
    • 方法流程說明：
      1. 檢查 array 是否存在。如果不存在，返回一個空陣列。
      2. 使用 reduce 方法遍歷 array 陣列。reduce 方法的累加器 acc 是一個新陣列，用於儲存轉換後的元素。
      3. 對於陣列中的每個元素，使用 condition 函式檢查該元素是否滿足選擇條件。
      4. 如果 condition 函式返回 true，則使用 mapper 函式對該元素進行轉換，並將轉換後的結果新增到累加器 acc 中。
      5. 繼續處理陣列的下一個元素，直到所有元素都被處理完畢。
      6. 返回累加器 acc，它現在是一個包含所有已轉換且滿足條件的元素的新陣列。
      7. 這個 select 函式可以用於在不改變原始陣列的情況下，篩選和轉換陣列中的元素。

shift ：把目標陣列向右迴圈移動 n 個位置返回為一個新陣列；

  1. 使用說明
    • 引數：目標陣列、移動步數。
    • 返回值：移動後的新陣列。
  2. 使用程式碼示例
    import { shift } from 'radash'
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
shift(arr, 3) // => [7, 8, 9, 1, 2, 3, 4, 5, 6]
  3. 原始碼解析
    // 定義一個泛型函式 `select`。
export const select = <T, K>(
  // 第一個引數是一個具有隻讀屬性的泛型陣列 `array`。
  array: readonly T[],
  // 第二個引數是一個 `mapper` 函式，它接受一個陣列元素和它的索引，
  // 返回一個新型別 `K` 的值。
  mapper: (item: T, index: number) => K,
  // 第三個引數是一個 `condition` 函式，它也接受一個陣列元素和它的索引，
  // 返回一個布林值來指示元素是否滿足選擇條件。
  condition: (item: T, index: number) => boolean
) => {
  // 如果傳入的陣列 `array` 不存在，則返回一個空陣列。
  if (!array) return []
  // 使用陣列的 `reduce` 方法來構建一個新陣列，該陣列僅包含滿足 `condition` 的元素，
  // 並且這些元素已經透過 `mapper` 函式轉換。
  return array.reduce((acc, item, index) => {
    // 使用 `condition` 函式檢查當前元素 `item` 是否滿足條件。
    if (!condition(item, index)) return acc
    // 如果元素滿足條件，則使用 `mapper` 函式對其進行轉換，並將結果新增到累加器 `acc`。
    acc.push(mapper(item, index))
    // 返回更新後的累加器 `acc`。
    return acc
  }, [] as K[]) // 初始化累加器 `acc` 為一個空陣列。
}
    • 方法流程說明：
      1. 檢查 array 是否存在。如果不存在，返回一個空陣列。
      2. 使用 reduce 方法遍歷 array 陣列。reduce 方法的累加器 acc 是一個新陣列，用於儲存轉換後的元素。
      3. 對於陣列中的每個元素，使用 condition 函式檢查該元素是否滿足選擇條件。
      4. 如果 condition 函式返回 true，則使用 mapper 函式對該元素進行轉換，並將轉換後的結果新增到累加器 acc 中。
      5. 繼續處理陣列的下一個元素，直到所有元素都被處理完畢。
      6. 返回累加器 acc，它現在是一個包含所有已轉換且滿足條件的元素的新陣列。
      7. 這個 select 函式可以用於在不改變原始陣列的情況下，篩選和轉換陣列中的元素。

sift：過濾調列表中值為false的項，返回剩餘為true的項組成的陣列；

  1. 使用說明
    • 引數：陣列。
    • 返回值：過濾後的新陣列。
  2. 使用程式碼示例
    import { sift } from 'radash'

const fish = ['salmon', null, false, NaN, 'sockeye', 'bass']

sift(fish) // => ['salmon', 'sockeye', 'bass']
  3. 原始碼解析
    // 定義一個泛型函式 `sift`，它接收一個引數 `list`，這是一個包含泛型 `T` 或假值的只讀陣列。
export const sift = <T>(list: readonly (T | Falsy)[]): T[] => {
  // 使用 `filter` 方法遍歷陣列 `list`，移除所有假值。
  // `x => !!x` 是一個函式，它將每個元素強制轉換為布林值，然後再次強制轉換回來，
  // 以確保只有真值（Truthy values）被保留。
  // `as T[]` 是一個型別斷言，它告訴 TypeScript 編譯器過濾後的陣列只包含型別 `T` 的元素。
  return (list?.filter(x => !!x) as T[]) ?? []
}
    • 方法流程說明：
      1. 檢查 list 是否存在。如果不存在，返回一個空陣列 []。
      2. 使用 filter 方法遍歷陣列 list，對於每個元素 x，使用 !!x 將它轉換為一個布林值。這樣做的結果是，如果 x 是一個假值（如 false、0、""、null、undefined 或 NaN），它將被轉換為 false，如果 x 是一個真值，它將被轉換為 true。
      3. filter 方法根據這個布林值決定是否保留元素。只有那些轉換為 true 的元素會被保留在新陣列中。
      4. 使用型別斷言 as T[] 告訴 TypeScript 編譯器，經過過濾後的陣列將只包含型別 T 的元素。
      5. 如果 list 是 null 或 undefined，list?.filter(x => !!x) 將產生 undefined。這時，透過使用空值合併運算子 ??，函式將返回一個空陣列 []。
      6. 最終返回過濾後的陣列，其中僅包含真值元素。

sort ：把陣列按照條件函式指定的項的數值大小排序，支援升序和降序；

  1. 使用說明
    • 引數：物件陣列、指定識別符號的條件函式、是否降序（Boolean值，不傳為false）。
    • 返回值：排序後的陣列。
  2. 使用程式碼示例
    import { sort } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105
  },
  {
    name: 'Bass',
    weight: 8
  },
  {
    name: 'Trout',
    weight: 13
  }
]

sort(fish, f => f.weight) // => [bass, trout, marlin]
sort(fish, f => f.weight, true) // => [marlin, trout, bass]
  3. 原始碼解析
    // 定義一個泛型函式 `sort`。
export const sort = <T>(
  // 第一個引數 `array` 是一個具有隻讀屬性的泛型陣列。
  array: readonly T[],
  // 第二個引數 `getter` 是一個函式，它從每個陣列元素中提取一個數字，用於比較大小。
  getter: (item: T) => number,
  // 第三個引數 `desc` 是一個布林值，指定排序方向。預設為 `false`，表示升序排序。
  desc = false
) => {
  // 如果傳入的陣列 `array` 不存在，則返回一個空陣列。
  if (!array) return []
  // 定義一個升序比較函式 `asc`，它使用 `getter` 函式的返回值進行比較。
  const asc = (a: T, b: T) => getter(a) - getter(b)
  // 定義一個降序比較函式 `dsc`，它也使用 `getter` 函式的返回值進行比較，但順序相反。
  const dsc = (a: T, b: T) => getter(b) - getter(a)
  // 使用陣列的 `slice` 方法建立陣列的一個副本，然後使用 `sort` 方法對這個副本進行排序。
  // 根據 `desc` 引數的值選擇使用 `dsc` 或 `asc` 比較函式。
  return array.slice().sort(desc === true ? dsc : asc)
}
    • 方法流程說明：
      1. 檢查 array 是否存在。如果不存在，返回一個空陣列。
      2. 定義兩個比較函式，asc 用於升序排序，dsc 用於降序排序。這兩個函式都使用 getter 函式從元素中提取比較值。
      3. 使用 slice 方法建立陣列的一個淺副本，以避免修改原始陣列。
      4. 使用 sort 方法對陣列副本進行排序。sort 方法接受一個比較函式，該函式根據 desc 引數的值決定使用 asc 還是 dsc。
      5. 返回排序後的陣列副本。

sum：陣列物件根據條件函式指定想的陣列求和；

  1. 使用說明

    • 引數：物件陣列、指定識別符號的條件函式。
    • 返回值：符合條件的項的和。

  2. 使用程式碼示例

    import { sum } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 100
  },
  {
    name: 'Bass',
    weight: 10
  },
  {
    name: 'Trout',
    weight: 15
  }
]

sum(fish, f => f.weight) // => 125

  3. 原始碼解析

    // 這是 `sum` 函式的第一種宣告，用於處理陣列直接包含數字的情況。
export function sum<T extends number>(array: readonly T[]): number

// 這是 `sum` 函式的第二種宣告，用於處理陣列包含物件的情況。
// 需要一個額外的函式 `fn` 來從每個物件中提取數值。
export function sum<T extends object>(
  array: readonly T[],
  fn: (item: T) => number
): number

// 這是 `sum` 函式的實現，它可以處理上述兩種情況。
export function sum<T extends object | number>(
  array: readonly any[],
  fn?: (item: T) => number
): number {
  // 使用陣列的 `reduce` 方法來累積所有元素的總和。
  // 如果陣列不存在，使用空陣列 `[]` 作為預設值。
  // `reduce` 的回撥函式將累加器 `acc` 和當前元素 `item` 相加。
  // 如果提供了函式 `fn`，則使用 `fn(item)` 獲取數值；如果沒有提供 `fn`，則直接使用 `item`。
  return (array || []).reduce((acc, item) => acc + (fn ? fn(item) : item), 0)
}
    • 方法流程說明：
      1. 檢查 array 是否存在。如果不存在，使用空陣列 [] 作為預設值。
      2. 使用 reduce 方法遍歷陣列。reduce 方法的累加器 acc 初始化為0。
      3. 對於陣列中的每個元素 item，如果提供了函式 fn，則呼叫 fn(item) 來獲取元素的數值；如果沒有提供 fn，則直接使用 item 作為數值。
      4. 將每個元素的數值累加到 acc 上。
      5. 返回累加器 acc 的最終值，即陣列中所有元素的總和。

toggle：查詢陣列中是否有我們給定的項，有則刪除，沒有則新增；

  1. 使用說明
    • 引數：目標陣列、條件值（可以是條件函式）、在前面新增還是在後邊新增。
    • 返回值：處理後的新陣列。
  2. 使用程式碼示例
    import { toggle } from 'radash'

// 基本用法
const gods = ['ra', 'zeus', 'loki']

toggle(gods, 'ra')     // => [zeus, loki]
toggle(gods, 'vishnu') // => [ra, zeus, loki, vishnu]


// 切換（陣列、條件項、指定識別符號的條件函式）
import { toggle } from 'radash'

const ra = { name: 'Ra' }
const zeus = { name: 'Zeus' }
const loki = { name: 'Loki' }
const vishnu = { name: 'Vishnu' }

const gods = [ra, zeus, loki]

toggle(gods, ra, g => g.name)     // => [zeus, loki]
toggle(gods, vishnu, g => g.name) // => [ra, zeus, loki, vishnu]


// 切換（陣列、條件項、條件函式，覆蓋項）
import { toggle } from 'radash'

const gods = ['ra', 'zeus', 'loki']

toggle(gods, 'vishnu', g => g, { strategy: 'prepend' }) // => [vishnu, ra, zeus, loki]
  3. 原始碼解析
    // 定義一個泛型函式 `toggle`。
export const toggle = <T>(
  // 第一個引數 `list` 是一個具有隻讀屬性的泛型陣列。
  list: readonly T[],
  // 第二個引數 `item` 是一個型別為 `T` 的元素，它將被切換（新增或移除）。
  item: T,
  // 第三個可選引數 `toKey` 是一個函式，用於將元素轉換為可比較的鍵。
  toKey?: null | ((item: T, idx: number) => number | string | symbol),
  // 第四個可選引數 `options` 是一個物件，允許指定新增元素的策略（追加或前置）。
  options?: {
    strategy?: 'prepend' | 'append'
  }
) => {
  // 如果 `list` 和 `item` 都不存在或為空，則返回一個空陣列。
  if (!list && !item) return []
  // 如果 `list` 不存在或為空，返回一個只包含 `item` 的陣列。
  if (!list) return [item]
  // 如果 `item` 不存在或為空，返回 `list` 陣列的副本。
  if (!item) return [...list]
  // 定義一個 `matcher` 函式，用於檢查元素是否與 `item` 匹配。
  // 如果提供了 `toKey` 函式，則使用它來獲取比較的鍵；如果沒有，則直接比較元素。
  const matcher = toKey
    ? (x: T, idx: number) => toKey(x, idx) === toKey(item, idx)
    : (x: T) => x === item
  // 使用 `find` 方法檢查 `list` 中是否存在與 `item` 匹配的元素。
  const existing = list.find(matcher)
  // 如果存在匹配的元素，使用 `filter` 方法移除它。
  if (existing) return list.filter((x, idx) => !matcher(x, idx))
  // 根據 `options` 中的 `strategy` 決定是追加還是前置新元素。
  const strategy = options?.strategy ?? 'append'
  // 如果策略是 'append'，將 `item` 追加到 `list` 的末尾。
  if (strategy === 'append') return [...list, item]
  // 否則，將 `item` 前置到 `list` 的開頭。
  return [item, ...list]
}
    • 方法流程說明：
      1. 進行一系列的檢查，如果 list 和 item 都不存在或為空，或者只有 list 不存在或為空，或者只有 item 不存在或為空，則返回相應的結果。
      2. 定義 matcher 函式，用於檢查元素是否與 item 匹配。如果存在 toKey 函式，則使用它來比較轉換後的鍵。
      3. 檢查 list 中是否存在與 item 匹配的元素。
      4. 如果存在匹配的元素，使用 filter 方法建立一個新陣列，其中不包含匹配的元素。
      5. 如果不存在匹配的元素，根據 options 中的 strategy 決定是將 item 追加到陣列末尾還是新增到陣列開頭，並返回新陣列。

unique：陣列去重，去除陣列中重複的項；

  1. 使用說明

    • 引數：目標陣列、指定唯一識別符號的條件函式。
    • 返回值：去重後的陣列。

  2. 使用程式碼示例

    import { unique } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105,
    source: 'ocean'
  },
  {
    name: 'Salmon',
    weight: 22,
    source: 'river'
  },
  {
    name: 'Salmon',
    weight: 22,
    source: 'river'
  }
]

unique( fish, f => f.name )
// [
//     { name: 'Marlin', weight: 105, source: 'ocean' },
//     { name: 'Salmon', weight: 22, source: 'river' }
// ]
``

  3. 原始碼解析

    // 定義一個泛型函式 `unique`。
export const unique = <T, K extends string | number | symbol>(
  // 第一個引數 `array` 是一個具有隻讀屬性的泛型陣列。
  array: readonly T[],
  // 第二個可選引數 `toKey` 是一個函式，用於將陣列元素轉換為可比較的鍵。
  toKey?: (item: T) => K
): T[] => {
  // 使用陣列的 `reduce` 方法來構建一個記錄物件 `valueMap`，該物件的鍵是元素的鍵，值是元素本身。
  const valueMap = array.reduce((acc, item) => {
    // 使用 `toKey` 函式獲取元素的鍵。如果 `toKey` 未提供，直接將元素作為鍵。
    const key = toKey ? toKey(item) : (item as any as string | number | symbol)
    // 如果 `key` 已存在於 `acc` 中，表示該元素已經出現過，跳過它。
    if (acc[key]) return acc
    // 如果 `key` 不存在，將元素新增到 `acc` 中。
    acc[key] = item
    // 返回更新後的累加器 `acc`。
    return acc
  }, {} as Record<string | number | symbol, T>)
  // 使用 `Object.values` 方法從 `valueMap` 中提取所有的值，這些值是唯一的元素。
  return Object.values(valueMap)
}
    • 方法流程說明：
      1. 使用 reduce 方法遍歷 array 陣列，構建一個記錄物件 valueMap。
      2. 對於陣列中的每個元素 item，如果提供了 toKey 函式，則呼叫它來獲取元素的鍵；如果沒有提供 toKey 函式，則直接使用元素本身作為鍵。
      3. 檢查鍵是否已經存在於 valueMap 中。如果存在，這意味著元素已經在之前出現過，因此跳過它。
      4. 如果鍵不存在，將元素新增到 valueMap 中，使用鍵作為索引。
      5. 繼續處理陣列的下一個元素，直到所有元素都被處理完畢。
      6. 使用 Object.values 方法提取 valueMap 中的所有值，因為 valueMap 中的鍵是唯一的，所以這些值也是唯一的。
      7. 返回包含所有唯一元素的新陣列。

zipToObject：將第一個陣列中的鍵對映到第二個陣列中對應的值；

  1. 使用說明
    • 引數：陣列1、陣列2（或者是傳入一個函式）。
    • 返回值：對映後的物件。
  2. 使用程式碼示例
    import { zipToObject } from 'radash'

const names = ['ra', 'zeus', 'loki']
const cultures = ['egypt', 'greek', 'norse']

zipToObject(names, cultures)
// => { ra: egypt, zeus: greek, loki: norse }

zipToObject(names, (k, i) => k + i)
// => { ra: ra0, zeus: zeus1, loki: loki2 }

zipToObject(names, null)
// => { ra: null, zeus: null, loki: null }
  3. 原始碼解析
    // 定義一個泛型函式 `zipToObject`。
export function zipToObject<K extends string | number | symbol, V>(
  // 第一個引數 `keys` 是一個陣列，包含型別為 `K` 的鍵。
  keys: K[],
  // 第二個引數 `values` 可以是一個單一的值，一個返回值的函式，或者一個值的陣列。
  values: V | ((key: K, idx: number) => V) | V[]
): Record<K, V> {
  // 如果 `keys` 不存在或 `keys` 的長度為0，返回一個空物件。
  if (!keys || !keys.length) {
    return {} as Record<K, V>
  }
  // ...（函式的其餘部分）
}
    • 方法流程說明：

      1. 首先檢查 keys 陣列是否存在且長度不為零。如果 keys 不存在或為空陣列，則函式返回一個空物件。

      2. 如果 keys 存在且不為空，函式將繼續執行（這部分程式碼在這段程式碼之外）。

      3. 相關說明：

        • 這個函式預期的行為是，對於 keys 陣列中的每個鍵，它會從 values 中取出相應的值（或者使用提供的函式計算出的值），並建立一個物件，其中每個鍵都對映到一個值。
        • 由於程式碼片段沒有提供函式的完整實現，我們不能確定函式如何處理 values 引數。如果 values 是一個陣列，它可能會將 keys 陣列中的每個鍵與 values 陣列中的相應值關聯起來。如果 values 是一個函式，它可能會對每個鍵呼叫這個函式來生成值。如果 values 是單一的值，它可能會將這個值分配給 keys 陣列中的每個鍵。
        • 這個函式的返回型別是 Record<K, V>，這是 TypeScript 中的一個工具型別，表示一個物件，其中鍵的型別為 K，值的型別為 V。在這個上下文中，K 被限制為 string、number 或 symbol 型別，這是物件鍵的有效型別。

zip：把兩個陣列變為二維陣列，二維陣列中的每個陣列包含兩個項分別為兩個傳入陣列的相同位置的項。

  1. 使用說明
    • 引數：陣列1、陣列2.
    • 返回值：對映後的二維陣列。
  2. 使用程式碼示例
    import { zip } from 'radash'

const names = ['ra', 'zeus', 'loki']
const cultures = ['egypt', 'greek', 'norse']

zip(names, cultures)
// => [
//   [ra, egypt]
//   [zeus, greek]
//   [loki, norse]
// ]
  3. 原始碼解析
    // 這是 `zip` 函式的實現部分，它使用剩餘引數 `...arrays` 來接收任意數量的陣列。
export function zip<T>(...arrays: T[][]): T[][] {
  // 檢查傳入的 `arrays` 是否存在且長度不為零，如果不是，則返回一個空陣列。
  if (!arrays || !arrays.length) return []
  // 使用 `Math.max` 和 `map` 方法找出傳入陣列中長度最大的值。
  return new Array(Math.max(...arrays.map(({ length }) => length)))
    // 使用 `fill` 方法填充一個新陣列，初始填充值為 `[]`（空陣列）。
    .fill([])
    // 使用 `map` 方法遍歷新陣列的每個位置 `idx`。
    .map((_, idx) => arrays.map(array => array[idx]))
    // 對於每個位置 `idx`，從 `arrays` 中的每個陣列 `array` 獲取 `idx` 位置的元素。
    // 這樣就組合成了一個元組，包含來自每個陣列的元素。
}
    • 方法流程說明：
      1. 檢查是否有陣列傳入，如果沒有，則返回空陣列。
      2. 建立一個新陣列，長度是傳入陣列中最長的那個陣列的長度。
      3. 遍歷新陣列的每個索引位置 idx。
      4. 對於每個位置 idx，遍歷傳入的所有陣列，並從每個陣列中取出該索引位置的元素。
      5. 將所有取出的元素組成一個元組，並將這個元組放入新陣列的相應位置。
      6. 返回這個新陣列，它包含了所有組合的元組。

寫在後面

  • 等所有方法更新完畢，作者會整理一份radash完整方法目錄上傳，包括思維導圖和使用目錄。
  • 下期我們會整理分享Array方法的使用說明目錄，同樣包括思維導圖。
  • 大家有任何問題或見解，歡迎評論區留言交流和批評指正！！！
  • 你的每一個收藏都是作者寫作的動力！！！
  • 點選訪問：radash官網

相關文章