Js如何实现升序和降序

前言

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

具体示例

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=0;i--) {
            ul.appendChild(arr[i]);   // 添加到ul为子元素
        }
       
       
    }
}

如下是html结构

    
小红-1
    
张三-3
    
李四-4
    
王五-5

分析

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

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

Vue版本实现

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

.wrap {
    text-align: center;
}
.btn {
    margin-top: 20px;
}

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

总结

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

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

2023-01-31

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

2023-01-30

VueJs中如何使用Teleport组件

2023-01-22

VueJs中如何使用provide与inject

2023-01-21

点击左下角查看更多