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
  • 如何基於surging跨網關跨語言進行緩存降級
    基於.NET Framework 4.8 開發的深度學習模型部署測試平臺，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景，同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱，重啟開發之路
    十年沉澱，重啟開發之路 十年前，我沉浸在開發的海洋中，每日與代碼為伍，與演算法共舞。那時的我，滿懷激情，對技術的追求近乎狂熱。然而，隨著歲月的流逝，生活的忙碌逐漸占據了我的大部分時間，讓我無暇顧及技術的沉澱與積累。 十年間，我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者，我見證了 ...
  • C#.NET體系圖文概述—2024最全總結
    C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺，平臺包含了語言規範、工具、運行，支持開發各種應用，如Web、移動、桌面等。.NET框架有多個實現，如.NET Framework、.NET Core（及後續的.NET 5+版本），以及社區版本M... ...
  • 班級擂臺（光榮）榜 - 極簡教育小工具
    前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫，記錄了使用電腦模擬，模擬PLC，直至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1. PLC開發編程環境GX Works2，GX Works2下載鏈接 https:// ...
  • web server apache tomcat11-31-websocket
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • day31-jQuery
    1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝 ...
  • aardio爬蟲) 實戰篇：逆向有道翻譯web介面
    前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了，這篇文章整點js代碼來測一下bug。測試網站：https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向（MD5加密，AES加密）附完整源碼 ...
  • 面試官：這就是你理解的Java多線程基礎？
    引言 現代的操作系統（Windows，Linux，Mac OS）等都可以同時打開多個軟體（任務），這些軟體在我們的感知上是同時運行的，例如我們可以一邊瀏覽網頁，一邊聽音樂。而CPU執行代碼同一時間只能執行一條，但即使我們的電腦是單核CPU也可以同時運行多個任務，如下圖所示，這是因為我們的 CPU 的 ...
  • Python文本統計與分析從基礎到進階
    掌握使用Python進行文本英文統計的基本方法，並瞭解如何進一步優化和擴展這些方法，以應對更複雜的文本分析任務。 ...
  • Redis多數據源，看這篇就夠了
    背景 Redis多數據源常見的場景： 分區數據處理：當數據量增長時，單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源，可以將數據分區存儲在不同的實例中，使得數據處理更加高效。 多租戶應用程式：對於多租戶應用程式，每個租戶可以擁有自己的Redis數據源，以確保數據隔離和安全性。 ...
所有分類