当前位置: 首页 > news >正文

js一数组按照另一数组进行排序

有时我们需要一个数组按另一数组的顺序来进行排序,总结一下方法,同时某些场景也会用到。

首先一个数组相对简单的情况:

var arr1 = [52,23,36,11,09];
var arr2 = [23,09,11,36,52];
// 要求arr1按照arr2的顺序来排序,可以看到两个数组都不是常规的从小到大排序的

既然数组不是按数字大小来排序的,我们就不能按他们的大小来比较。虽然数字本身不能用来比较,但是我们可以换一种思路,比较位置,也就是index。

arr1.sort((a,b) => arr2.indexOf(a)-arr2.indexOf(b))
// arr1 [23,09,11,36,52]

巧用下标就可以完成排序了,这里没明白可以先了解一下sort的原理。
https://blog.csdn.net/ws9029/article/details/106734256/

如果我们遇到的数组内是对象的情况下就不能用这种方法了,比如我们可能会遇到的场景:

场景:
一个多选的select,如果不排序会按照点击的顺序生成对应的数组,需求要按原本的顺序传给后端。

<el-selectv-model="listQuery.data"placeholder="选择数据"clearablemultiplecollapse-tags
><el-optionv-for="(item,index) in dataList":key="index":label="item.label":value="item.value"></el-option>
</el-select>dataList: [{value: 'dc033',label: 'XX值'}, {value: 'dc015',label: 'AA值'}, {value: 'dc037',label: 'BB值'}, {value: 'dc025',label: 'TT值'}, {value: 'dc028',label: 'HH值'}, {value: 'dc020',label: 'FF值'}
]

当我们点击下拉选选项的时候,会按照点击的顺序给listQuery.data赋值,得到的就是

['dc025','dc015','dc033']

这是个无规则,无大小顺序的数组,而且原数组本身也没有大小顺序,但是后端需要我们按照元数组的正常顺序来传递,那么我们只能创造条件来排序了。

//先给原数组加个排序的条件
dataList: [{id: 1,value: 'dc033',label: '统调负荷预测值'}, {id: 2,value: 'dc015',label: '统调负荷实际值'}, {id: 3,value: 'dc037',label: '火电竞价空间预测值'}, {id: 4,value: 'dc025',label: '火电竞价空间实际值'}, {id: 5,value: 'dc028',label: '新能源出力预测值'}, {id: 6,value: 'dc020',label: '新能源出力实际值'}
]

然后我们按id来进行排序即可

this.listQuery.data.sort((a, b) => {let aid, bidthis.yleftList.forEach(item => {if (item.value == a) aid = item.idif (item.value == b) bid = item.id})return aid - bid
})

这样我们巧妙利用id大小来进行升序,正好得到的是原数组的顺序

相关文章:

js一数组按照另一数组进行排序

有时我们需要一个数组按另一数组的顺序来进行排序&#xff0c;总结一下方法&#xff0c;同时某些场景也会用到。 首先一个数组相对简单的情况&#xff1a; var arr1 [52,23,36,11,09]; var arr2 [23,09,11,36,52]; // 要求arr1按照arr2的顺序来排序&#xff0c;可以看到两个…...

JavaScript 类继承

JavaScript 类继承是面向对象编程的一个重要概念&#xff0c;它允许一个类从另一个类继承属性和方法。通过使用继承&#xff0c;可以避免代码重复&#xff0c;并可以在现有类的基础上扩展新功能。 在 JavaScript 中&#xff0c;您可以使用关键字 extends 来实现类继承。例如&a…...

MySQL相关面试题

文章目录union 和 unionAll 的区别&#xff1f;drop、delete与truncate的区别 &#xff1f;sql 语句如何优化 &#xff1f;什么是事务 &#xff1f;事务的四个特性(ACID) &#xff1f;事务的隔离级别&#xff1f;索引主要有哪几种分类 &#xff1f;什么时候适合添加索引&#x…...

Python创意作品说明怎么写,python创意编程作品集

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;Python创意作品说明怎么写&#xff0c;python创意编程作品集&#xff0c;现在让我们一起来看看吧&#xff01; 1、有哪些 Python 经典书籍 书名&#xff1a;深度学习入门 作者&#xff1a;[ 日&#xff3d; 斋藤康毅 …...

icomoon字体图标的使用

很久之前就学习过iconfont图标的使用&#xff0c;今天又遇到一个用icomoon字体图标写的案例&#xff0c;于是详细学习了一下&#xff0c;现整理如下。 一、下载 1.网址&#xff1a; https://icomoon.io/#home 2.点击IcoMoon App。 3.点击 https://icomoon.io/app 4.进入IcoM…...

Java · 常量介绍 · 变量类型转换 · 理解数值提升 · int 和 Stirng 之间的相互转换

书接上回 Java 变量介绍 我们继续学习以下内容. 四、常量字面值常量final 关键字修饰的常量五、理解类型转换int 和 long/double 相互赋值int 和 boolean 相互赋值int 字面值常量给 byte 赋值强制类型转换类型转换小结六、理解数值提升int 和 long 混合运算byte 和 byte 的运算…...

JVM从跨平台到跨专业 Ⅲ -- 类加载与字节码技术【下】

文章目录编译期处理默认构造器自动拆装箱泛型集合取值可变参数foreach 循环switch 字符串switch 枚举枚举类try-with-resources方法重写时的桥接方法匿名内部类类加载阶段加载链接初始化相关练习和应用类加载器类与类加载器启动类加载器拓展类加载器双亲委派模式自定义类加载器…...

ucore的字符输出

ucore的字符输出有cga,lpt,和串口。qemu模拟出来显示器连接到cga中。 cga cga的介绍网站&#xff1a;https://en.wikipedia.org/wiki/Color_Graphics_Adapter cga是显示卡&#xff0c;内部有个叫6845的芯片。cga卡把屏幕划分成一个一个单元格&#xff0c;每个单元格显示一个a…...

【ESP 保姆级教程】玩转emqx数据集成篇① ——认识数据集成

忘记过去,超越自己 ❤️ 博客主页 单片机菜鸟哥,一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-02-10 ❤️❤️ 本篇更新记录 2023-02-10 ❤️🎉 欢迎关注 🔎点赞 👍收藏 ⭐️留言📝🙏 此博客均由博主单独编写,不存在任何商业团队运营,如发现错误,请…...

PMP报考条件?

PMP已经被认为是项目管理专业身份的象征&#xff0c;项目经理人取得的重要资质。 PMP考试一般每年在中国大陆地区&#xff0c;会进行四次考试&#xff0c;今天就来详细说一说PMP考试的时间线。 01考试时间PMP考试在中国大陆一年开展四次&#xff0c;分别在每年的3月、6月、9月…...

Vite+Vue3实现版本更新检查,实现页面自动刷新

ViteVue3实现版本更新检查&#xff0c;实现页面自动刷新1、使用Vite插件打包自动生成版本信息2、Vite.config.ts配置3、配置环境变量4、路由配置现有一个需求就是实现管理系统的版本发版&#xff0c;网页实现自动刷新页面获取最新版本 搜索了一下&#xff0c;轮询的方案有点浪费…...

LeetCode刷题模版:292、295、297、299-301、303、304、309、310

目录 简介292. Nim 游戏295. 数据流的中位数297. 二叉树的序列化与反序列化【未理解】299. 猜数字游戏300. 最长递增子序列301. 删除无效的括号【未理解】303. 区域和检索 - 数组不可变304. 二维区域和检索 - 矩阵不可变309. 最佳买卖股票时机含冷冻期310. 最小高度树【未理解】…...

20、CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别

CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位&#xff0c;代表像素&#xff0c;可以确保元素的大小不受屏幕分辨率的影响。 % (percentage) 是相对单位&#xff0c;代表元素大小相对于其父元素或视口&#xff08;viewport&#xff09;的大小的百分比。使用百分比可…...

第五节 字符设备驱动——点亮LED 灯

通过字符设备章节的学习&#xff0c;我们已经了解了字符设备驱动程序的基本框架&#xff0c;主要是掌握如何申请及释放设备号、添加以及注销设备&#xff0c;初始化、添加与删除cdev 结构体&#xff0c;并通过cdev_init 函数建立cdev 和file_operations 之间的关联&#xff0c;…...

浅谈小程序开源业务架构建设之路

一、业务介绍 1.1 小程序开源整体介绍 百度从做智能小程序的第一天开始就打造真正开源开放的生态&#xff0c;我们的愿景是&#xff1a;定义移动时代最佳体验&#xff0c;建设智能小程序行业标准&#xff0c;打破孤岛&#xff0c;共建开源、开放、繁荣的小程序行业生态。百度…...

git、gitee、github关系梳理及ssh不对称加密大白话解释

温馨提示&#xff1a;本文不会讲解如何下载、安装git&#xff0c;也不会讲解如何注册、使用gitee或GitHub&#xff0c;这些内容网上一大把&#xff0c;B站上的入门课程也很多&#xff0c;自己看看就好了。 本文仅对 git、gitee、github的关系梳理及ssh公钥私钥授权原理用白话讲…...

UDP协议详解

目录 前言&#xff1a; 再谈协议 UDP协议 比较知名的校验和 小结&#xff1a; 前言&#xff1a; UDP和TCP作为传输层非常知名的两个协议&#xff0c;那么将数据从应用层到传输层数据是怎样进行打包的&#xff1f;具体都会增加一些什么样的报头&#xff0c;下面内容详细介绍…...

Myb atis基础3

Mybatis注解开发单表操作Mybatis的常用注解Mybatis的增删改查MyBatis注解开发的多表操作MyBatis的注解实现复杂映射开发一对一查询一对多查询多对多查询构建sqlsql构建对象介绍查询功能的实现新增功能的实现修改功能的实现删除功能的实现Mybatis注解开发单表操作 Mybatis的常用…...

VHDL语言基础-时序逻辑电路-寄存器

目录 寄存器的设计&#xff1a; 多位寄存器&#xff1a; 多位寄存器的VHDL描述: 移位寄存器&#xff1a; 串进并出的移位寄存器的VHDL描述: 寄存器的设计&#xff1a; 多位寄存器&#xff1a; 一个D触发器就是一位寄存器&#xff0c;如果需要多位寄存器&…...

高通开发系列 - linux kernel更新msm-3.18升至msm-4.9

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! 目录 linux kernel更新msm-3.18升至msm-4.9第一周处理的内容:第二周处理的内容第三周处理的内容linux kernel更新msm-3.18升至msm-4.9 第…...

Go项目安全左移实践:集成Security-Shield实现自动化漏洞与密钥检测

1. 项目概述与核心价值 在当今的软件开发与运维实践中&#xff0c;应用安全已经从“附加题”变成了“必答题”。无论是个人开发者的小型项目&#xff0c;还是企业级的复杂系统&#xff0c;都面临着来自网络的各种潜在威胁。然而&#xff0c;安全工具的引入往往伴随着陡峭的学习…...

QFN测试插座技术解析与应用实践

1. QFN测试插座的技术挑战与解决方案在半导体测试领域&#xff0c;QFN封装器件的测试一直是个棘手问题。这种无引线四方扁平封装虽然节省空间、散热优异&#xff0c;但恰恰因为缺少传统引脚&#xff0c;使得测试接触变得异常困难。我经手过不少QFN测试项目&#xff0c;最头疼的…...

3dmax动画期末作业全流程分享(附技术细节+避坑指南)

前言&#xff1a;期末将至&#xff0c;相信很多学习3dmax的小伙伴都在为动画期末作业发愁——从创意构思到建模、动画制作&#xff0c;再到渲染输出&#xff0c;每一步都可能遇到各种问题。本次就结合我的期末作业实践&#xff0c;详细分享从前期准备到成品交付的完整流程&…...

Git Conflict Resolution

1. 这篇文章解决什么问题&#xff1f; Git 冲突不是异常情况&#xff0c;而是多人协作和分支开发里的正常现象。 常见问题包括&#xff1a; 1. 为什么会产生冲突&#xff1f; 2. 冲突文件里的 <<<<<<<、、>>>>>>> 是什么&#xff1f…...

告别TwinCAT:手把手教你用LinuxCNC+IGH搭建开源EtherCAT运动控制平台

告别商业软件束缚&#xff1a;LinuxCNCIGH开源运动控制平台实战指南 在工业自动化和运动控制领域&#xff0c;商业软件长期占据主导地位&#xff0c;但高昂的授权费用和封闭的生态系统让许多工程师和创客望而却步。开源运动控制平台的出现打破了这一局面&#xff0c;为追求灵活…...

紧急预警:Midjourney即将下架Nihonga相关风格标签?(内部消息+已存档的5类不可再生提示词组合,仅限今日开放获取)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Nihonga风格在Midjourney中的历史定位与美学内核 Nihonga&#xff08;日本画&#xff09;作为明治维新后确立的现代民族绘画体系&#xff0c;以天然矿物颜料、金箔银箔、胶质媒介及传统和纸为物质基础&…...

软件设计原则之DIP依赖倒置原则

(DIP) 依赖倒置原则 Dependency Inversion Principle核心原则抽象不应该依赖细节&#xff1b;细节应该依赖于抽象。场景描述在一个应用程序 Application 中需要使用到数据库&#xff0c;比如我们此时需要使用到 Mysql 数据库。Mysql 数据库分别具有连接&#xff0c;断开关闭&am…...

can消息的大小端对源码的影响

下图为小端intel型信号&#xff0c;其dbc文件部分源码为&#xff1a;BO_ 1 id_0x1: 8 Vector__XXXSG_ aaa : 0|121 (1,0) [0|0] "" Vector__XXX&#xff0c;这里的0代表的是起始位置为0&#xff08;起始0->7,8->12为高位)如果将该信号改为大端motorola型&#…...

NodeMCU PyFlasher:ESP8266图形化固件烧录终极解决方案

NodeMCU PyFlasher&#xff1a;ESP8266图形化固件烧录终极解决方案 【免费下载链接】nodemcu-pyflasher Self-contained NodeMCU flasher with GUI based on esptool.py and wxPython. 项目地址: https://gitcode.com/gh_mirrors/no/nodemcu-pyflasher 对于ESP8266开发者…...

CodeBuddy ai对话框上面的git docs terminal Rulds 干嘛用的,以thinkphp fastadmin 为例,插件市场

CodeBuddy&#xff08;或同类 AI 编程助手&#xff09;里的**「上下文注入&#xff08;Context Injection&#xff09;」功能模块**&#xff0c;作用是把项目/环境信息喂给 AI&#xff0c;让它“看得懂你的项目”&#xff0c;而不是凭空瞎编代码。 插件市场###ai对对话框 逐个拆…...