【排序】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 …

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

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

appium操控微信小程序的坑

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

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寄存器,每个线程会通过程序计数器记录当前要执行的的字节码指令的地址。 在加载阶段,虚拟机将字节码文件中的指令读取…

多线程面试相关知识点

文章目录 (一) 进程线程和协程的区别创建线程的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…

数据湖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),并且提供一个示例代码,演示了如何在单波段遥感图像上应用这些方法。 梯度特征是指用于表示图像中亮度或颜色变化的特征。它包括两个关键成分:梯度幅值和梯度方向。梯度幅…

RabbitMQ (4)

RabbitMQ (4) 文章目录 1. 死信的概念2. 死信的来源3. 死信代码案例3.1 TTL 过期时间3.2 超过队列最大长度3.3 拒绝消息 前言   上文我们已经学习完 交换机 &#xff0c;知道了几个交换机的使用 &#xff0c;下面我们来学习一下 死信队列 1. 死信的概念 先从概念解释上搞清楚这…

【C++】mapset的底层结构 -- AVL树(高度平衡二叉搜索树)

前面我们对 map / multimap / set / multiset 进行了简单的介绍&#xff0c;可以发现&#xff0c;这几个容器有个共同点是&#xff1a;其底层都是按照二叉搜索树来实现的。 但是二叉搜索树有其自身的缺陷&#xff0c;假如往树中插入的元素有序或者接近有序&#xff0c;二叉搜索…

漏洞复现-phpmyadmin_SQL注入 (CVE-2020-5504)

phpmyadmin SQL注入 _&#xff08;CVE-2020-5504&#xff09; 漏洞信息 CVE-2020-5504sql注入漏洞Phpmyadmin 5.00以下 描述 ​ phpMyAdmin是Phpmyadmin团队的一套免费的、基于Web的MySQL数据库管理工具。该工具能够创建和删除数据库&#xff0c;创建、删除、修改数据库表&…

Java学习 5.习题2.

练习题1&#xff1a;判断一个数字是偶数还是奇数 int num110;if(num1%20) {System.out.println("num1是一个偶数");}else{System.out.println("num1是一个奇数");} 练习题2&#xff1a;判断一个数是正数还是负数还是0 int num2-5;if(num2>0) {System.ou…

yarn install 这个命令安装如何加速

yarn install 命令用来安装项目依赖&#xff0c;其速度受多种因素影响&#xff0c;如网络速度、npm/yarn包的源服务器、以及本地缓存等。以下是一些可能帮助你加速 yarn install 的方法&#xff1a; 1. 使用国内镜像 如果你在中国&#xff0c;可以使用淘宝的 npm 镜像&#x…