首页 > 编程语言 >lodash已死?radash最全使用介绍(附源码说明)—— Array方法篇(2)

lodash已死?radash最全使用介绍(附源码说明)—— Array方法篇(2)

时间:2024-04-03 16:46:32浏览次数:24  
标签:acc const lodash 元素 累加器 已死 源码 数组 函数

前言

  • 前篇我们已经介绍了 radash 的相关信息和部分 Array 相关方法,详情可前往主页查看;
  • 本篇我们继续介绍 radash 中 Array 的其他相关方法;

Radash 的 Array 相关方法详解

first:获取数组第一项,不存在返回默认值

  1. 使用说明
    • 参数:目标数组,或者传递两个参数空数组和默认值;
    • 返回值:传目标数组则返回目标数组的第一项,传空数组和默认值则返回默认值。
  2. 使用代码示例
import { first } from 'radash'

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

first(gods) // => 'lufee'
first([], 'zuoluo') // => 'zuoluo'
  1. 源码解析
// 定义一个泛型函数 `first`,它接收一个具有只读属性的泛型数组 `array`,
// 和一个可选的默认值 `defaultValue`,其类型可以是泛型 `T` 或 `null` 或 `undefined`,默认值为 `undefined`。
export const first = <T>(
  array: readonly T[],
  defaultValue: T | null | undefined = undefined
) => {
  // 如果数组存在且长度大于0,返回数组的第一个元素。
  // 否则,返回提供的默认值 `defaultValue`。
  return array?.length > 0 ? array[0] : defaultValue
}
  • 方法流程说明:

    1. 检查传入的数组 array 是否存在并且长度是否大于0。
    2. 如果数组存在且不为空(长度大于0),则返回数组的第一个元素 array[0]
    3. 如果数组不存在或为空,返回 defaultValue

    这个函数对于需要安全地访问数组第一个元素而不抛出错误的情况很有用,特别是在不确定数组是否为空的情况下。通过提供一个默认值,你可以避免在数组为空时访问未定义的索引。如果没有提供默认值,函数将默认返回 undefined

flat:数组扁平化 —— 把包含多个数组的数组转为一个数组(注意不会递归)

  1. 使用说明
    • 参数:包含多个数组的数组;
    • 返回值:降低一维后的数组;
    • 注意:不会递归降维,只能降一维
  2. 使用代码示例
import { flat } from 'radash'

const gods = [['shy', 'ning'], ['jkl']]

flat(gods) // => [shy, ning, jkl]
  1. 源码解析
// 定义一个泛型函数 `flat`,它接收一个具有只读属性的二维泛型数组 `lists`,
// 并返回一个扁平化的一维数组。
export const flat = <T>(lists: readonly T[][]): T[] => {
  // 使用数组的 `reduce` 方法来累积(合并)所有子数组的元素。
  return lists.reduce((acc, list) => {
    // 使用 `push` 方法的展开语法(...)将当前处理的子数组 `list` 的所有元素添加到累加器 `acc` 中。
    acc.push(...list)
    // 返回更新后的累加器 `acc`,以便它可以在下一次迭代中使用。
    return acc
  }, []) // 初始化累加器 `acc` 为一个空数组。
}
  • 方法流程说明:
    1. 使用 reduce 方法遍历二维数组 listsreduce 方法的累加器 acc 是一个一维数组,用于收集所有子数组的元素。
    2. 对于 lists 中的每个子数组 list,使用展开语法 ... 将其元素添加到累加器数组 acc 中。
    3. 每次迭代结束后,返回更新的累加器 acc
    4. reduce 方法完成遍历后,返回最终的累加器 acc,这时它包含了 lists 中所有子数组的元素,形成了一个扁平化的一维数组。
    5. 提示:这个 flat 函数在功能上类似于 Array.prototype.flat 方法,但是它是手动实现的,适用于不支持内建 flat 方法的环境。

fork:按条件将数组拆分成两个数组,满足条件的一个,不满足条件的一个

  1. 使用说明
    • 参数:目标数组,条件函数;
    • 返回值:返回两个数组,一个保存满足条件的项,另一个保存不满足条件的项。
  2. 使用代码示例
import { fork } from 'radash'

const gods = [
  {
    name: 'Uzi',
    power: 100
  },
  {
    name: 'Xiaohu',
    power: 98
  },
  {
    name: 'Ming',
    power: 72
  },
  {
    name: 'Mlxg',
    power: 100
  }
]

const [finalGods, lesserGods] = fork(gods, f => f.power > 90) // [[Uzi, Xiaohu, Mlxg], [Ming]]
  1. 源码解析
// 定义一个泛型函数 `fork`,它接受一个具有只读属性的泛型数组 `list`,
// 和一个条件函数 `condition`,根据此函数将 `list` 中的元素分成两组。
export const fork = <T>(
  list: readonly T[],
  condition: (item: T) => boolean
): [T[], T[]] => {
  // 如果传入的 `list` 为空,则返回两个空数组。
  if (!list) return [[], []]
  
  // 使用数组的 `reduce` 方法来累积分离出的两个子数组。
  return list.reduce(
    (acc, item) => {
      // 从累加器中解构出两个子数组 a 和 b。
      const [a, b] = acc
      // 如果当前元素 `item` 满足条件函数 `condition`,将其添加到数组 a,否则添加到数组 b。
      if (condition(item)) {
        return [[...a, item], b]
      } else {
        return [a, [...b, item]]
      }
    },
    [[], []] as [T[], T[]] // 初始化累加器为两个空数组。
  )
}
  • 方法流程说明:
    1. 首先检查传入的数组 list 是否为空。如果为空,返回一对空数组。
    2. 使用 reduce 方法遍历 list 数组。reduce 方法的累加器 acc 是一个包含两个子数组的元组 [T[], T[]]
    3. 对于 list 中的每个元素 item,检查它是否满足条件函数 condition
    4. 如果条件函数返回 true,则将该元素添加到累加器的第一个子数组 a。如果条件函数返回 false,则将该元素添加到第二个子数组 b
    5. 在每次迭代结束后,返回更新后的累加器 [a, b]
    6. reduce 方法完成遍历后,返回最终的累加器 [a, b],它包含了根据条件函数分离的两个子数组。

group:根据条件函数指定的key构建一个统计对象,key 为指定的 key 有哪些 value ,value 为对应对象

  1. 使用说明
    • 参数:对象数组、条件函数;
    • 返回值:统计对象
  2. 使用代码示例
import { group } from 'radash'

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

const fishBySource = group(fish, f => f.source) // => { ocean: [marlin], lake: [bass, trout] }
  1. 源码解析
// 定义一个泛型函数 `group`,它接受一个具有只读属性的泛型数组 `array`,
// 和一个函数 `getGroupId`,该函数用于从数组元素中提取一个标识符作为组的键。
export const group = <T, Key extends string | number | symbol>(
  array: readonly T[],
  getGroupId: (item: T) => Key
// 返回一个对象,其键是通过 `getGroupId` 函数提取的标识符,键对应的值是具有相同标识符的元素数组。
): Partial<Record<Key, T[]>> => {
  // 使用数组的 `reduce` 方法来累积分组结果。
  return array.reduce((acc, item) => {
    // 使用 `getGroupId` 函数从当前元素 `item` 中获取组标识符 `groupId`。
    const groupId = getGroupId(item)
    // 如果累加器 `acc` 中还没有这个组标识符的键,初始化为一个空数组。
    if (!acc[groupId]) acc[groupId] = []
    // 将当前元素 `item` 添加到对应组标识符的数组中。
    acc[groupId].push(item)
    // 返回更新后的累加器 `acc`,以便它可以在下一次迭代中使用。
    return acc
  }, {} as Record<Key, T[]>) // 初始化累加器为一个空对象。
}
  • 方法流程说明:
    1. 遍历传入的数组 array,对每个元素使用 getGroupId 函数来确定它应该属于哪个组。
    2. 对于每个元素,检查累加器 acc(一个对象)中是否已经有一个数组存在于以 groupId 为键的位置。如果没有,就在那个位置创建一个空数组。
    3. 将当前元素 item 添加到 acc[groupId] 数组中。
    4. 继续处理数组的下一个元素,直到所有元素都被处理完毕。
    5. 返回累加器 acc,它现在包含了按 groupId 分组的元素数组。
    6. tips:在TypeScript中,Partial<Record<Key, T[]>> 是一种类型,它表示一个对象,这个对象的键可以是 Key 类型,而每个键对应的值是 T[] 类型的数组。PartialRecord 都是TypeScript中的高级类型。

intersects:判断两个数组是否有公共项,返回一个布尔值

  1. 使用说明
    • 参数:数组1,数组2,可选条件函数(用于提取随机标识符,对对象数组进行操作时);
    • 返回值:有返回true,否则返回false。
  2. 使用代码示例
import { intersects } from 'radash'

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

intersects(oceanFish, lakeFish) // => false

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

intersects(oceanFish, brackishFish) // => true
  1. 源码解析
// 定义一个泛型函数 `intersects`,它接受两个具有只读属性的泛型数组 `listA` 和 `listB`,
// 以及一个可选的函数 `identity`,用于从数组元素中提取一个唯一标识符。
export const intersects = <T, K extends string | number | symbol>(
  listA: readonly T[],
  listB: readonly T[],
  identity?: (t: T) => K
): boolean => {
  // 如果 `listA` 或 `listB` 不存在,返回 false。
  if (!listA || !listB) return false
  // 如果 `identity` 函数未提供,则使用默认函数,它将元素作为其自己的标识符。
  const ident = identity ?? ((x: T) => x as unknown as K)
  // 使用 `listB` 的元素创建一个记录对象 `dictB`,键是通过 `ident` 函数提取的唯一标识符,值为 `true`。
  const dictB = listB.reduce((acc, item) => {
    acc[ident(item)] = true
    return acc
  }, {} as Record<string | number | symbol, boolean>)
  // 检查 `listA` 中是否有元素的唯一标识符存在于 `dictB` 中。
  return listA.some(value => dictB[ident(value)])
}
  • 方法流程说明:
    1. 检查传入的数组 listAlistB 是否存在。如果任何一个不存在,返回 false
    2. 如果未提供 identity 函数,则使用一个默认函数,它将每个元素 x 强制转换为 K 类型,作为其唯一标识符。
    3. 遍历数组 listB,使用 reduce 方法和 ident 函数将其元素映射到一个记录对象 dictB 中,其中键是元素的唯一标识符,值为 true
    4. 使用 some 方法检查数组 listA 中是否有任何元素的唯一标识符存在于 dictB 中。如果存在,some 方法会返回 true,表示两个数组有交集。
    5. 如果 listA 中没有任何元素的唯一标识符在 dictB 中找到,some 方法返回 false,表示两个数组没有交集。
    6. 提示:??表示 TypeScript 中的空值合并运算符 。这个运算符用于提供一个默认值,当左侧的操作数 identitynullundefined 时,就会使用右侧的操作数作为默认值。x as unknown as K是 Typescript 的类型断言。

下期我们将介绍以下方法

  • iterate:把一个函数迭代执行指定次数;
  • last:输出数组的最后一项,如果数组为空则输出传入的默认值;
  • list:创建包含特定项的数组;
  • max:获取对象数组中指定标识符最大的项;
  • merge:合并数组,并且会覆盖第一个数组;
  • min:获取对象数组中指定标识符最小的项;
  • objectify:根据函数映射的键与值把数组转换为字典对象;
  • range:根据步长生成一个数值范围内的迭代值;
  • replaceOrAppend:替换对象数组中的项或是追加项(条件函数不满足时追加);
  • replace:替换数组中的第一个匹配项。

写在后面

  • 后续作者会整理一份方法目录上传,方便没法访问外网的朋友查看使用。
  • 该系列会在每周五更新,遇节假日提前。
  • 大家有任何问题或者见解,欢迎评论区留言交流!!!
  • 点击访问:radash 官网

标签:acc,const,lodash,元素,累加器,已死,源码,数组,函数
From: https://www.cnblogs.com/muqiqiang/p/18113013

相关文章

  • 2024最新同城上门家政按摩H5小程序源码 | 全开源无需授权 | 上门预约系统
    简介:2024最新同城上门家政按摩H5小程序源码 |上门预约系统 后端thinkphp框架开发。前端采用uni-app开发,适配多端(小程序+公众号H5+APP)2024最新同城上门家政按摩H5小程序源码|全开源无需授权|上门预约系统-百创网-源码交易平台_网站源码_商城源码_小程序源码此套源码......
  • Flink源码
    1.源码编译flink-1.19jdk-1.8scala-2.12mvm-3.86自定义日志:注意修改8081端口,可能被占用;windows日志的路径命名不能包含:,要改名自定义jar-Dlog.file=./log/flink-tm-1.local.log-Dlog4j.configuration=./a_conf/log4j.properties-Dlog4j.configurationFile=./a_conf/l......
  • 【附源码】计算机毕业设计影评网站系统(java+springboot+mysql+mybatis+论文)
    本系统(程序+源码)带文档lw万字以上  文末可领取本课题的JAVA源码参考系统程序文件列表系统的选题背景和意义影评网站系统是一个专注于电影评论和评分的在线平台,旨在为观众提供一个交流观影体验、分享观点和发现新片的社区。随着电影产业的蓬勃发展,人们对于电影的需求和品......
  • 【附源码】计算机毕业设计智慧外贸平台(java+springboot+mysql+mybatis+论文)
    本系统(程序+源码)带文档lw万字以上  文末可领取本课题的JAVA源码参考系统程序文件列表系统的选题背景和意义智慧外贸平台是一种基于互联网技术的智能化外贸服务平台,旨在帮助外贸企业提高业务效率、降低成本、提升竞争力。随着全球化的不断深入和国际贸易竞争的加剧,传统的......
  • C#手术麻醉信息系统源码 前端Vue,Ant-Design+后端百小僧开源框架开发的手麻系统源码
        手术麻醉临床信息系统遵循“以病人为中心、服务于临床”的宗旨,使医护人员从繁琐的病历书写中解放出来,集中精力关注病人的诊疗,将更多的时间用于分析、诊断。以服务围术期临床业务工作的开展为核心,为医护人员、业务管理人员、院级领导提供流程化、信息化、自动化、智......
  • Android14应用启动流程(源码+Trace)
    1.简介应用启动过程快的都不需要一秒钟,但这整个过程的执行是比较复杂的,无论是对手机厂商、应用开发来说启动速度也是核心用户体验指标之一,本文采用Android14源码与perfetto工具进行解析。源码参考地址:Searchtrace分析工具:PerfettoUI2.Input事件处理流程Input是Android......
  • java毕业设计点餐小程序[附源码]
    本系统(程序+源码)带文档lw万字以上  文末可领取本课题的JAVA源码参考系统程序文件列表系统的选题背景和意义随着移动互联网的高速发展,人们的生活方式正在发生翻天覆地的变化。尤其是在餐饮领域,传统的纸质菜单和排队点餐方式正逐渐被智能点餐系统所取代。在此背景下,基于Jav......
  • [附源码]JAVA计算机毕业设计第三方装修保障平台(源码+开题)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着生活水平的提高,人们对居住环境的要求也日益提升,装修行业因此蓬勃发展。然而,装修市场的乱象也随之显现,如施工质量参差不齐、材料质量难以保证、售......
  • [附源码]JAVA计算机毕业设计点餐系统(源码+开题)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息技术的快速发展,计算机技术在餐饮行业的应用越来越广泛。传统的点餐方式往往存在效率低下、管理不便等问题,已经无法满足现代餐饮业的快速发展......
  • 【全开源】v7淘宝客APP源码-自营商城任务墙源码美团外卖CPS_博纳软云
    V7淘宝客APP源码-自营商城任务墙源码美团外卖CPS广告联,这一组合源码为商家提供了一个全方位的电商与外卖运营解决方案。V7淘宝客APP源码,作为电商领域的得力助手,为商家搭建了一个功能齐全、界面友好的在线购物平台。通过这一源码,商家可以轻松展示自己的商品,管理订单,与消费者进......