TypeScript中实现对象数组的级联多属性排序

TypeScript中实现对象数组的级联多属性排序

本文详细介绍了在typescript中对对象数组进行级联多属性排序的通用方法。首先,我们探讨了如何通过指定属性键的优先级顺序进行基础排序;接着,进一步展示了如何集成自定义比较器以处理特定类型或复杂逻辑的排序需求,确保排序过程的类型安全和灵活性。

理解级联排序需求

在处理复杂数据结构时,我们经常需要根据多个条件对数据进行排序。级联排序(Cascading Sort)指的是当主要排序属性的值相同时,才依据次要排序属性进行比较,以此类推,直到找到差异或所有属性都比较完毕。例如,我们可能需要先按状态排序,如果状态相同,则按日期排序。这种需求在TypeScript中实现时,需要兼顾类型安全和代码的通用性。

基于属性键的通用级联排序

最直接的级联排序方式是指定一个属性键的优先级列表。TypeScript的类型系统允许我们通过 keyof T 来安全地引用对象的属性名,从而构建一个通用的排序函数。

核心思路

该方法的核心是利用 Array.prototype.sort() 方法,并在其比较函数中迭代提供的属性键列表。对于每一对被比较的对象 item1 和 item2,我们依次检查每个属性。如果某个属性的值不相等,则直接返回该属性的比较结果(-1 或 1);如果所有属性的值都相等,则认为这两个对象是相等的,返回 0。

示例代码

interface Item {  a: string;  b: number;  c: Date;}/** * 对对象数组进行级联多属性排序 * @param items 要排序的对象数组 * @param keys 排序属性的优先级列表 */function sortByKeys(items: T[], keys: (keyof T)[]): void {  items.sort((item1, item2) => {    for (const key of keys) {      const v1 = item1[key];      const v2 = item2[key];      // 默认比较逻辑:v1 小于 v2 返回 -1,v1 大于 v2 返回 1,相等则继续下一个键      if (v1 < v2) return -1;      if (v2 < v1) return 1;    }    // 所有指定键的值都相等    return 0;  });}// 示例数据const items: Item[] = [  { a: 'aa', b: 1, c: new Date('2023-01-03T10:00:00Z') },  { a: 'a', b: 2, c: new Date('2023-01-01T10:00:00Z') },  { a: 'a', b: 1, c: new Date('2023-01-02T10:00:00Z') },  { a: 'b', b: 1, c: new Date('2023-01-01T10:00:00Z') },];console.log('原始数据:', JSON.parse(JSON.stringify(items))); // 按照 'b' 属性升序,如果 'b' 相同则按 'a' 属性升序排序sortByKeys(items, ['b', 'a']);console.log('按b(升), a(升)排序后:', items);/* 预期输出(日期部分可能因格式化不同而略有差异,但顺序一致):[  { a: 'a', b: 1, c: Date('2023-01-02T10:00:00Z') },  { a: 'aa', b: 1, c: Date('2023-01-03T10:00:00Z') },  { a: 'b', b: 1, c: Date('2023-01-01T10:00:00Z') },  { a: 'a', b: 2, c: Date('2023-01-01T10:00:00Z') }]*/

注意事项

此方法适用于属性值可以直接使用 运算符进行比较的类型(如 string, number, Date)。排序是原地进行的,会修改原始数组。如果需要保留原始数组,请先创建数组的副本(例如 […items].sort(…))。

实现自定义比较逻辑的级联排序

在某些情况下,简单的 比较可能不足以满足需求。例如,日期可能需要特定的降序比较逻辑,或者某些自定义对象需要基于其内部结构的比较。为了应对这些场景,我们可以扩展 sortByKeys 函数,使其能够接受针对特定属性的自定义比较器。

定义自定义比较器类型

首先,我们需要定义一个通用的自定义比较器类型。它接受两个相同类型的值,并返回一个表示它们相对顺序的数字(-1 表示第一个值小于第二个,0 表示相等,1 表示第一个值大于第二个)。

type CustomSorter = (value1: T, value2: T) => -1 | 0 | 1;

增强型 sortByKeys 函数

新的 sortByKeys 函数将额外接受一个 customSorters 对象,该对象将属性键映射到对应的 CustomSorter。

interface Item {  a: string;  b: number;  c: Date;}/** * 对对象数组进行级联多属性排序,支持自定义比较器 * @param items 要排序的对象数组 * @param keys 排序属性的优先级列表 * @param customSorters 可选的自定义比较器对象,键为属性名,值为该属性的比较函数 */function sortByKeys(  items: T[],   keys: (keyof T)[],   customSorters: Partial<{ [key in (keyof T)]: CustomSorter}> = {}): void {  items.sort((item1, item2) => {    for (const key of keys) {      const v1 = item1[key];      const v2 = item2[key];      const customSorter = customSorters[key]; // 获取当前属性的自定义比较器      if (customSorter) {        // 如果存在自定义比较器,则使用它        const result = customSorter(v1, v2);        if (result !== 0) return result; // 如果不相等,返回比较结果      } else {        // 否则使用默认比较逻辑        if (v1 < v2) return -1;        if (v2  new Date(Date.now() + Math.floor(Math.random() * 10000000));// 示例数据const itemsWithDates: Item[] = [  { a: 'aa', b: 1, c: randomDate() },  { a: 'a', b: 2, c: randomDate() },  { a: 'a', b: 1, c: randomDate() },  { a: 'b', b: 1, c: randomDate() },];console.log('n原始带日期数据:', JSON.parse(JSON.stringify(itemsWithDates)));// 按照 'c' 属性(日期)降序排序,并提供自定义日期比较器sortByKeys(itemsWithDates, ['c'], {  'c': (date1, date2) => {    // 日期降序排序:date1 晚于 date2 则 date1 排在前面(-1)    if (date1 > date2) return -1;     if (date2 > date1) return 1;      return 0;  },});console.log('按c(日期降序)排序后:', itemsWithDates);// 示例:多属性级联排序,其中一个属性使用自定义比较器const complexItems: Item[] = [  { a: 'apple', b: 5, c: new Date('2023-01-05T10:00:00Z') },  { a: 'banana', b: 2, c: new Date('2023-01-01T10:00:00Z') },  { a: 'apple', b: 2, c: new Date('2023-01-03T10:00:00Z') },  { a: 'banana', b: 5, c: new Date('2023-01-02T10:00:00Z') },  { a: 'apple', b: 5, c: new Date('2023-01-01T10:00:00Z') },];console.log('n原始复杂数据:', JSON.parse(JSON.stringify(complexItems)));// 优先级:b (升序) -> a (升序) -> c (降序)sortByKeys(complexItems, ['b', 'a', 'c'], {  'c': (date1, date2) => {    if (date1 > date2) return -1;    if (date2 > date1) return 1;    return 0;  },});console.log('按b(升), a(升), c(降)排序后:', complexItems);

类型解释

customSorters: Partial}> = {}:keyof T:获取类型 T 的所有属性名组成的联合类型。[key in (keyof T)]:这是一个映射类型,它遍历 T 的所有属性键。CustomSorter:对于每个属性键 key,其值类型是 T[key],所以对应的比较器类型是 CustomSorter。这确保了为特定属性提供的比较器只能处理该属性类型的值,提供了强大的类型安全。{ … }:创建了一个

以上就是TypeScript中实现对象数组的级联多属性排序的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1535141.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 02:10:32
下一篇 2025年12月21日 02:10:42

相关推荐

  • TypeScript 中如何约束对象为 CSS 属性?

    typescript 中如何约束对象为 css 属性 想要约束一个对象为 css 属性,以便在调用函数时得到自动补全提示,可以采用以下方法: 使用 react 的 cssproperties 类型 对于 react 项目,可以使用 react 提供的 cssproperties 类型: 立即学习“前…

    2025年12月24日
    300
  • 如何在 TypeScript 中约束对象为 CSS 属性?

    如何在 typescript 中约束对象为 css 属性? 在 typescript 中,为特定目的而约束对象类型是很重要的。在本文中,我们将探究如何将对象约束为包含 css 属性。 考虑以下函数: function setattrstoelement(el: htmlelement, attr: …

    2025年12月24日
    000
  • 如何使用 TypeScript 约束对象以匹配 CSS 属性?

    如何约束 typescript 对象以匹配 css 属性? setattrstoelement 函数接收两个参数,其中第二个参数应为 css 属性。对于 react 项目,可以使用 cssproperties 类型: import { cssproperties } from “react”;fun…

    2025年12月24日
    000
  • 为什么使用 :global 修改 Antd 样式无效?

    :global 修改 antd 样式为何无效 本文旨在帮助您解决在组件内使用:global修改 antd 全局样式未生效的问题。 问题描述 您在组件内使用:global修改 antd 按钮样式,但没有生效。完整代码可参考 https://codesandbox.io/s/fk7jnl 。 解决方案 …

    2025年12月24日
    000
  • 为什么在 React 组件中无法获得 Tailwind CSS 语法提示?

    为什么在 React 组件中无法获得 Tailwind CSS 语法提示? 你在 VSCode 中编写 HTML 文件时,可以正常获取 Tailwind CSS 语法提示。但当你尝试在 React 组件中编写 Tailwind CSS 时,这些提示却消失不见了。这是什么原因造成的? 解决方案 要解决…

    2025年12月24日
    000
  • 如何在 VSCode 中为 React 组件启用 Tailwind CSS 提示?

    在 vscode 中为 react 组件启用 tailwind css 提示 如果你在使用 vscode 编写 react 组件时,发现 tailwind css 提示无法正常显示,这里有一个解决方法: 安装 tailwind css intellisense 插件 这是实现代码提示的关键,确保你已…

    2025年12月24日
    200
  • CSS 砌体 Catness

    css 就像技术中的其他东西一样 – 它总是在变化和发展。该领域正在进行的开发是 css 网格布局模块级别 3,也称为 css masonry 布局。 theo 制作了一段视频,介绍了它的开发方式以及苹果和谷歌就如何实施它进行的辩论。 所有这些让我很高兴尝试 css 砌体! webkit…

    好文分享 2025年12月24日
    000
  • 深入理解CSS框架与JS之间的关系

    深入理解CSS框架与JS之间的关系 在现代web开发中,CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项,可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言,可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系,…

    2025年12月24日
    000
  • HTML+CSS+JS实现雪花飘扬(代码分享)

    使用html+css+js如何实现下雪特效?下面本篇文章给大家分享一个html+css+js实现雪花飘扬的示例,希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行:http://hai…

    2025年12月24日 好文分享
    500
  • 10款好看且实用的文字动画特效,让你的页面更吸引人!

    图片和文字是网页不可缺少的组成部分,图片运用得当可以让网页变得生动,但普通的文字不行。那么就可以给文字添加一些样式,实现一下好看的文字效果,让页面变得更交互,更吸引人。下面创想鸟就来给大家分享10款文字动画特效,好看且实用,快来收藏吧! 1、网页玻璃文字动画特效 模板简介:使用css3制作网页渐变底…

    2025年12月24日 好文分享
    000
  • tp5如何引入css文件

    tp5引入css文件的方法:1、将css文件放在public目录下的static文件里即可;2、在页面引入中写上“”语句即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 其实很简单,只需要将css,js,image文件放在这个目录下即可 页…

    2025年12月24日
    000
  • 聊聊CSS 与 JS 是如何阻塞 DOM 解析和渲染的

    本篇文章给大家介绍一下css和js阻塞 dom 解析和渲染的原理。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 hello~各位亲爱的看官老爷们大家好。估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其…

    2025年12月24日
    200
  • js如何修改css样式

    js修改css样式的方法:1、使用【obj.className】来修改样式表的类名;2、使用【obj.style.cssTest】来修改嵌入式的css;3、使用【obj.className】来修改样式表的类名;4、使用更改外联的css。 本教程操作环境:windows7系统、css3版,DELL G…

    2025年12月24日
    000
  • 如何使用纯CSS、JS实现图片轮播效果

    本篇文章给大家详细介绍一下使用纯css、js实现图片轮播效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 .carousel {width: 648px;height: 400px;margin: 0 auto;text-align: center;position: a…

    2025年12月24日
    000
  • js如何修改css

    js修改css的方法:1、使用【obj.style.cssTest】来修改嵌入式的css;2、使用【bj.className】来修改样式表的类名;3、使用更改外联的css文件,从而改变元素的css。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 js修改css的方法: 方法…

    2025年12月24日
    000
  • js如何改变css样式

    js改变css样式的方法:1、使用cssText方法;2、使用【setProperty()】方法;3、使用css属性对应的style属性。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 js改变css样式的方法: 第一种:用cssText div.style.cssText…

    2025年12月24日
    000
  • 为什么css放上面js放下面

    css放上面js放下面的原因:1、在加载html生成DOM tree的时候,可以同时对DOM tree进行渲染,这样可以防止闪跳,白屏或者布局混乱;2、javascript加载后会立即执行,同时会阻塞后面的资源加载。 本文操作环境:Windows7系统、HTML5&&CSS3版,DE…

    2025年12月24日
    000
  • 推荐六款移动端 UI 框架

    作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率。 一、MUI         最接近原生APP体验的高性能前端框架,追求性能体验,是我们开始启动MUI项目的…

    2025年12月24日
    000
  • css如何实现图片的旋转展示效果(代码示例)

    本篇文章给大家带来内容是通过代码示例介绍使用css+js实现图片的旋转展示,制作一个手动操作的“无限”照片轮播图。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就开始介绍如何实现效果。 1、构建图像轮播框架 首先是HTML。它有点难以阅读,因为我们删除了元素之间的任何空格…

    2025年12月24日
    000
  • css3+js实现烟花绽放的动画效果(代码示例)

    本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来看看效果: 动画的实现原理: 动画使用了两个关键帧(keyframes): 一个是烟花筒上升的轨迹,另一个…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信