首页 > 编程语言 >lodash已死？radash最全使用介绍（附源码详细说明）—— Array方法篇（1）

lodash已死？radash最全使用介绍（附源码详细说明）—— Array方法篇（1）

时间：2024-03-30 09:46:13浏览次数：24  
标签：const lodash root 已死 源码 数组 标识符 other 函数

  • 相信很多前端同学甚至非前端都或多或少使用过lodash库，我们都知道lodash是一个非常丰富的前端工具库，比如最常用的防抖和节流，使用lodash都能很快实现，在github上更是有着58.7k的star数。但最近出现的Radash库，号称lodash plus版本，比之更新、更小、更全面、源码更易于理解。
  • 阅读本文你能了解些什么？
    1. radash是什么；
    2. 它相较于lodash有哪些优势；
    3. radash 数组相关方法介绍及源码解析。

认识Radash

一句话介绍：radash是一个强大的零依赖的前端工具库。如果你会使用lodash，那么你使用radash将没有任何门槛。

使用Radash有哪些优势？

  • 零依赖，radash不依赖任何第三方库，仅在自己的源码里面去实现功能，所以非常的轻量。使用它你只需要加载radash本身；
  • Typescript编写，使用起来更安全，不用担心变量类型问题；
  • 全面支持es6+的新特性。它去除了lodash身上一些过时的方法（这些方法能够使用es6+新特性快速简单实现）；
  • 方法更全面。包含数组相关、对象相关、排序相关、字符串相关、优化相关等等等等...，几乎能满足你能想到的前端工具方法。
  • 源码更易于理解。我们甚至可以说radash的某些方法的实现时直接而暴力的（这点你会在我后续的方法源码介绍中有所感受）。

Radash相关方法如何使用

  1. 下载radash

    npm install radash --save
// 或 yarn下载
yarn add radash

  2. 引入你需要的方法

    import { alphabetical } from 'radash'

  3. 按照要求传入相关参数就可以使用了。

Radash的数组相关操作方法详解

注意：以下我们示例将直接使用，不再进行引入操作，实际使用时记得先引入再使用

alphabetical：把对象数组按照选定key的value的字母顺序排列

  1. 用法说明

    • 参数：目标对象数组、用于排序的属性的回调函数、第三个参数可选（不传是升序排序，传入desc字符则表示降序排序）；
    • 返回值：排序后的数组。

  2. 基础使用代码示例

    const ig = [
  {
    name: 'ning',
    power: 100
  },
  {
    name: 'rookie',
    power: 98
  },
  {
    name: 'jkl',
    power: 95
  },
  {
    name: 'theshy',
    power: 100
  }
]
// 这里输出的依然是对象数组，这里简单表示
alphabetical(ig, g => g.name) // => [jkl, ning, rookie, theshy]  
alphabetical(ig, g => g.name, 'desc') // => [theshy, rookie, ning, jkl]  

  3. 源码解析

    // 定义一个泛型函数 `alphabetical`，接受一个泛型数组 `array`，
// 一个用于从数组项中获取排序依据字符串的函数 `getter`，
// 和一个可选的方向参数 `dir`，默认值为 'asc'（升序）。
export const alphabetical = <T>(
  array: readonly T[],
  getter: (item: T) => string,
  dir: 'asc' | 'desc' = 'asc'
) => {
  // 如果输入数组不存在或为空，直接返回一个空数组
  if (!array) return []
  
  // 定义一个升序比较函数，使用 `localeCompare` 方法比较通过 `getter` 获取的字符串。
  const asc = (a: T, b: T) => `${getter(a)}`.localeCompare(getter(b))
  
  // 定义一个降序比较函数，它将通过 `getter` 获取的字符串逆序比较。
  const dsc = (a: T, b: T) => `${getter(b)}`.localeCompare(getter(a))
  
  // 使用 `slice` 方法克隆数组，避免修改原数组，然后根据 `dir` 参数选择排序函数进行排序。
  return array.slice().sort(dir === 'desc' ? dsc : asc)
}
    • 方法工作流程说明：

      • 这个函数的作用是对任何类型的数组进行排序，排序依据是数组每项通过 getter 函数得到的字符串。调用 localeCompare 是为了正确地比较可能包含特殊字符的字符串。这个函数还允许用户指定排序方向，升序或降序；

      • localeCompare 是一个字符串方法，用于比较两个字符串，并返回一个表示这两个字符串在排序中相对位置的数字。该方法基于本地语言环境的排序规则进行比较，这意味着它可以正确地比较具有特定语言字符和变音符号的字符串。
        当 localeCompare 被调用时，它将返回三种可能的值：

        • 如果字符串在排序中应该出现在比较字符串之前，则返回一个负数；
        • 如果两个字符串相等（在排序中的位置相同），则返回 0；
        • 如果字符串在排序中应该出现在比较字符串之后，则返回一个正数；

        例如，利用 localeCompare 方法可以正确地对包含德语、法语或西班牙语等特殊字符的字符串进行排序，而不仅仅是基于ASCII码值的简单比较。

boil：返回对象数组中满足条件的对象

  1. 用法说明

    • 参数：目标对象数组、条件函数；
    • 返回值：满足条件的对象。

  2. 基础代码示例

    const rng = [
  {
    name: 'Uzi',
    power: 100
  },
  {
    name: 'Xiaohu',
    power: 98
  },
  {
    name: 'Ming',
    power: 72
  }
]
boil(gods, (a, b) => (a.power > b.power ? a : b))  // => { name: 'Uzi', power: 100 }
boil(gods, (a, b) => (a.power < b.power ? a : b))  // => { name: 'Ming', power: 72 }

  3. 源码解析

    // 定义一个泛型函数 `boil`，它接受一个具有只读属性的泛型数组 `array`，
// 以及一个用于比较数组中两个元素并返回其中一个的比较函数 `compareFunc`。
export const boil = <T>(
  array: readonly T[],
  compareFunc: (a: T, b: T) => T
) => {
  // 如果传入的数组不存在或长度为0，则函数返回 null。
  if (!array || (array.length ?? 0) === 0) return null
  
  // 使用数组的 `reduce` 方法应用 `compareFunc`，将数组归约为单一的值。
  return array.reduce(compareFunc)
}

    • 方法工作流程说明：

      在这个函数中，reduce 方法接收 compareFunc 作为参数。reduce 方法会遍历数组的所有元素，并且在每一步中应用 compareFunc，将数组中的元素逐渐归约到一个单一的结果。compareFunc 函数负责决定如何从两个元素中选择一个。

cluster：把一个数组尽量均匀的分成多个数组

  1. 用法说明
    • 参数：目标数组、分组个数n；
    • 返回值：分组后的二维数组。
  2. 基础代码示例
    const gods = ['Ra', 'Zeus', 'Loki', 'Vishnu', 'Icarus', 'Osiris', 'Thor', 'Apollo', 'Artemis', 'Athena']

cluster(gods, 3)
// => [
//   [ 'Ra', 'Zeus', 'Loki' ],
//   [ 'Vishnu', 'Icarus', 'Osiris' ],
//   ['Thor', 'Apollo', 'Artemis'],
//   ['Athena']
// ]
  3. 源码解析
    // 定义一个泛型函数 `cluster`，它接收一个具有只读属性的泛型数组 `list`，
// 以及一个可选的数字参数 `size`，默认值为2，表示子数组的大小。
export const cluster = <T>(list: readonly T[], size: number = 2): T[][] => {
  // 计算出需要多少个子数组群组来容纳原数组，确保即使不能完全平分也会创建一个额外的群组来容纳剩余的元素。
  const clusterCount = Math.ceil(list.length / size)
  
  // 创建一个新数组，长度为 `clusterCount`，初始填充为 `null`。
  return new Array(clusterCount).fill(null).map((_c: null, i: number) => {
    // 对于新数组中的每个元素，使用 `slice` 方法从原数组 `list` 中提取出相应的子数组。
    // 子数组的开始索引是 `i * size`，结束索引是 `i * size + size`。
    return list.slice(i * size, i * size + size)
  })
}
    • 方法工作流程说明：
      1. 首先，使用 Math.ceil 函数计算出给定数组大小和子数组大小的情况下，需要多少个子数组群组。因为 Math.ceil 向上取整，这确保了即使最后一个群组不满也会被创建；
      2. 接着，创建一个新的数组，这个数组的长度是我们刚才计算出的群组数量 clusterCount。使用 fill(null) 方法将其填充为 null，这样我们就可以在其上使用 map 方法；
      3. 然后，对这个新数组使用 map 方法，对于其中的每个元素（最初都是 null），我们计算原数组 list 中对应的子数组应该从哪里开始(i * size)，到哪里结束(i * size + size)，并使用 slice 方法提取这个子数组；
      4. 最终，我们得到一个新的数组，它由原数组 list 切分成多个子数组组成，每个子数组的最大长度由 size 参数决定。

counting：统计对象数组中每个唯一标识符的出现次数

  1. 用法说明
    • 参数：目标对象数组、条件函数（内部是传入目标对象，返回对象身上的某一项——根据这项来做统计）；
    • 返回值：统计对象。
  2. 基础代码示例
    const skt = [
  {
    name: 'Ra',
    culture: 'egypt'
  },
  {
    name: 'Zeus',
    culture: 'greek'
  },
  {
    name: 'Loki',
    culture: 'greek'
  }
]

counting(gods, g => g.culture) // => { egypt: 1, greek: 2 }
  3. 源码解析
    // 定义一个泛型函数 `counting`，它接收一个具有只读属性的泛型数组 `list`，
// 和一个函数 `identity`，该函数用于从数组每个元素中提取一个唯一标识符（可以是字符串、数字或符号）。
export const counting = <T, TId extends string | number | symbol>(
  list: readonly T[],
  identity: (item: T) => TId
): Record<TId, number> => {
  // 如果传入的数组不存在，则返回一个空对象。
  if (!list) return {} as Record<TId, number>
  
  // 使用数组的 `reduce` 方法来累计每个唯一标识符的出现次数。
  return list.reduce((acc, item) => {
    // 使用 `identity` 函数从当前元素 `item` 中获取唯一标识符。
    const id = identity(item)
    // 如果 `acc`（累加器）中已经有这个标识符的记录，则增加它的计数，否则初始化为1。
    acc[id] = (acc[id] ?? 0) + 1
    // 返回更新后的累加器对象。
    return acc
  }, {} as Record<TId, number>) // 初始化累加器为一个空对象。
}
    • 方法工作流程说明：
      1. 接收一个数组 list 和一个 identity 函数，后者用于指定如何从数组项中提取唯一标识符；
      2. 如果传入的 list 为空，返回一个空的记录对象；
      3. 使用 reduce 方法遍历数组。reduce 的累加器 acc 是一个对象，其键是通过 identity 函数从数组项中提取的唯一标识符，值是标识符出现的次数；
      4. 在每次迭代中，从当前项 item 中提取唯一标识符 id。如果 acc 中已经存在 id 键，就将其值加1；如果不存在，就将其值设置为1；
      5. 最终，返回这个累加器对象，它是一个记录对象，其键是唯一标识符，值是对应的出现次数。

diff：返回数组1中出现但是没在数组2中出现的项

  1. 用法说明
    • 参数：目标数组1、目标数组2；
    • 返回值：包含符合项的数组。
  2. 基础代码示例
    import { diff } from 'radash'

const oldWorldGods = ['rng', 'uzi']
const newWorldGods = ['vishnu', 'uzi']

diff(oldWorldGods, newWorldGods) // => ['rng']
  3. 源码解析
    // 定义一个泛型函数 `diff`，它接收两个具有只读属性的泛型数组 `root` 和 `other`，
// 以及一个可选的函数 `identity`，用于从数组元素中提取一个唯一标识符（默认为将元素直接作为标识符）。
export const diff = <T>(
  root: readonly T[],
  other: readonly T[],
  identity: (item: T) => string | number | symbol = (t: T) =>
    t as unknown as string | number | symbol
): T[] => {
  // 如果两个数组都为空或未定义，则返回一个空数组。
  if (!root?.length && !other?.length) return []
  
  // 如果 `root` 数组未定义或为空，则返回 `other` 数组的副本。
  if (root?.length === undefined) return [...other]
  
  // 如果 `other` 数组未定义或为空，则返回 `root` 数组的副本。
  if (!other?.length) return [...root]
  
  // 使用 `other` 数组的元素创建一个记录对象 `bKeys`，键是通过 `identity` 函数提取的唯一标识符，值为 `true`。
  const bKeys = other.reduce((acc, item) => {
    acc[identity(item)] = true
    return acc
  }, {} as Record<string | number | symbol, boolean>)
  
  // 过滤 `root` 数组，只返回不在 `bKeys` 记录对象中的元素。
  return root.filter(a => !bKeys[identity(a)])
}

    • 方法工作流程说明:

      1. 检查 root 和 other 数组是否都为空或未定义，如果是，则返回空数组；
      2. 如果 root 数组为空或未定义，而 other 数组不是，返回 other 数组的副本；
      3. 如果 other 数组为空或未定义，而 root 数组不是，返回 root 数组的副本；
      4. 如果两个数组都不为空，使用 other 数组的元素创建一个记录对象 bKeys。identity 函数用于为每个元素提取唯一标识符，这些标识符作为 bKeys 对象的键，其对应的值被设置为 true；
      5. 使用 filter 方法遍历 root 数组，返回那些其通过 identity 函数提取的唯一标识符不在 bKeys 对象中的元素。这些元素构成了 root 和 other 数组的差异集。

下期我们将介绍以下方法

提示：如果是简单使用的话可以直接按照介绍选择合适的方法进行使用，我们后续会详细介绍。

  1. first：获取数组第一项，不存在返回默认值；
  2. flat：数组扁平化 —— 把多维数组转为一维数组；
  3. fork：按条件将数组拆分成两个数组，满足条件的一个，不满足条件的一个；
  4. group：根据条件函数指定的唯一标识符出现次数对数组进行排序；
  5. intersects：判断两个数组是否有公共项，返回一个布尔值。

写在后面

后续作者会整理一份方法目录上传，方便没法访问外网的同学对照查看使用。

大家有任何问题或者见解，欢迎评论区留言交流！！！

点击访问：Radash官网

参考文章：Lodash is dead. Long live Radash.

标签：const,lodash,root,已死,源码,数组,标识符,other,函数
From： https://www.cnblogs.com/muqiqiang/p/18105096

相关文章

  • [附源码]JAVA计算机毕业设计大学生心灵氧吧（源码+开题）
    本系统（程序+源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着社会的快速发展，大学生面临着日益严峻的学习、就业和人际关系等多重压力。这些压力往往导致大学生出现焦虑、抑郁等心理问题，严重影响其身心健康和......
  • [附源码]JAVA计算机毕业设计大学生就业管理系统（源码+开题）
    本系统（程序+源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在当今社会，大学生就业问题一直是社会关注的焦点。随着高校扩招政策的实施，每年毕业的大学生数量逐年攀升，而就业市场的竞争也愈发激烈。传统的就业管理......
  • Go标准库源码分析: atomic.AddInt64
    atomic.AddInt64介绍原理源码看不到源码解释个勾八原理源码里只有函数doc,但是没有函数实现,但是有一段注释//AddInt64atomicallyaddsdeltato*addrandreturnsthenewvalue.//Considerusingthemoreergonomicandlesserror-prone[Int64.Add]instead/......
  • Node.js毕业设计合同管理系统（Express+附源码）
    本系统（程序+源码）带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景：在现代商业活动中，合同作为规范各方权利与义务的法律文件，扮演着至关重要的角色。随着经济全球化和商业交易的日益频繁，企业和个人需要处理和管理的合同数量急......
  • 【即插即用】GnConv递归门控卷积（附源码）
    论文地址：https://arxiv.org/abs/2207.14284源码地址：https://github.com/raoyongming/HorNetGnConvGnConvHorNet摘要简介：最近，视觉Transformer在各种任务中取得了巨大成功，这主要得益于基于点积自注意力的新型空间建模机制。在本文中，我们发现视觉Transformer的关键要素，即输......
  • Node.js毕业设计合同管理（Express+附源码）
    本系统（程序+源码）带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景：在当今信息化快速发展的时代，合同管理系统作为企业日常运营中不可或缺的一部分，扮演着至关重要的角色。合同管理涉及合同的起草、审核、签订、执行以及存档等......
  • C#手术麻醉系统源码 可对接HIS LIS PACS 医疗系统各类设备 医院手麻系统源码
    C#手术麻醉系统源码可对接HIS LIS  PACS医疗系统各类设备手术麻醉信息管理系统主要还是为了手术室开发提供全面帮助的系统，其主要是由监护设备数据采集子系统和麻醉临床系统两个子部分组成。包括从手术申请到手术分配，再到术前访视、术中记录及术后恢复的全过程中都可以......
  • 2024年1000个计算机毕业设计项目推荐（源码+论文【万字】）
    2024年最新计算机毕业设计题目推荐，项目汇总！本科、专科。项目设计、项目定制、辅导、万字文档哈喽，大家好，大四的同学马上要开始做毕业设计了，大家做好准备了吗？博主给大家详细整理了计算机毕业设计最新项目，对项目有任何疑问，都可以问博主哦~技术栈包括但不限于：Java、JavaWeb......
  • 电子招标采购系统源码之从供应商管理到采购招投标、采购合同、采购执行的全过程数字化
    随着市场竞争的加剧和企业规模的扩大，招采管理逐渐成为企业核心竞争力的重要组成部分。为了提高招采工作的效率和质量，我们提出了一种基于电子化平台的解决方案。该方案旨在通过电子化招投标，使得招标采购的质量更高、速度更快，同时节约招标成本，提升企业的资金节约率。 项目说明......
  • 【附源码】JAVA计算机毕业设计在线考研刷题系统（springboot+mysql+开题+论文）
    本系统（程序+源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展，计算机在教育领域的应用日益广泛。特别是在线教育平台，以其便捷性、灵活性和资源共享性受到了广大师生的青睐。近年来，考研热潮......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99