亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

減少多個字段排序的 Javascript 代碼

減少多個字段排序的 Javascript 代碼

萬千封印 2023-09-28 17:25:27
我有一個數組,其中的數據與此類似,但有更多字段可供排序:const shirts= [    {      type: "T-shirt",      size: "L",      color: "Black",    },    {      type: "Dress Shirt",      size: "S",      color: "Brown",    },    {      type: "Sweatshirt",      size: "M",      color: "Red",    },     {      type: "Polo",      size: "XS",      color: "Pink",    },      ...]我有一個排序功能,根據選擇的內容以不同的方式工作,例如,如果用戶按尺寸排序,則需要從 XS 到 XL,但任何其他選項都需要按字母順序排序。這就是我所擁有的://sort is the option the user decided to sort bySortedShirts(sort,shirts){        var newShirtArray=[];        var size1=0;        var size2=0;        if(sort === "type"){            newShirtArray= shirts.sort(function(shirt1,shirt2){                if (shirt1.type> shirt2.type){                     return 1;                }                else{                    return -1;                }             });        }        else if(sort === "color"){            newShirtArray = shirts.sort(function(shirt1,shirt2){                if (shirt1.color > shirt2.color){                     return 1;                }                else{                    return -1;                }             });        }        else if(sort === "size"){            newShirtArray = shirts.sort(function(shirt1,shirt2){                if(shirt1.size==="XS"){                    size1=0;                }                else if(shirt1.size==="S"){                    size1=1;                }                else if(shirt1.size==="M"){                    size1=2;                }                else if(shirt1.size==="L"){                    size1=3;                }                else if(shirt1.size==="XL"){                    size1=4;                }                if(shirt2.size==="XS"){                    size2=0;                }這對我來說似乎是重復的,因為類型和顏色以相同的方式排序,只是在不同的字段中,我覺得我可以將其放入一種排序中,但我不確定如何做到這一點。我想知道是否有這樣的事情或者減少我的代碼的另一種方法?
查看完整描述

2 回答

?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

您可以使用一個switch聲明:

switch (sort) {

    case 'color':

    case 'type':

        newShirtArray = shirts.sort(/* ... */);

        break;


    case 'size':

        newShirtArray = shirts.sort(/* ... */);

        break;

}

要將襯衫尺寸轉換為數字,您可以使用一個對象:

const ShirtSizes = {

    XS: 0, S: 1, M: 2, L: 3, XL: 4,

};

const shirt1Size = ShirtSizes[shirt1.size];

如果您的環境允許,請使用更簡潔的 ES2015 箭頭函數:

case 'size':

    newShirtArray = shirts.sort((s1, s2) => ShirtSizes[s1.size] - ShirtSizes[s2.size]);

    break;

對于type和color,正如您所猜測的,您可以使用:

case 'color':

case 'type':

    newShirtArray = shirts.sort((s1, s2) => {

        if (s1[sort] > s2[sort]) {

            return 1;

        } else if (s1[sort] < s2[sort]) {

            return -1;

        } else {

           return 0;

        }

    });

我希望這會有所幫助。


查看完整回答
反對 回復 2023-09-28
?
慕的地6264312

TA貢獻1817條經驗 獲得超6個贊

您可以使用括號訪問 JSON 對象的密鑰。


const shirts = [

    {

        type: "T-shirt",

        size: "L",

        color: "Black",

    },

    {

        type: "Dress Shirt",

        size: "S",

        color: "Brown",

    },

    {

        type: "Sweatshirt",

        size: "M",

        color: "Red",

    },

    {

        type: "Polo",

        size: "XS",

        color: "Pink",

    },

]


function SortedShirts(sort, shirts) {

    var newShirtArray = [];

    var size1 = 0;

    var size2 = 0;

    if (sort === "type" || sort === "color") {

        newShirtArray = shirts.sort(function (shirt1, shirt2) {

            if (shirt1[sort] > shirt2[sort]) {

                return 1;

            }

            else {

                return -1;

            }

        });

    }

    else if (sort === "size") {

        const sizes = ['XS', 'S', 'M', 'L', 'XL']

        newShirtArray = shirts.sort(function (shirt1, shirt2) {

            const size1 = sizes.indexOf(shirt1.size)

            const size2 = sizes.indexOf(shirt2.size)


            if (size1 > size2) {

                return 1;

            }

            else {

                return -1;

            }

        });

    }

}


查看完整回答
反對 回復 2023-09-28
  • 2 回答
  • 0 關注
  • 136 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號