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

来源:https://www.cnblogs.com/muqiqiang/p/18156117
-Advertisement-
Play Games

寫在前面 tips：點贊 + 收藏 = 學會！ 我們已經介紹了radash的相關信息和部分Array相關方法，詳情可前往主頁查看。 本篇我們繼續介紹radash中Array的相關方法的剩餘方法。 本期文章發佈後，作者也會同步整理出Array方法的使用目錄，包括文章說明和腦圖說明。 因為方法較多，後續 ...


寫在前面

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官網

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 告別手動調度，海豚調度器 3.1.x 集群部署讓你輕鬆管理多機！
    轉載自第一片心意 1 前言 由於海豚調度器官網的集群部署文檔寫的較亂，安裝過程中需要跳轉到很多地方進行操作，所以自己總結了一篇可以直接跟著從頭到尾進行操作的文檔，以方便後續的部署、升級、新增節點、減少節點的相關操作。 2. 提前準備 2.1. 基礎組件 JDK：下載JDK (1.8+)，安裝並配置 ...
  • cls_oracle_logs.sh腳本遭遇TNS-12508錯誤淺析
    cls_oracle_logs.sh腳本的輸出日誌中有TNS-12508錯誤，具體如下所示 ........................................................................LSNRCTL> Current Listener is gsp ...
  • Oracle資料庫出現WARNING: too many parse errors告警的分析思路
    Oracle資料庫的告警日誌中出WARNING: too many parse errors這些告警信息的話，如果遇到這個問題，我們應該如何分析呢？ 下麵簡單聊一下如何分析這個錯誤。該告警信息其實是12.2版本中的一個特性增強。在以前的Oracle版本中，資料庫出現瞭解析錯誤時，資料庫的alert日 ...
  • 重磅新品發佈！雲耀資料庫HRDS，享受輕量級的極致體驗
    本文分享自華為雲社區《重磅新品發佈！雲耀資料庫HRDS，享受輕量級的極致體驗！》，作者：GaussDB 資料庫。 所謂，凡有井水處，即能歌柳詞。 大數據時代，凡有數據處，必有資料庫。 隨著業務需求的不斷擴大和數據量的激增，資料庫的使用場景滲透到了生活的方方面面，不再是大型企業或技術部門的專利，市場對 ...
  • 玩轉雲端 | 擁有HBlock這項“存儲盤活絕技”，數據中心也能“熱辣瘦身”！
    夏天馬上就要到了，“瘦身”不光是特定人群的需求，也是數據中心的需求。構建輕量化、低碳化、高性價比的新型數據中心，更有效地支撐經濟社會數字化轉型，已成為業界主流趨勢。 如何讓數據中心“熱辣瘦身”？輕量級存儲集群控制器——天翼雲存儲資源盤活系統HBlock必不可少！ “HBlock健身房”究竟是如何發揮 ...
  • 鴻蒙HarmonyOS實戰-ArkUI動畫（頁面轉場動畫）
    前言 頁面轉場動畫是指在應用程式中，當用戶導航到另一個頁面時，使用動畫效果來過渡頁面之間的切換。這樣做的目的是為了提升用戶體驗，使頁面之間的切換更加平滑和有趣。 常見的頁面轉場動畫包括淡入淡出、滑動、翻轉、縮放等效果。通過使用這些動畫效果，可以給用戶一種流暢的感覺，讓頁面之間的切換更加自然。 在 ...
  • 鴻蒙HarmonyOS實戰-ArkUI動畫（放大縮小視圖）
    前言 在HarmonyOS中，可以通過以下方法放大縮小視圖： 使用縮放手勢：可以使用雙指捏合手勢來放大縮小視圖。將兩個手指放在屏幕上，並向內或向外移動手指，即可進行放大或縮小操作。 使用系統提供的縮放控制項：在HarmonyOS的開發中，可以使用系統提供的縮放控制項來實現視圖的放大縮小功能。通過在布 ...
  • 使用 MediaCodec 在 Android 上進行硬解碼
    要使用 MediaCodec 在 Android 上進行硬解碼，並獲取 RGBA 數據，你可以按照以下步驟進行操作： 創建 MediaExtractor 對象並設置要解碼的 MP4 文件路徑： MediaExtractor extractor = new MediaExtractor(); extr ...
一周排行
    -Advertisement-
    Play Games
  • WPF中輕鬆生成動態圖表：實例詳解(MVVM模式)
    概述：本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項，你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋，幫助你快速理解並應用這一功能。 先上效果： 在 ...
  • .NET 中使用 GaussDB C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • .NET中使用 openGauss C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 輕鬆使用Aspire rabbitmq framework
    概述：本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定，以及使用語言管理器類，應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活，便於維護，同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • .net事件
    描述（做一個簡單的記錄）： 事件（event）的本質是一個委托；（聲明一個事件： public event TestDelegate eventTest;） 委托（delegate）可以理解為一個符合某種簽名的方法類型；比如：TestDelegate委托的返回數據類型為string，參數為 int和 ...
  • .NET CORE 完美支持AOT 的 ORM SqlSugar 教程
    1、AOT適合場景 Aot適合工具類型的項目使用，優點禁止反編 ，第一次啟動快，業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 【UWP】修改清單脫離沙盒運行
    總說周知，UWP 是運行在沙盒裡面的，所有許可權都有嚴格限制，和沙盒外交互也需要特殊的通道，所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型，本身是沒有什麼許可權管理的，許可權管理全靠 App Container 沙盒控制，如果我們脫離了這個沙盒，UWP 就會放飛自我了。那麼有沒... ...
  • 《Effective C++》第三版-4. 設計與聲明（Design and Declarations）
    目錄條款17：讓介面容易被正確使用，不易被誤用（Make interfaces easy to use correctly and hard to use incorrectly）限制類型和值規定能做和不能做的事提供行為一致的介面條款19：設計class猶如設計type（Treat class de ...
  • 從零開始：Django項目的創建與配置指南
    title: 從零開始：Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • mORMot 1.18 第18章 使用REST/JSON的客戶端/伺服器
    1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...
所有分類