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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類