【排序】js简单实现前端数组排序,多字段数组对象排序,字符串排序,数字排序等

数组对象排序(多字段排序)

排序前:
在这里插入图片描述
排序后:
在这里插入图片描述

data() {return {list: [{ks: '外科',child_ks: '泌尿外科',xz: '外科一组',doctor: '小明',num: 18,num2: 19,num3: 20},{ks: '中医科',child_ks: '中医男科',xz: '外科一组',doctor: '小红',num: 18,num2: 19,num3: 20},{ks: '中医科',child_ks: '中医男科',xz: '外科一组',doctor: '小张',num: 18,num2: 19,num3: 20},{ks: '外科',child_ks: '泌尿外科',xz: '外科二组',doctor: '小李',num: 18,num2: 19,num3: 20},{ks: '外科',child_ks: '泌尿外科',xz: '外科二组',doctor: '小明',num: 18,num2: 19,num3: 20},{ks: '中医科',child_ks: '中医妇科',xz: '外科一组',doctor: '小明',num: 18,num2: 19,num3: 20},{ks: '外科',child_ks: '泌尿外科',xz: '外科二组',doctor: '小明',num: 18,num2: 19,num3: 20},{ks: '中医科',child_ks: '中医妇科',xz: '外科二组',doctor: '小明',num: 18,num2: 19,num3: 20},]}},
methods: {// 多字段排序mysort(a, b) {if (a.ks !== b.ks) return a.ks < b.ks ? -1 : 1else if (a.child_ks !== b.child_ks) return a.child_ks < b.child_ks ? -1 : 1else if (a.xz !== b.xz) return a.xz < b.xz ? -1 : 1},test() {this.list.sort(this.mysort)console.log(this.list)}}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 公共css文件 --><link rel="stylesheet" href="/statics/css/common/common.css"><!-- 公共js文件 --><script type="text/javascript" src="/statics/vue_element/common.js"></script><!-- vue方面文件 --><script src="/statics/vue_element/vue.js"></script><script src="/statics/vue_element/element.js"></script><link rel="stylesheet" href="/statics/vue_element/element.css"><script src="/statics/vue_element/axios.js"></script><title>测试页</title>
</head><body><div id="app" style="padding:10px;"><!-- 数组对象排序 --><el-button type="primary" @click="test">数组对象排序</el-button><div v-for="(item,index) in list" :key="index" style="font-size:16px;">{{item}}</div><!-- 数组排序 --><el-button type="primary" @click="numberPaixu" style="margin-top: 20px;">数组排序正</el-button><el-button type="primary" @click="numberPaixu2">数组排序反</el-button><div style="font-size:16px;margin-bottom:20px;">{{list2}}</div><!-- 字符串排序 --><el-button type="primary" @click="stringPaixu">字符串排序</el-button><div style="font-size:16px;">{{list3}}</div></div>
</body>
<script type="text/javascript">let v = new Vue({el: '#app',data() {return {list2: [8, 7, 9, 4, 3, 1, 2, 5, 6],list3: ['b','s','c','w','a','d','f'],list: [{ks: '外科',child_ks: '泌尿外科',xz: '外科一组',doctor: '小明',num: 18,num2: 19,num3: 20},{ks: '中医科',child_ks: '中医男科',xz: '外科一组',doctor: '小红',num: 18,num2: 19,num3: 20},{ks: '中医科',child_ks: '中医男科',xz: '外科一组',doctor: '小张',num: 18,num2: 19,num3: 20},{ks: '外科',child_ks: '泌尿外科',xz: '外科二组',doctor: '小李',num: 18,num2: 19,num3: 20},{ks: '外科',child_ks: '泌尿外科',xz: '外科二组',doctor: '小明',num: 18,num2: 19,num3: 20},{ks: '中医科',child_ks: '中医妇科',xz: '外科一组',doctor: '小明',num: 18,num2: 19,num3: 20},{ks: '外科',child_ks: '泌尿外科',xz: '外科二组',doctor: '小明',num: 18,num2: 19,num3: 20},{ks: '中医科',child_ks: '中医妇科',xz: '外科二组',doctor: '小明',num: 18,num2: 19,num3: 20},]}},methods: {// 多字段排序mysort(a, b) {if (a.ks !== b.ks) return a.ks < b.ks ? -1 : 1else if (a.child_ks !== b.child_ks) return a.child_ks < b.child_ks ? -1 : 1else if (a.xz !== b.xz) return a.xz < b.xz ? -1 : 1},// 数组对象排序test() {this.list.sort(this.mysort)console.log(this.list)},// 数组排序(正)mysort2(a, b) {return a - b;},// 数组排序(反)mysort22(a, b) {return b - a;},// 数组排序numberPaixu() {this.list2.sort(this.mysort2)},// 数组排序numberPaixu2() {this.list2.sort(this.mysort22)},// 字符串排序stringPaixu(){this.list3.sort()}}})
</script>
<style scoped></style></html>

数组对象根据某一个字段排序

// 排序
compare(property) {return function (a, b) {var value1 = a[property];var value2 = b[property];return value1 - value2;}
}
//打印看结果
console.log(newArray.sort(this.compare("value")))

多条件排序

methods: {paixu() {this.data.sort(this.mysort);},// 多字段排序mysort(a, b) {if (a.ks_id_text !== b.ks_id_text) {// 过滤字段为null或者undefined的情况if (a.ks_id_text !== null && a.ks_id_text !== undefined) {return a.ks_id_text < b.ks_id_text ? -1 : 1;} else {return -1;}} else if (a.child_ks_id_text !== b.child_ks_id_text) {if (a.child_ks_id_text !== null && a.child_ks_id_text !== undefined) {return a.child_ks_id_text < b.child_ks_id_text ? -1 : 1;} else {return -1;}} else if (a.group_name !== b.group_name) {if (a.group_name !== null && a.group_name !== undefined) {return a.group_name < b.group_name ? -1 : 1;} else {return -1;}}},}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/121384.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hadoop、Hive安装

一、 工具 Linux系统&#xff1a;Centos&#xff0c;版本7.0及以上 JDK&#xff1a;jdk1.8 Hadoop&#xff1a;3.1.3 Hive&#xff1a;3.1.2 虚拟机&#xff1a;VMware mysql&#xff1a;5.7.11 工具下载地址: https://pan.baidu.com/s/1JYtUVf2aYl5–i7xO6LOAQ 提取码: xavd…

ORACLE-递归查询、树操作

1. 数据准备 -- 测试数据准备 DROP TABLE untifa_test;CREATE TABLE untifa_test(child_id NUMBER(10) NOT NULL, --子idtitle VARCHAR2(50), --标题relation_type VARCHAR(10) --关系,parent_id NUMBER(10) --父id );insert into untifa_test (CHILD_ID, TITLE, RELATION_TYP…

SpringBoot整合Gateway 的Demo(附源码)

源码&#xff0c;可直接下载 Gateway模块 Gateway 的父pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sc…

vue核心面试题汇总【查缺补漏】

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 很喜欢‘万变不离其宗’这句话&#xff0c;希望在不断的思考和总结中找到Vue中的宗&#xff0c;来解答面试官抛出的…

2023MathorCup(妈妈杯) 数学建模挑战赛 解题思路

云顶数模最新解题思路免费分享~~ 2023妈妈杯数学建模A题B题思路&#xff0c;供大家参考~~ A题 B题

对mysql的联合索引的深刻理解

背景 对mysql的联合索引的考察是Java程序员面试高频考点&#xff01;必须深刻理解掌握否则容易丢分非常可惜。 技术难点 考察对最左侧匹配原理理解。 原理 暂且不表。网上讲这非常多。我理解就是&#xff0c;B树每个非叶子节点的值都是有序存放索引的值。 比如对A、B、C …

52.MongoDB复制(副本)集实战及其原理分析

MongoDB复制集架构 高可用 在生产环境中&#xff0c;不建议使用单机版的MongoDB服务器。 Mongodb复制集&#xff08;Replication Set&#xff09;由一组Mongod实例&#xff08;进程&#xff09;组成&#xff0c;包含一个Primary节点和多个Secondary节点&#xff0c;Mongodb Dr…

物联网和互联网医院小程序:如何实现医疗设备的远程监测和管理?

物联网&#xff08;IoT&#xff09;技术的发展为医疗设备的远程监测和管理提供了巨大的机会。结合互联网医院小程序&#xff0c;我们可以实现对医疗设备的远程访问、监控和管理&#xff0c;从而提高医疗服务的质量和效率。本文将介绍如何实现医疗设备的远程监测和管理&#xff…

appium操控微信小程序的坑

appium操控微信小程序的坑 打不开启动页面driver的context只有NATIVE_APP小程序上元素找不到 我打算使用appium操控微信小程序&#xff0c;只要能够获取到小程序的页面元素就算成功。下面都是我遇到的问题。 打不开启动页面 以下是我的appium的配置参数和代码&#xff1a; de…

在NLP中一下常见的任务,可以用作baseline;MRPC,CoLA,STS-B,RTE

1.MRPC&#xff08;Microsoft Research Paraphrase Corpus&#xff09;任务 是一个用于文本匹配和相似度判断的任务。在MRPC任务中&#xff0c;给定一对句子&#xff0c;模型需要判断它们是否是语义上等价的。MRPC任务的训练集和测试集由约5700对英语句子组成。每个句子对都有…

Hyperledger Fabric搭建测试网络

本文使用的Fabric版本&#xff1a;V2.5.4 Ubuntu系统&#xff1a;16.04LTS 前序文章已经详细介绍了如何安装部署Hyperledger Fabric系统&#xff0c;这里不再赘述。本篇文章主要介绍如何使用Fabric的测试网络。在正式开始之前&#xff0c;有一点需要说明&#xff1a; Hyperled…

24 行为型模式-访问者模式

1 访问者模式介绍 访问者模式在实际开发中使用的非常少,因为它比较难以实现并且应用该模式肯能会导致代码的可读性变差,可维护性变差,在没有特别必要的情况下,不建议使用访问者模式。 2 访问者模式原理 3 访问者模式实现 我们以超市购物为例,假设超市中的三类商品: 水果,糖…

JVM(二)

一,运行时数据区 Java虚拟机在运行Java程序过程中管理的内存区域,称之为运行时数据区。 1.1 程序计数器 程序计数器(Program Counter Register)也叫PC寄存器,每个线程会通过程序计数器记录当前要执行的的字节码指令的地址。 在加载阶段,虚拟机将字节码文件中的指令读取…

2024北京智慧养老展/北京老年科技产品展/北京养老产业展会

以展为媒&#xff0c;对话世界&#xff0c;2024第11届中国&#xff08;北京&#xff09;国际智慧养老展览会4月10日盛大启幕 2024第11届中国&#xff08;北京&#xff09;国际智慧养老产业展览会 The 2024 China (Beijing) international pension Industry Exhibition 时间&a…

多线程面试相关知识点

文章目录 (一) 进程线程和协程的区别创建线程的4种方式1. 继承Thread类2. 实现runnable接口3. 实现Callable接口4. 线程池创建 runnable 和 callable 有什么区别线程的 run()和 start()有什么区别&#xff1f;线程之间的状态变化notify()和 notifyAll()有什么区别&#xff1f;j…

HPV感染的风险:闫会宁主任分析酒店环境中的常见因素

人类乳头瘤病毒(HPV)是一种普遍存在的病毒&#xff0c;其存在和传播方式多种多样。近年来&#xff0c;人们对于HPV的认识不断深入&#xff0c;知道其在酒店环境中的传播风险。本文将探讨哪些情况下在酒店可能感染HPV。 一、HPV的传播方式 HPV主要通过直接接触传播&#xff0c…

Day 46 动态规划 part12

Day 46 动态规划 part12 解题理解309714 2道题目 309. 买卖股票的最佳时机含冷冻期 714. 买卖股票的最佳时机含手续费 解题理解 309 这道题不太好理解&#xff0c;需要考虑的情况很多并且不好确定。可以设置每天的状态有4种&#xff1a; dp[i][0] 今天持有股票 dp[i][1] 今天…

小结笔记:多位管理大师关于管理的要素的论述

最近在看《刘澜管理学》&#xff0c;其中有提到多位管理大师关于管理的要素的论述,笔记如下&#xff1a; 法约尔的管理五要素 这就是在前言中提到过的法约尔的管理五要素模型。 第一个“管理”学者 法约尔可以说是第一个专门的“管理”学者。在法约尔之前&#xff0c;没有人专门…

数据湖Iceberg介绍和使用(集成Hive、SparkSQL、FlinkSQL)

文章目录 简介概述作用特性数据存储、计算引擎插件化实时流批一体数据表演化&#xff08;Table Evolution&#xff09;模式演化&#xff08;Schema Evolution&#xff09;分区演化&#xff08;Partition Evolution&#xff09;列顺序演化&#xff08;Sort Order Evolution&…

python:使用Scikit-image对遥感影像进行梯度特征提取(gradient)

作者:CSDN @ _养乐多_ 在本博客中,我们将介绍如何使用Scikit-Image来进行梯度特征提取(gradient),并且提供一个示例代码,演示了如何在单波段遥感图像上应用这些方法。 梯度特征是指用于表示图像中亮度或颜色变化的特征。它包括两个关键成分:梯度幅值和梯度方向。梯度幅…