Js如何实现升序和降序

前言

在网页中,实现列表的升序和降序,是一个比较常见的操作,尤其是在做一些数据栓选表格的时候,按照索引,时间等特定的参数,提供升序和降序排列的功能的

具体示例

9dd9d89294be252b1c21f6788c990430.gif
sort

原生js

在原生js中主要是操作DOM,遍历节点,通过removeChild()删除节点,而使用appendChild()添加元素去实现的

代码如下所示

// 排序
function sort() {
    // 获取父级元素DOM
    var ul = document.getElementsByTagName('ul')[0];
    // 判断是否包含子元素
    if(ul.hasChildNodes()) {
        var len = ul.childNodes.length; // 子元素的个数
        var arr = [];   // 新数组变量用于存储节点
        for(var i = 0; i<len;i++) {
            arr[i] = ul.childNodes[0]; // 把节点存入数组
            ul.removeChild(ul.childNodes[0]); // 从第一个元素开始删除
        }
     
        // 倒过来遍历所有的节点,降序
        for(var i = len-1;i>=0;i--) {
            ul.appendChild(arr[i]);   // 添加到ul为子元素
        }
       
       
    }
}

如下是html结构

<ul>
    <li>小红-1</li>
    <li>张三-3</li>
    <li>李四-4</li>
    <li>王五-5</li>
</ul>
<input type="button" onclick="sort()" value="降序或升序" />

分析

上面的示例是先把容器html内容清空,最后,把数组的数据以倒排序的方式遍历并填充到之前的ul容器里面

使用原生js方式就是要遍历DOM节点,然后依赖DOM对象的属性或方法操作DOM

Vue版本实现

Vue里面是操作数据,结合数组的sort方法一个简单的方法就可以实现的,原生js想要实现同样类似的效果,那就得不断的去查找DOM节点,操作节点实现的

<template>
    <div class="wrap">
        <div>
            <ul>
                <li v-for="(item,index) in lists" :key="index">{{item.name}}-{{item.lan}}-{{item.chengji}}</li>
            </ul>
        </div>
        <div class="btn">
            <el-button type="primary" @click="handleJiangxu">降序</el-button>
            <el-button type="primary" @click="handleShengxu">升序</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ascendDes',
        data() {
            return {
                lists: [
                    {
                        name: '小王',
                        lan: '语文',
                        chengji: 90
                    },
                    {
                        name: '小红',
                        lan: '语文',
                        chengji: '79'
                    },

                    {
                        name: '小李',
                        lan: '语文',
                        chengji: '71'
                    },

                    {
                        name: '小白',
                        lan: '语文',
                        chengji: '85'
                    }
                ]
            }
        },

        methods: {
            // 降序
            handleJiangxu() {
                this.lists = this.lists.sort((a, b) => a.chengji - b.chengji).reverse()    // 反转一下
            },
            // 升序
            handleShengxu() {
                this.lists = this.lists.sort((a,b)=>a.chengji-b.chengji);
            }
        }
    }
</script>

<style lang="scss" scoped>
.wrap {
    text-align: center;
}
.btn {
    margin-top: 20px;
}
</style>

使用vue实现,发现就很简单,使用sort(a,b)方法,其中a代表前一个数,b代表后一个数,做一个差值,就可以判断哪个大,哪个小的

总结

升序和降序在Js中是一个比较常见的操作,做一些简单的排序操作可以基于sort方法实现

JS如何为表单聚焦控件设置醒目的样式

2023-01-31

5520689899f14e93ed1de027bc539e5c.jpeg

Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

2023-01-30

98d98688a6b0c155d20de05a298fc357.jpeg

VueJs中如何使用Teleport组件

2023-01-22

513855f67464a0e31d1e594c90fe985e.jpeg

VueJs中如何使用provide与inject

2023-01-21

9e04cbfe2962ade417026744c559a381.jpeg


dbfeb72e63cfc8259729fb747ef36aaf.jpeg

点击左下角查看更多

a8a1243dbc3164ff1ea7f2db9c721b84.gif

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值