封装通用的排序函数（包含在vue2中的使用方法）

最新推荐文章于 2023-04-06 17:32:14 发布

转载最新推荐文章于 2023-04-06 17:32:14 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huasonglin/p/8109989.html

文章标签：

#json #javascript #ViewUI

本文介绍了一个通用的排序函数实现，该函数可以根据不同的关键字和升序或降序需求对对象数组进行排序。通过两个案例展示了其在JavaScript中的应用，包括基本排序和在Vue.js购物车项目中的集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装通用的排序函数

代码：

            //根据排序关键字与是否为升序产生排序方法
            var sortExp = function(key, isAsc) {
                return function(x, y) {
                    if(isNaN(x[key])) { //如果当前排序的不是数字
                        if(x[key] > y[key]) return 1*(isAsc?1:-1);
                        if(x[key] < y[key]) return -1*(isAsc?1:-1);
                        return 0;
                    }else{
                        return (x[key]-y[key])*(isAsc?1:-1);
                    }
                }
            };

使用封装后的通用的排序函数的两个案例

一、普通用法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>排序</title>
    </head>

    <body>
        <script>
            //对象数组
            var pdts = [{
                title: "z-paint pot",
                quantity: 9,
                price: 3.95
            }, {
                title: "iPhone XS",
                quantity: 10,
                price: 8906.72
            }, {
                title: "polka dots",
                quantity: 17,
                price: 12.3
            }, {
                title: "pebbles",
                quantity: 5,
                price: 6.71
            }, {
                title: "Mi Note5",
                quantity: 8,
                price: 2985.6
            }];
            
            //根据排序关键字与是否为升序产生排序方法
            var sortExp = function(key, isAsc) {
                return function(x, y) {
                    if(isNaN(x[key])) { //如果当前排序的不是数字
                        if(x[key] > y[key]) return 1*(isAsc?1:-1);
                        if(x[key] < y[key]) return -1*(isAsc?1:-1);
                        return 0;
                    }else{
                        return (x[key]-y[key])*(isAsc?1:-1);
                    }
                }
            };

            //按价格升序
            pdts.sort(sortExp("price",true));
            document.write(JSON.stringify(pdts));
            document.write("<br/>------------------------------<br/>");
            pdts.sort(sortExp("price",false));
            document.write(JSON.stringify(pdts));
            document.write("<br/>------------------------------<br/>");
            pdts.sort(sortExp("title",true));
            document.write(JSON.stringify(pdts));
            document.write("<br/>------------------------------<br/>");
            pdts.sort(sortExp("title",false));
            document.write(JSON.stringify(pdts));
        </script>
    </body>

</html>

二、结合vue2.js的购物车完整案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
        <style>
            table{
                border-collapse: collapse;
            }
            .bg{
                background: paleturquoise;
            }
            table tr:hover{
                background: pink;
            }
            tr:first-child:hover,tr:last-child:hover{
                background: white;
            }
        </style>
    </head>
    <body>
        <h2 id="title">Shopping Cart</h2>
        <td id="table">
            <table border="1" width="100%">
                <tr>
　　　　　　　　　　　　<th>编号</th>
　　　　　　　　　　　　<th>名称<button v-on:click="isAsc('name',true)">↑</button><button v-on:click="isAsc('name',false)">↓</button></th>
　　　　　　　　　　　　<th>数量<button v-on:click="isAsc('number',true)">↑</button><button v-on:click="isAsc('number',false)">↓</button></th>
　　　　　　　　　　　　<th>价格<button v-on:click="isAsc('price',true)">↑</button><button v-on:click="isAsc('price',false)">↓</button></th>
　　　　　　　　　　　　<th>小计</th>
　　　　　　　　　　　　<th>操作</th>
　　　　　　　　　　</tr>
                <tr v-for="(s,i) in shopping" v-bind:class="{bg:i%2==0}">
                    <td>{{i+1}}</td>
                    <td>{{s.name}}</td>
                    <td><button v-on:click="s.number+=1">+</button><input type="number" v-model="s.number" /><button v-if="s.number>0" v-on:click="s.number-=1">-</button></td>
                    <td>${{s.price}}</td>
                    <td>${{s.price*s.number}}</td>
                    <td><button v-on:click="remove(i)">移除</button></td>
                </tr>
                <tr>
                    <td style="text-align: right;" colspan=6>合计：${{s}}</td>
                </tr>
            </table>
        </td>
        
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            var app2 = new Vue({
                el:'table',
                data:{
                    shopping:[
                        {name:"iPhone X",number:3,price:8888},
                        {name:"aPhone 8",number:2,price:5888},
                        {name:"华为 mate10 pro",number:1,price:5888}
                    ]
                },
                computed:{
                    s:function(){
                        sum = 0;
                        for(var i=0;i<this.shopping.length;i++){
                            sum = sum+this.shopping[i].price*this.shopping[i].number;
                        }
                        return sum;
                    }
                },
                methods:{
                    remove:function(i){
                        if(confirm("确实删除吗？")){
                            this.shopping.splice(i,1);
                        }
                    },
                    sortExp:function(key,isAsc){
                        return function(x,y){
                            if(isNaN(x[key])){
                                if(x[key]>y[key])return 1*(isAsc?1:-1);
                                if(x[key]<y[key])return -1*(isAsc?1:-1);
                                return 0;
                            } else {
                                return (x[key]-y[key]*(isAsc?1:-1));
                            }
                        }
                    },
                    isAsc:function(key,isAsc){
                        this.shopping.sort(this.sortExp(key,isAsc));
                    }
                }
            });
        </script>
        
    </body>
</html>