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

最新推荐文章于 2024-05-09 14:31:15 发布
最新推荐文章于 2024-05-09 14:31:15 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： 功能实现 文章标签： 前端 javascript vue.js 多字段数组对象排序 数组排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seeeeeeeeeee/article/details/131788744
版权

数组对象排序（多字段排序）

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

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 : 1
                else if (a.child_ks !== b.child_ks) return a.child_ks < b.child_ks ? -1 : 1
                else 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 : 1
                else if (a.child_ks !== b.child_ks) return a.child_ks < b.child_ks ? -1 : 1
                else 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;
                    }
                }
            },
        }
接口写好了吗
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javaScript选择排序,字符串常用的方法、数组去重
qq_56756602的博客
08-23 297
选择排序,字符串常用的方法、数组去重
字符串的大小排序问题
kalayese的博客
09-17 97
具体就是运用for循环，将前一个与后一个进行比较，然后遍历输出。
【JavaScript】js对象进行排序（对象转数组,对象转对象）
热门推荐
06-13 1万+
js对象进行排序（对象转数组,对象转对象）
JavaScript字符排序规则（编码排序、字典排序）
最新发布
杨树林er的博客
05-09 1843
前端日常使用的排序规则主要有：**编码排序**、**字典排序**。 在常规程序中，默认的排序规则大部分都是编码排序，也就是所谓的 Unicode编码。比如在 js 中，数组的 sort 方法，默认排序规则就是编码排序。
js自定义多字段排序
zsl_955200的博客
12-13 5799
多字段同时排序在后端很好实现，直接order by field1 asc, field2 asc,field3 desc… 如下可实现在前端按照多字段同时排序： //测试数据 var items = [ {name:"linc",age:28,num:1234}, {name:"linc",age:28,num:12345}, {name:"kiki",age:20,num:
前端常见的排序算法
weixin_44761091的博客
04-11 5591
文章目录1.冒泡排序2.快速排序3.插入排序4.选择排序5.归并排序6.希尔排序7.计数排序8.基数排序 1.冒泡排序 基本思想：重复遍历要排序的数组，每次比较相邻两个元素的大小，如果顺序错误，则交换两个元素的位置 步骤： 比较相邻两个元素，如果位置不对交换两个元素 对每一对相邻的元素重读步骤1，直到最后，把最大（小）元素冒泡的最后一个位置 针对所有（除最后一个）元素，重复步骤1，2 重复步骤1，2，3，直到排序完成 代码实现： function bubbleSort (arr) { let len
前端需要掌握的十大排序算法
廖龙东个人博客
06-13 861
选择排序（Selection Sort）是一种简单直观的排序算法，它的原理是每一轮从待排序的元素中选择最小（或最大）的元素，将其与序列中的第一个元素交换位置，然后再从剩下的元素中选择最小（或最大）的元素，与序列中的第二个元素交换位置，以此类推，直到整个序列有序。归并排序是一种分治算法，通过将数组分成较小的子数组并对它们进行排序，然后再将排好序的子数组进行合并，从而实现整体的排序。在最坏情况下，时间复杂度为O(n^2)，但快速排序的平均时间复杂度较低，因此它通常被认为是一种高效的排序算法。
基于JavaScript实现Json数据根据某个字段进行排序
10-23
通过理解`sort()`方法的工作原理并结合自定义比较函数，我们可以有效地根据JSON数据的任意字段进行排序，无论是数字、字符串还是其他类型的数据。这在处理复杂数据结构时非常有用，尤其是在前端开发中处理用户界面...
jssort:JavaScript排序方法，将按给定数组中对象的多个字段进行排序
05-09
jsSort v0.0.5 jsSort是一种通用的排序方法，可以通过多个属性对对象数组进行排序。概述jsSort的公共API归结为一个名为sortByMultiple的方法。 此方法采用两个参数，每个参数都是数组。 sequence ：要排序的数组。 ...
javascript方法让表格按表头中某列排序，同excel功能
05-12
4. **排序逻辑**：根据所选列的数据类型（数字、日期或字符串），选择合适的排序算法。JavaScript的 `Array.prototype.sort()` 方法可以用来排序数组，但需要提供一个比较函数。例如，对字符串列进行升序排序： ``...
js分页+列表排序+属性显示
12-29
"js分页+列表排序+属性显示"这一技术组合，旨在提供一种无需页面刷新就能实现数据动态加载、排序以及特定属性显示的功能，提升用户体验。以下是关于这些知识点的详细说明： 1. **分页（Pagination）**： 分页是一...
字符串排序方法
08-03
字符串排序方法 javaScript中的字符串排序。
js中的数组对象排序分析
10-17
为大家分析一下js中的数组对象排序的一些知识，方便大家在以后使用中知道这些排序的原理
race-results:一种用于呈现可以搜索、过滤、排序和以其他方式分析的跑步公路赛结果的系统
06-17
在搜索功能方面，系统可能运用了JavaScript的字符串方法，如`includes()`或正则表达式，来实时匹配用户的搜索关键词。为了提供过滤功能，它可能使用了数组的`filter()`方法，根据预设条件筛选出符合条件的比赛记录。...
【前端面试】数组排序：array.sort（）方法的理解~
前端之路
10-04 4941
sort() 方法对数组的元素做原地的排序，并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点（code point）排序。 语法 arr.sort([compareFunction]) 参数 compareFunction可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。 描述 如果没有指
js排序、字符串操作总结
ZHANGJIN9546的博客
06-17 1274
1、冒泡排序 2、选择排序 3、数组中的排序方式 sort() sort 用法 ： 数组名.sort(); 默认sort方法是按照字符进行排序 此时sort方法没有加参数 4、es5的严格模式和宽松模式区别 ES5严格模式是限制性更强的JavaScript变体，它与常规JavaScript的语义不同，其分析更为严格。就是在js代码最前面或者函数内部写上：‘use strict’； 用...
Js中的多条件排序，多列排序
[ 自由 ][ 专业 ][ 执着 ]
11-18 3656
Js中的多条件排序，多列排序，多重排序实现
js中sort（）方法的用法，参数以及排序原理
lvmengmeng
04-06 5138
转自：http://segmentfault.com/a/1190000000410506 sort() 方法用于对数组的元素进行排序。 语法：arrayObject.sort(sortby)；参数sortby可选。规定排序顺序。必须是函数。 注：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的
js数组对象排序字符串
09-06
要对JS数组对象进行字符串排序，可以使用Array的sort()方法。首先，我们需要指定排序的键值，该键值可以是字符串或数组。如果是数组，则按照数组中的顺序依次进行多级排序。在sort()方法的回调函数中，可以使用比较函数来指定排序的方式，返回一个负数表示要将a放在b之前，返回一个正数表示要将a放在b之后，返回0表示a和b相等。如果不指定比较函数，默认按照Unicode编码进行排序。下面是一个示例代码： ```javascript let arr = [{name: 'John', age: 25}, {name: 'Bob', age: 30}, {name: 'Alice', age: 20}]; // 按照name字段升序排序 arr.sort((a, b) => a.name.localeCompare(b.name)); // 输出排序结果 console.log(arr); ``` 在上述示例中，我们使用了localeCompare()方法来进行字符串的比较，以实现按照name字段的升序排序。您可以根据需要调整比较函数来实现不同的排序方式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [js、JavaScript 数组列表、数组对象列表排序, 字符串排序](https://blog.csdn.net/CSDN_33901573/article/details/126285993)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [JavaScript对象数组排序函数及六个用法](https://download.csdn.net/download/weixin_38553478/13140681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

接口写好了吗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值