JavaScript 中根据自定义规则排序二维数组

javascript 中根据自定义规则排序二维数组

本文将介绍一种在 JavaScript 中根据二维数组的某一维度进行排序,并保持其他维度关联性的方法。通过“压缩”、“排序”和“解压缩”三个步骤,可以实现高效且灵活的排序需求,并附带代码示例和详细解释。

在 JavaScript 中,我们经常需要对数组进行排序。对于一维数组,sort() 方法可以轻松实现。但对于二维数组,如果需要根据其中一个维度进行排序,同时保持其他维度的关联性,则需要一些技巧。本文将介绍一种通用的解决方案。

问题描述

假设我们有一个二维数组 test_array = [[98, 6, 54, 32], [10, 20, 30, 40]],我们希望根据 test_array[0] 的值从小到大排序,同时保持 test_array[1] 与 test_array[0] 的对应关系。期望的结果是 test[0] = [6, 32, 54, 98] 和 test[1] = [20, 40, 30, 10]。

立即学习“Java免费学习笔记(深入)”;

解决方案

解决这个问题的核心思路是将二维数组“压缩”成一个包含多个元组的一维数组,每个元组代表原始二维数组中相同索引位置的元素。然后对这个一维数组进行排序,最后再将排序后的结果“解压缩”回二维数组。

步骤 1:压缩 (Zip)

首先,我们需要将二维数组压缩成一个一维数组,其中每个元素都是一个元组,包含原始数组中对应位置的元素。

const test_array = [[98, 6, 54, 32], [10, 20, 30, 40]];const zipped = test_array[0].map((_, idx) =>  test_array.map((subarray) => subarray[idx]));console.log(zipped); // Output: [[98, 10], [6, 20], [54, 30], [32, 40]]

这段代码使用 map() 方法遍历 test_array[0],并为每个索引 idx 创建一个包含 test_array 中所有子数组在 idx 位置元素的元组。

步骤 2:排序 (Sort)

接下来,我们对压缩后的数组 zipped 进行排序。排序的依据是元组中的第一个元素,也就是原始数组 test_array[0] 的值。

zipped.sort((a, b) => a[0] - b[0]);console.log(zipped); // Output: [[6, 20], [32, 40], [54, 30], [98, 10]]

这里使用了 sort() 方法和比较函数 (a, b) => a[0] – b[0],确保按照元组中第一个元素的值从小到大排序。

步骤 3:解压缩 (Unzip)

最后,我们将排序后的 zipped 数组解压缩回二维数组的形式。

const result = zipped[0].map((_, idx) =>  zipped.map((subarray) => subarray[idx]));console.log(result); // Output: [[6, 32, 54, 98], [20, 40, 30, 10]]

这段代码与压缩步骤类似,使用 map() 方法遍历 zipped[0],并为每个索引 idx 创建一个包含 zipped 中所有子数组在 idx 位置元素的数组。

完整代码示例

const test_array = [[98, 6, 54, 32], [10, 20, 30, 40]];// 压缩const zipped = test_array[0].map((_, idx) =>  test_array.map((subarray) => subarray[idx]));// 排序zipped.sort((a, b) => a[0] - b[0]);// 解压缩const result = zipped[0].map((_, idx) =>  zipped.map((subarray) => subarray[idx]));console.log(result); // Output: [[6, 32, 54, 98], [20, 40, 30, 10]]

注意事项

这种方法适用于需要根据二维数组的任意一个维度进行排序,并保持其他维度关联性的情况。比较函数 (a, b) => a[0] – b[0] 可以根据实际需求进行修改,以实现不同的排序规则。 例如降序排列可以写成 (a, b) => b[0] – a[0]如果二维数组的子数组长度不一致,可能会导致错误。在使用前需要确保数据结构的正确性。

总结

通过“压缩”、“排序”和“解压缩”三个步骤,我们可以灵活地对 JavaScript 中的二维数组进行排序,并保持数据的关联性。这种方法具有通用性,可以应用于各种需要排序二维数组的场景。 掌握这种技巧可以帮助我们更有效地处理复杂的数据结构,提高代码的可读性和可维护性。

以上就是JavaScript 中根据自定义规则排序二维数组的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 23:19:29
下一篇 2025年12月20日 23:19:54

相关推荐

  • JavaScript Cookie与Session管理

    JavaScript通过操作Cookie管理用户状态,与后端Session配合;2. 可用setCookie设置带过期时间的Cookie;3. getCookie函数读取指定名称的Cookie值。 在Web开发中,管理用户状态是关键的一环。JavaScript作为前端核心语言,虽然不能直接操作服务器…

    2025年12月20日
    000
  • JavaScript静态站点生成器

    JavaScript静态站点生成器基于Node.js,将Markdown等转为HTML。主流工具包括:1. Gatsby(React+GraphQL),2. Next.js(可静态导出),3. Eleventy(轻量多模板支持),4. Nuxt.js(Vue生态)。选型需考虑技术栈、构建速度、部署便…

    2025年12月20日
    000
  • 函数式编程在JavaScript中的实践

    函数式编程强调纯函数、不可变数据和声明式风格。JavaScript通过高阶函数、闭包等特性支持该范式。纯函数确保输入一致则输出一致,无副作用,如add(a,b) => a+b。避免修改原数据,应使用扩展运算符创建新数据,如[…arr, 4]。利用map、filter、reduce实…

    2025年12月20日
    000
  • JavaScript装饰器模式实现

    装饰器模式通过包装对象动态扩展功能而不修改其结构。JavaScript凭借原型和函数式特性,支持函数装饰(如日志、性能监控)、类/方法装饰(如只读、参数校验)及手动对象装饰,实现关注点分离与代码复用。 装饰器模式允许你动态地给对象添加新功能,而不改变其原始结构。在 JavaScript 中,这种模式…

    2025年12月20日
    000
  • JavaScript WebSocket双向通信协议实现

    WebSocket通过一次HTTP握手建立持久化TCP连接,实现客户端与服务器间的全双工实时通信,适用于聊天室、通知等高频交互场景;前端使用原生API监听open、message等事件,后端可用Node.js的ws库创建服务并处理连接与消息收发,实际应用需考虑心跳检测、JSON消息格式、WSS加密及…

    2025年12月20日
    000
  • JavaScript装饰器模式与元编程技术

    装饰器模式是一种动态扩展对象功能的技术,通过包装类或方法实现行为增强而不修改原对象。JavaScript中借助TypeScript或Babel支持,可用@语法实现类、方法、参数等的修饰,如@logClass记录实例化、@readonly限制属性重写、@validate校验参数。装饰器在定义时执行,属…

    2025年12月20日
    000
  • 优化JavaScript中相似函数参数重复定义:Proxy模式实践

    本文探讨了JavaScript中相似函数或方法参数重复定义的痛点,尤其是在处理大量参数或扩展框架类时。针对这一问题,文章提出了一种基于JavaScript `Proxy`对象的解决方案,通过在构造函数中拦截方法调用,动态地根据方法名映射并提取所需参数,从而显著减少代码冗余,提升模块化和可维护性。 在…

    2025年12月20日
    000
  • JavaScript 字符串中的引号转义:一份实用指南

    本文旨在帮助初学者理解 JavaScript 中字符串字面量中引号的正确使用和转义。我们将通过一个实际示例,讲解如何在字符串中安全地嵌入单引号和双引号,避免语法错误,并确保代码的正确执行。掌握引号转义是编写有效 JavaScript 代码的基础。 在 JavaScript 中,字符串字面量可以使用单…

    2025年12月20日
    000
  • 探索Stacks Editor的LaTeX数学公式增强与替代方案

    本文探讨了在stack overflow的markdown编辑器(stacks editor)中集成latex数学公式支持的挑战。尽管stacks editor功能强大,但其原生版本不直接支持latex渲染。文章提供了编辑器的基本设置示例,并指出在现有框架下实现latex支持的局限性,同时推荐了如s…

    2025年12月20日
    000
  • JavaScript音频视频处理与WebRTC

    JavaScript通过getUserMedia采集音视频流,结合RTCPeerConnection实现WebRTC点对点通信,利用Web Audio API处理音频,通过RTCDataChannel传输任意数据,构建实时音视频应用。 JavaScript 在现代浏览器中提供了强大的音频视频处理能力…

    2025年12月20日
    000
  • 使用Fetch API处理嵌套数据:解决‘undefined’错误并优化代码

    本文详细讲解在使用javascript fetch api获取嵌套或关联数据时,如何避免因数据结构理解偏差导致的`undefined`错误。通过rick and morty api的实际案例,我们将探讨两种有效的数据整合方法:嵌套promise链和更现代、可读性更强的`async/await`模式,…

    2025年12月20日 好文分享
    000
  • JavaScript对象属性描述符与不变性

    JavaScript对象属性包含属性描述符,可控制属性的可写、可枚举和可配置性,通过Object.defineProperty()设置;数据描述符含value和writable,访问器描述符使用get/set函数;configurable控制属性定义修改,enumerable决定是否参与遍历;Obj…

    2025年12月20日
    000
  • JavaScript 中对自定义数组进行排序

    本文介绍了如何在 JavaScript 中根据一个数组的排序结果,对另一个与之相关的数组进行同步排序。通过 `zip`、`sort` 和 `unzip` 的操作,可以实现复杂场景下的数组排序需求,并提供了清晰的代码示例和详细的解释。 在 JavaScript 中,我们经常会遇到需要根据一个数组的排序…

    2025年12月20日
    000
  • JavaScript动画:解决CSS定位属性冲突导致的过渡失效问题

    本文深入探讨了javascript驱动的css动画中,当同时操作元素的`left`和`right`定位属性时,可能导致过渡效果失效的常见问题。文章详细解释了浏览器对此类操作的解析机制,并提供了一种通过统一使用单一水平定位属性(如`right`)来确保动画平滑过渡的解决方案,并通过一个卡片移动的实际案…

    2025年12月20日
    000
  • TypeScript中处理未赋值对象与真值检查的策略

    本文探讨了在TypeScript中对未赋值变量进行真值检查时遇到的常见编译错误,特别是当变量被声明为object类型时。通过深入分析TypeScript的类型系统和控制流分析,文章提出了两种核心解决方案:使用联合类型(object | undefined或object | null)来明确变量可能存…

    2025年12月20日
    000
  • 解决 Swiper 幻灯片重叠问题:CSS 修复指南

    本文旨在解决 swiper 幻灯片在特定情况下(尤其是使用“fade”效果时)出现的重叠问题。通过深入分析其可能的原因,并提供一个简洁有效的 css 解决方案,即利用 `opacity` 属性精确控制活动与非活动幻灯片的显示状态,确保幻灯片平滑切换,避免内容混淆,提升用户体验。 Swiper 幻灯片…

    2025年12月20日
    000
  • Vue 3中scrollLeft动画更新延迟的深层原因与解决方案

    本文深入探讨了vue 3应用中 `scrollleft` 属性在进行平滑动画时出现更新延迟或失效的问题。核心原因在于css属性 `scroll-behavior: smooth` 与频繁的javascript `scrollleft` 赋值操作之间的冲突。文章提供了禁用 `scroll-behavi…

    2025年12月20日
    000
  • 动态创建输入框在表单提交后保留值的教程

    本教程详细阐述了如何在用户提交表单后,将动态创建的html输入框中的值进行保留。核心方法是通过php将`$_post`数据转换为json格式,然后将其嵌入到javascript变量中。接着,javascript利用这些数据在页面重新加载时,为动态生成的输入框恢复之前用户输入的值,从而提升用户体验,避…

    2025年12月20日
    000
  • Vue 3中scrollLeft属性更新DOM元素问题解析与解决方案

    在vue 3应用中,当尝试通过编程方式(如循环或定时器)快速更新dom元素的`scrollleft`属性以实现平滑滚动动画时,可能会遇到更新不同步或“阻塞”的现象,即元素滚动只在更新操作结束后才一次性发生。本文将深入探讨这一问题的根本原因,特别是与css属性`scroll-behavior: smo…

    2025年12月20日
    000
  • 浏览器扩展程序开发

    答案:开发浏览器扩展需掌握其核心结构与运行机制。首先创建manifest.json配置文件,定义扩展基本信息与权限;接着编写背景脚本监听事件,内容脚本操作页面DOM;通过弹出页面实现用户交互。以高亮链接为例,使用activeTab权限和chrome.scripting.executeScript注入…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信