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

最新推荐文章于 2024-08-18 19:59:18 发布
最新推荐文章于 2024-08-18 19:59:18 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： 功能实现 文章标签： 前端 javascript vue.js 多字段数组对象排序 数组排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seeeeeeeeeee/article/details/131788744
版权
文章描述了一个使用Vue.js实现的数组对象排序功能，通过多字段（ks、child_ks和xz）进行排序，并展示了如何在Vue组件中定义和调用排序方法。
摘要由CSDN通过智能技术生成

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

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

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;
                    }
                }
            },
        }
接口写好了吗
关注
专栏目录
jssort:JavaScript排序方法，将按给定数组中对象的多个字段进行排序
05-09
jsSort v0.0.5 jsSort是一种通用的排序方法，可以通过多个属性对对象数组进行排序。 概述 jsSort的公共API归结为一个名为sortByMultiple的方法。 此方法采用两个参数，每个参数都是数组。 sequence ：要排序的数组。 必须是对象数组。 keys ：代表要排序的属性名称的字符串数组。 如果此数组中的条目包含“。” 它将假定这表示一个子属性。 jsSort将向下导航对象图以查找属性。 在此版本中，jsSort假定将定义所有属性，而不是空对象。 jsSort可以按日期，数字和字符串值排序。 可以通过在属性字符串的开头附加“ [ASC]”或“ [DESC]”来设置每个属性的排序顺序。 如果未指定排序顺序，则默认为升序排序。 用法 首先使用脚本标签或使用commonJS / AMD（requireJS）导入将脚本包含在页面中。 < script ty
JS数组排序, 根据多个字段排序
ly-chn的博客
10-17 559
本来想封装一个方法来处理, 后来发现着实有些鸡肋, 遂放弃, 注意处理空值即可。
Web前端之根据字符串长度从长到短排序、中文字符串优先、样式循环、禁止冒泡、悬浮、激活、禁用、点击、切割、替换、stopPropagation、textarea、replace、split、sort
最新发布
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
08-18 2407
Web前端之根据字符串长度从长到短排序、中文字符串优先、样式循环、禁止冒泡、悬浮、激活、禁用、点击、切割、替换、stopPropagation、textarea、replace、split、sort
js中的数组对象排序
weixin_30888707的博客
04-27 877
一、普通数组排序　　 　　js中用方法sort()为数组排序。sort()方法有一个可选参数，是用来确定元素顺序的函数。如果这个参数被省略，那么数组中的元素将按照ASCII字符顺序进行排序。如： var arr = ["a", "b", "A", "B"]; arr.sort(); console.log(arr);//["A", "B", "a", "b"] 因为字母A、B的A...
javascript 对象数组排序
我只是坚持我的兴趣。
01-04 1万+
javascript 对象数组排序 作者: admin 日期: 二月 13, 2011发表评论 (3)查看评论 javascript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。 其基本的用法就不说了，先看个简单的排序例子： 帮助 1 2 3 //Sort
【前端面试】数组排序：array.sort（）方法的理解~
前端之路
10-04 5006
sort() 方法对数组的元素做原地的排序，并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点（code point）排序。 语法 arr.sort([compareFunction]) 参数 compareFunction可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。 描述 如果没有指
前端数组根据某种字段进行排序
gdhdhdhshs的博客
05-31 136
【代码】前端数组根据某种字段进行排序。
基于JavaScript实现Json数据根据某个字段进行排序
10-23
通过理解`sort()`方法的工作原理并结合自定义比较函数，我们可以有效地根据JSON数据的任意字段进行排序，无论是数字、字符串还是其他类型的数据。这在处理复杂数据结构时非常有用，尤其是在前端开发中处理用户界面...
数组对象中字符串的排序
protoCurry的博客
08-12 932
数组对象中字符串的排序 按照name进行排序： var person=[ {name:"zhangsan",age:24}, {name:"lisi",age:28}, {name:"amber",age:25}, {name:"shery",age:20} ] 要求按照name进行排序，我们可以使用Array对象的sort()方法，在W3school中对sort()方法有以下说明： 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要
JS实现table表格数据排序功能(可支持动态数据+分页效果)
11-22
4. **数组排序**: JavaScript的`Array.prototype.sort()`方法用于对数组元素进行排序。在示例中，这个方法被用来对表格数据进行排序。 5. **自定义排序算法**: `mySort`函数是自定义的排序算法，它首先根据字符串...
字符串时间排序，对时间格式字符串进行排序
余浩的博客
06-10 2039
字符串时间排序，对时间格式字符串进行排序
js 中文英文数字首字母混合排序
weixin_41525205的博客
09-07 696
javascript 中文 英文 数字 首字母混合排序
前端算法之数组排序篇
yuxiaoc的博客
10-20 1571
大一蓝桥杯之后到现在不写算法已经好久了,笔试吃大亏. 总结一些常用的. 排序 图源:https://images0.cnblogs.com/blog2015/601481/201503/301143539671643.png 1.1 最简单的javascript 自带的排序.//改变原数组 元素按照转换为的字符串的各个字符的Unicode位点进行排序。 let arr = [1, 3, 2, 4, 3, 2, 6]; //sort() arr.sort();
【前端面试】数组排序：array
2401_84152177的博客
04-08 718
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于。
JS-对象数组排序
前端菜鸟
04-06 2548
题目—对象数组排序 题目描述：编写函数使得下面对象数组可根据age(age相同使用commentum排序)来进行降序排序并返回新数组 输入数据： [{name:'JavaScript',age:24,commentnum:699}, {name:'Java',age:24,commentnum:698}, {name:'C++',age:29,commentnum:692}, {name:'C#',age:27,commentnum:694}] 输出数据： [{name:'C++',age:29,comme
js 数组对象 排序
zhongyuhuan1的专栏
09-11 718
var array = [     {name: 'a', phone: 1},     {name: 'b', phone: 5},     {name: 'd', phone: 3},     {name: 'c', phone: 4} ] array.sort(getSortFun('desc', 'phone')); function getSortFun(o
js 数组对象排序
czy279470138的博客
05-29 92
转自https://www.cnblogs.com/xljzlw/p/3694861.html 数组对象排序 this.compare = function(prop) { return function(obj1, obj2) { let val1 = obj1[prop] let val2 = obj2[prop]...
JS数组对象排序
热门推荐
qq_37899792的博客
03-19 4万+
利用数组api ——> sort来进行排序 var person = [{name:"Rom",age:12},{name:"Bob",age:22},{name:"Ma",age:5},{name:"Tony",age:25}] person.sort((a,b)=>{ return a.age-b.age})//升序 person.sort((a,b)=>{ retu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

接口写好了吗

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

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

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

打赏作者

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

抵扣说明：

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

余额充值