【源码学习】Radash（三）Array 上

1
import { isArray, isFunction } from './typed'

1
import { alphabetical } from 'radash'
2

3
const gods = [
4
  { name: 'Ra', power: 100 },
5
  { name: 'Zeus', power: 98 },
6
  { name: 'Loki', power: 72 },
7
  { name: 'Vishnu', power: 100 },
8
]
9

10
alphabetical(gods, (g) => g.name)
11
// => [Loki, Ra, Vishnu, Zeus]
12

13
alphabetical(gods, (g) => g.name, 'desc')
14
// => [Zeus, Vishnu, Ra, Loki]

1
// 该函数接受一个readonly T[]类型的array
2
// 和一个(item: T) => string类型的getter函数，
3
// 以及一个默认值为'asc'的dir参数
4
export const alphabetical = <T>(
5
  array: readonly T[],
6
  getter: (item: T) => string,
7
  dir: 'asc' | 'desc' = 'asc'
8
) => {
9
  // 检查array是否为空，如果为空，则返回一个空数组
10
  if (!array) return []
11
  // 定义两个比较函数asc和dsc，分别用于实现升序和降序的排序
12
  const asc = (a: T, b: T) => `${getter(a)}`.localeCompare(getter(b))
13
  const dsc = (a: T, b: T) => `${getter(b)}`.localeCompare(getter(a))
14
  return
15
  // 使用array.slice()方法创建一个新数组newArray，该数组浅拷贝原始数组array
16
  array
17
    .slice()
18
    // 使用sort方法对newArray进行排序
19
    // 排序的比较函数为dir === 'desc' ? dsc : asc，
20
    // 即如果dir为'desc'，则使用dsc比较函数，否则使用asc比较函数
21
    // 最后返回排序后的newArray
22
    .sort(dir === 'desc' ? dsc : asc)
23
}

1
import { boil } from 'radash'
2

3
const gods = [
4
  { name: 'Ra', power: 100 },
5
  { name: 'Zeus', power: 98 },
6
  { name: 'Loki', power: 72 },
7
]
8

9
boil(gods, (a, b) => (a.power > b.power ? a : b))
10
// => { name: 'Ra', power: 100 }

1
export const boil = <T>(
2
  // 同上，就不赘述了。数组不可更改
3
  array: readonly T[],
4
  // compareFunc 是一个比较函数。这里作为参数，并返回一个T类型的值
5
  compareFunc: (a: T, b: T) => T
6
) => {
7
  // 首先检查array是否为空；如果为空，则返回null
8
  if (!array || (array.length ?? 0) === 0) return null
9
  // 使用reduce方法结合compareFunc函数来计算数组中的所有元素的和
10
  return array.reduce(compareFunc)
11
  // 这里你可能会好奇, 默认值是什么呢?
12
  // reduce方法会从左到右遍历数组，每次将当前元素 a 与上一个元素 b 传入compareFunc函数，
13
  // 并将结果与下一个元素继续传入compareFunc函数，直到遍历完整个数组。
14
  // 我们看示例。 比较函数 (a, b) => a.power > b.power
15
  // 表示如果a的power大于b的power，则返回a，否则返回b。
16
  // 100 > 98， 所以 { name: 'Ra', power: 100 } 保留了，然后
17
  // { name: 'Ra', power: 100 } 保留， 继续与 { name: 'Loki', power: 72 } 作比较
18
  // { name: 'Ra', power: 100 } 仍保留，遍历结束，作为最终的返回值
19
}

1
import { cluster } from 'radash'
2

3
const gods = [
4
  'Ra',
5
  'Zeus',
6
  'Loki',
7
  'Vishnu',
8
  'Icarus',
9
  'Osiris',
10
  'Thor',
11
  'Apollo',
12
  'Artemis',
13
  'Athena',
14
]
15

16
cluster(gods, 3)
17
// => [
18
//   [ 'Ra', 'Zeus', 'Loki' ],
19
//   [ 'Vishnu', 'Icarus', 'Osiris' ],
20
//   ['Thor', 'Apollo', 'Artemis'],
21
//   ['Athena']
22
// ]

1
// 将一个数组list按照指定的size大小进行分组，返回一个由分组结果组成的二维数组
2
export const cluster = <T>(list: readonly T[], size: number = 2): T[][] => {
3
  // 计算分组后的集群数量 clusterCount
4
  const clusterCount = Math.ceil(list.length / size)
5
  // 使用Array.fill()方法创建一个包含clusterCount个null（用于占位）的数组clusters
6
  return (
7
    new Array(clusterCount)
8
      .fill(null)
9
      // 遍历clusters数组，为每个集群分配一组数据
10
      .map((_c: null, i: number) => {
11
        // 使用slice()方法从list中切出当前集群的数据，
12
        // 切片的起始位置为i * size，结束位置为i * size + size
13
        return list.slice(i * size, i * size + size)
14
        // 将切出的数据添加到当前集群的位置，
15
        // _c 就是一个集群，所包含的就是本次slice() 方法切出的数据（理解为前端分页就成）
16
      })
17
  )
18
}

1
import { counting } from 'radash'
2

3
const gods = [
4
  { name: 'Ra', culture: 'egypt' },
5
  { name: 'Zeus', culture: 'greek' },
6
  { name: 'Loki', culture: 'greek' },
7
]
8

9
counting(gods, (g) => g.culture) // => { egypt: 1, greek: 2 }

1
export const counting = <T, TId extends string | number | symbol>(
2
  list: readonly T[],
3
  // identity是一个类型参数，它可以是字符串、数字或符号
4
  identity: (item: T) => TId
5
): Record<TId, number> => {
6
  // 我们检查list是否为空，如果为空，则返回一个空的记录，其中键是TId类型，值是number类型
7
  if (!list) return {} as Record<TId, number>
8

9
  return list.reduce((acc, item) => {
10
    // 使用identity函数将item转换为TId类型
11
    // 鼠标移动到 id -> TId extends string | number | symbol
12
    const id = identity(item)
13
    // 检查acc中是否已经存在id，如果存在，则将id对应的值加1，否则将id设置为1
14
    acc[id] = (acc[id] ?? 0) + 1
15
    // 继续看示例，一开始也就是 {}，没有 egypt 所以
16
    // acc[egypt] = 0，那么第一次遍历 acc[egypt] = 0 + 1
17
    // 这里就不展开了，打个断点调试就会很清楚了
18
    // 最终得到 => { egypt: 1, greek: 2 }
19
    return acc
20
  }, {} as Record<TId, number>)
21
  // 默认值为 {}
22
}

1
import { diff } from 'radash'
2

3
const oldWorldGods = ['ra', 'zeus']
4
const newWorldGods = ['vishnu', 'zeus']
5

6
diff(oldWorldGods, newWorldGods) // => ['ra']

1
export const diff = <T>(
2
  root: readonly T[],
3
  other: readonly T[],
4
  // 见下面的identity拆解. 理清楚了再回过头来看就简单多了
5
  identity: (item: T) => string | number | symbol = (t: T) =>
6
    t as unknown as string | number | symbol
7
): T[] => {
8
  // 边界判断，如果两个数组都为空，则返回空数组
9
  if (!root?.length && !other?.length) return []
10
  // 如果root为空，则返回other
11
  if (root?.length === undefined) return [...other]
12
  // 如果other为空，则返回root
13
  if (!other?.length) return [...root]
14

15
  // 构建一个bKeys对象：用 identity 值作为键的布尔值对象
16
  const bKeys = other.reduce((acc, item) => {
17
    // identity('vishnu') -> 'vishnu'
18
    // 打断点代入一下：
19
    // bKeys = { vishnu: true, zeus: true }
20
    acc[identity(item)] = true
21
    return acc
22
  }, {} as Record<string | number | symbol, boolean>)
23

24
  // 使用 filter 方法遍历 root 集合，对于每个元素 a，
25
  // 如果 bKeys 中不存在 identity(a) 作为键，则将 a 添加到新集合中
26
  // 接着上面的代码继续代入：
27
  // !bKeys['ra'] -> true
28
  // !bKeys['zeus'] -> false
29
  // 所以最终返回的结果是 ['ra']
30
  return root.filter((a) => !bKeys[identity(a)])
31
}

1
// diff函数接受一个类型为 T
2
// 疑问：这里 是 T，返回的是 T[] 啊？不一样啊？
3
// 我们看示例，传的 其实是 params: { o: string[], n: string[] }，
4
// 最终返回的是 string[]，所以确实是 T[] 没毛病
5

6
// 该函数实现基于 TypeScript 的内置类型转换，
7
// 它会将传入的值转换为 string、number 或 symbol 类型之一
8
const diff = <T>(identity: (item: T) =>
9
  (
10
    string |
11
    number |
12
    symbol
13
  ) = (t: T) => (t as unknown) as (string | number | symbol)
14
  // 这里将变量 t 转换为未知类型（unknown）
15
  // 然后强制将其转换为 string、number 或 symbol 之一
16
  // 这样可以确保函数返回的类型是预期的类型之一
17
): T[] {}

1
import { flat } from 'radash'
2

3
const gods = [['ra', 'loki'], ['zeus']]
4
flat(gods) // => [ra, loki, zeus]

1
export const flat = <T>(lists: readonly T[][]): T[] => {
2
  return lists.reduce((acc, list) => {
3
    // 在reduce函数的回调函数中，将当前层的元素推入acc数组，然后返回acc数组
4
    acc.push(...list)
5
    // 遍历lists数组完成后，acc数组中包含了所有层的元素，即为展平后的数组
6
    return acc
7
  }, [])
8
  // 初始化acc数组为空数组
9
}

1
import { fork } from 'radash'
2

3
const gods = [
4
  { name: 'Ra', power: 100 },
5
  { name: 'Zeus', power: 98 },
6
  { name: 'Loki', power: 72 },
7
  { name: 'Vishnu', power: 100 },
8
]
9

10
const [finalGods, lesserGods] = fork(gods, (f) => f.power > 90)
11
// [[ra, vishnu, zues], [loki]]

1
export const fork = <T>(
2
  // 由于使用了readonly T[]类型，这意味着list在函数外部无法修改
3
  list: readonly T[],
4
  condition: (item: T) => boolean
5
): [T[], T[]] => {
6
  // 非空判断，确定返回类型
7
  if (!list) return [[], []]
8
  return list.reduce(
9
    (acc, item) => {
10
      // acc 默认值为 [[], []]
11
      // 这里解构相当于 a = [], b = []
12
      const [a, b] = acc
13
      // 将list中的每个元素依次应用condition函数
14
      // 根据结果将元素添加到不同的数组中
15
      if (condition(item)) {
16
        return [[...a, item], b]
17
      } else {
18
        return [a, [...b, item]]
19
      }
20
    },
21
    // 这里使用了隐式的类型转换as [T[], T[]]
22
    // 这本身是一个安全的类型转换
23
    // 为了提高代码的可读性，可以显式地声明返回类型的类型
24
    [[], []] as [T[], T[]]
25
  )
26
}

1
import { group } from 'radash'
2

3
const fish = [
4
  { name: 'Marlin', source: 'ocean' },
5
  { name: 'Bass', source: 'lake' },
6
  { name: 'Trout', source: 'lake' },
7
]
8

9
const fishBySource = group(fish, (f) => f.source)
10
// => { ocean: [marlin], lake: [bass, trout] }

1
// 泛型解析：T 占位，Key 为三个基本类型之一
2
export const group = <T, Key extends string | number | symbol>(
3
  // 参数解析：
4
  // array: 一个只读的 T类型组成的数组（只读 是为了防止在运行时修改数组）
5
  array: readonly T[],
6
  // getGroupId: 是个函数，该函数接受一个T类型的参数，并返回一个Key类型的值
7
  getGroupId: (item: T) => Key
8
  // 返回一个对象，该对象的键是 Key 类型，值是 T 类型的数组，Partial将对象键都变为可选
9
): Partial<Record<Key, T[]>> => {
10
  return array.reduce((acc, item) => {
11
    // 通过reduce方法遍历数组，对于每个元素，调用getGroupId函数获取其分组ID
12
    const groupId = getGroupId(item)
13
    // 然后根据分组ID在 accumulator 中创建或更新一个数组，
14
    if (!acc[groupId]) acc[groupId] = []
15
    // 并将当前元素添加到该数组中，最后返回accumulator。
16
    acc[groupId].push(item)
17
    return acc
18
  }, {} as Record<Key, T[]>)
19
  // 使用 {} as Record<Key, T[]> 来初始化 accumulator
20
  // 这是 reduce的第二个参数，代表初始值 ，用来存储每次迭代的结果
21
}

1
import { intersects } from 'radash'
2

3
const oceanFish = ['tuna', 'tarpon']
4
const lakeFish = ['bass', 'trout']
5

6
intersects(oceanFish, lakeFish) // => false
7

8
const brackishFish = ['tarpon', 'snook']
9

10
intersects(oceanFish, brackishFish) // => true

1
export const intersects = <T, K extends string | number | symbol>(
2
  listA: readonly T[],
3
  listB: readonly T[],
4
  // K是一个扩展类型，表示转换函数返回的类型。
5
  identity?: (t: T) => K
6
): boolean => {
7
  // 数组空判断，为空直接返false
8
  if (!listA || !listB) return false
9

10
  // 如果identity函数未定义，则使用默认的转换函数
11
  // 该函数将元素转换为其自身的未知类型。
12
  const ident = identity ?? ((x: T) => x as unknown as K)
13

14
  // 使用reduce方法将listB中的元素映射为一个键值对，生成一个字典dictB
15
  const dictB = listB.reduce((acc, item) => {
16
    acc[ident(item)] = true
17
    return acc
18
  }, {} as Record<string | number | symbol, boolean>)
19
  // 使用some方法检查listA中是否存在与dictB中的键相等的元素。
20
  // 如果存在，则两个列表相交，返回true；否则，不相交，返回false。
21
  return listA.some((value) => dictB[ident(value)])
22
}

1
import { iterate } from 'radash'
2

3
const value = iterate(
4
  4,
5
  (acc, idx) => {
6
    return acc + idx
7
  },
8
  0
9
) // => 10

1
export const iterate = <T>(
2
  // 循环将持续进行count次
3
  count: number,
4
  // func函数应该接收两个参数：当前值（currentValue）和当前迭代次数（iteration）
5
  func: (currentValue: T, iteration: number) => T,
6
  // initValue参数是初始值
7
  initValue: T
8
) => {
9
  let value = initValue
10
  for (let i = 1; i <= count; i++) {
11
    value = func(value, i)
12
  }
13
  return value
14
}

1
import { last } from 'radash'
2

3
const fish = ['marlin', 'bass', 'trout']
4
const lastFish = last(fish) // => 'trout'
5
const lastItem = last([], 'bass') // => 'bass'

1
export const last = <T>(
2
  // readonly 不可变数组
3
  array: readonly T[],
4
  // 默认值，可选
5
  defaultValue: T | null | undefined = undefined
6
) => {
7
  // 这里用到了 ?. 操作符
8
  // 先检查array是否为null或undefined，或者是否是一个空数组
9
  return array?.length > 0
10
    ? // 如果 array 存在，则返回 array[array.length - 1]
11
      array[array.length - 1]
12
    : // 如果 array 不存在，则返回默认值
13
      defaultValue
14
  // 如果默认值不存在，则返回 undefined
15
}

1
import { max } from 'radash'
2

3
const fish = [
4
  {
5
    name: 'Marlin',
6
    weight: 105,
7
    source: 'ocean',
8
  },
9
  {
10
    name: 'Bass',
11
    weight: 8,
12
    source: 'lake',
13
  },
14
  {
15
    name: 'Trout',
16
    weight: 13,
17
    source: 'lake',
18
  },
19
]
20

21
max(fish, (f) => f.weight)
22
// => {name: "Marlin", weight: 105, source: "ocean"}

1
import { min, max } from 'radash'
2

3
const fish = [
4
  {
5
    name: 'Marlin',
6
    weight: 105,
7
    source: 'ocean',
8
  },
9
  {
10
    name: 'Bass',
11
    weight: 8,
12
    source: 'lake',
13
  },
14
  {
15
    name: 'Trout',
16
    weight: 13,
17
    source: 'lake',
18
  },
19
]
20

21
min(fish, (f) => f.weight)
22
// => {name: "Bass", weight: 8, source: "lake"}
23
max(fish, (f) => f.weight)
24
// => {name: "Marlin", weight: 105, source: "ocean"}

1
// 这里是函数重载的运用：
2
// 1. 接受一个readonly [number, ...number[]]类型的数组，返回一个number类型的最小值
3
// 这种类型表示法通常用于表示一个不可变的整数数组
4
export function min(array: readonly [number, ...number[]]): number
5
// 2. 接受一个readonly number[]类型的数组，返回一个number类型的最小值
6
export function min(array: readonly number[]): number | null
7
// 3. 接受一个readonly T[]类型的数组和一个可选的getter函数
8
// 返回一个T类型的最小值。  这允许min函数处理非数字类型的数据
9
export function min<T>(
10
  array: readonly T[],
11
  getter: (item: T) => number
12
): T | null
13
export function min<T>(
14
  array: readonly T[],
15
  getter?: (item: T) => number
16
): T | null {
17
  // 尝试使用getter函数来获取数组中每个元素的值
18
  const get = getter ?? ((v: any) => v)
19
  // 如果getter未定义，则使用默认的比较函数（(a, b) => a < b）
20
  // 我们调用boil函数对数组进行排序，并返回排序后的第一个元素
21
  return boil(array, (a, b) => (get(a) < get(b) ? a : b))
22
}
23

24
export function max(array: readonly [number, ...number[]]): number
25
export function max(array: readonly number[]): number | null
26
export function max<T>(
27
  array: readonly T[],
28
  getter: (item: T) => number
29
): T | null
30
export function max<T>(
31
  array: readonly T[],
32
  getter?: (item: T) => number
33
): T | null {
34
  const get = getter ?? ((v: any) => v)
35
  return boil(array, (a, b) => (get(a) > get(b) ? a : b))
36
}

1
import { merge } from 'radash'
2

3
const gods = [
4
  {
5
    name: 'Zeus',
6
    power: 92,
7
  },
8
  {
9
    name: 'Ra',
10
    power: 97,
11
  },
12
]
13

14
const newGods = [
15
  {
16
    name: 'Zeus',
17
    power: 100,
18
  },
19
]
20

21
merge(gods, newGods, (f) => f.name)
22
// => [{name: "Zeus" power: 100}, {name: "Ra", power: 97}]

1
export const merge = <T>(
2
  root: readonly T[],
3
  // root和others都是只读的数组
4
  others: readonly T[],
5
  // matcher是一个函数，用于比较两个对象的相似性
6
  matcher: (item: T) => any
7
) => {
8
  // 边界、非空判断：这里至少保证该方法返回一个空数组
9
  if (!others && !root) return []
10
  if (!others) return root
11
  if (!root) return []
12
  if (!matcher) return root
13

14
  // reduce方法中的函数会遍历root数组中的每个元素，
15
  // 并将其与others数组中的每个元素进行比较。
16
  return root.reduce((acc, r) => {
17
    const matched = others.find((o) => matcher(r) === matcher(o))
18
    // 如果找到了匹配的元素，则将其添加到结果数组中；
19
    if (matched) acc.push(matched)
20
    // 否则，将当前元素添加到结果数组中。
21
    else acc.push(r)
22

23
    // 最后，返回合并后的结果数组。
24
    return acc
25
  }, [] as T[])
26
}