对字符串格式的日期进行排序

假定数组menu如下:

menu: [{  
      zt: '已交',  // 属性名是别人随便写的, 我就没改了
      obj: '语文',
      dt: '2017-04-15',
   },
   {
      zt: '未交',
      obj: '数学',
      dt: '2022-12-14',
   },
   {
      zt: '已交',
      obj: '英语',
      dt: '2019-04-15',
   }
]

初始页面渲染如下:

要求把数组menu中最新的日期排在最前面

主要思路是去掉"-"号然后排序然后加上"-"号的

方法1(新):

 1 // 去掉"-"号
 2 arr.forEach((d, index) => {
 3     arr[index].dt = +d.dt.replace(/-/g, '');
 4 });
 5 
 6 // 简单的选择排序
 7 for (let i = 0; i < arr.length - 1; i++) {
 8                     for (let j = i + 1; j < arr.length; j++) {
 9                         if (arr[j].dt > arr[i].dt) {
10                             let min_dt, min_zt, min_obj;
11                             min_dt = arr[i].dt;
12                             arr[i].dt = arr[j].dt;
13                             arr[j].dt = min_dt;
14                             // 顺便把zt 和 obj也排序
15                             min_zt = arr[i].zt;
16                             arr[i].zt = arr[j].zt;
17                             arr[j].zt = min_zt;
18 
19                             min_obj = arr[i].obj;
20                             arr[i].obj = arr[j].obj;
21                             arr[j].obj = min_obj;
22                         }
23                     }
24                 }
25 
26 
27 // 增加"-"号
28 arr.forEach((d, index) => {
29     arr[index].dt = arr[index].dt.toString().slice(0,4) + '-' + arr[index].dt.toString().slice(4,6) + '-' + arr[index].dt.toString().slice(6,8) ;
30 });
31 
32 console.log("处理后的arr:", arr);

方法二 : 

<template>
    <div>
        <div class="wrapper">
            <div class="main" v-for="(item,index) in menu" :key='index'>
                <div class="obj">{{item.obj}} {{item.dt}}</div>
                <div class="zt">{{item.zt}}</div>
            </div>
        </div>
        <button @click="test()">(点击排序)</button>

    </div>
</template>

<script>
    export default {
        
        data() {
            return {
                menu: [{
                        zt: '已交',
                        obj: '语文',
                        dt: '2017-04-15',
                    },
                    {
                        zt: '未交',
                        obj: '数学',
                        dt: '2022-12-14',
                    },
                    {
                        zt: '已交',
                        obj: '英语',
                        dt: '2019-04-15',
                    }
                ],

            }
        },
        methods: {
            test() {
                var new_arr = [];
                var original_menu = this.menu;
                console.log(original_menu);
                // 去掉 - 号, 转换为数字类型
                original_menu.forEach(function(item) {
                    console.log("item.dt",item.dt);
                    let temp_item;
                    temp_item = item.dt;
                    temp_item = +(temp_item.split('-').join(''));
                    console.log("temp_item:", temp_item);
                    new_arr.push({
                        zt: item.zt,
                        obj: item.obj,
                        dt: temp_item,
                    })
                });

                console.log("新数组new_arr:", new_arr);
                // 选择排序
                for (let i = 0; i < new_arr.length - 1; i++) {
                    for (let j = i + 1; j < new_arr.length; j++) {
                        if (new_arr[j].dt > new_arr[i].dt) {
                            let min_dt, min_zt, min_obj;
                            min_dt = new_arr[i].dt;
                            new_arr[i].dt = new_arr[j].dt;
                            new_arr[j].dt = min_dt;
                            // 顺便把dt 和 obj也排序
                            min_zt = new_arr[i].zt;
                            new_arr[i].zt = new_arr[j].zt;
                            new_arr[j].zt = min_zt;

                            min_obj = new_arr[i].obj;
                            new_arr[i].obj = new_arr[j].obj;
                            new_arr[j].obj = min_obj;
                        }
                    }
                }
                console.log("排序后new_arr:", new_arr);


                // 增加 - 号
                let newarr2 = [];
                new_arr.forEach(function (item) {
                    let item1 = item.dt;
                    item1 = item1.toString();
                    console.log("item:", item1);
                    let temp;
                    let temp1 = item1.substring(0, 4);
                    let temp2 = item1.substring(4, 6);
                    let temp3 = item1.substring(6, 8);

                    temp = temp1.concat('-',temp2 , '-', temp3 );
                    console.log("temp:", temp);
                    newarr2.push({
                        zt: item.zt,
                        obj: item.obj,
                        dt: temp
                    })
                });

                console.log("2号新数组newarr2:", newarr2);

                // 重新渲染
                for (var i = 0; i < this.menu.length; i++) {
                    this.menu[i].dt = newarr2[i].dt;
                    this.menu[i].zt = newarr2[i].zt;
                    this.menu[i].obj = newarr2[i].obj;
                }
            }
        }
    }

</script>

<style>
    .wrapper {
        width: 100%;
        height: 600upx;
        background-color: #F7F7F7;
    }

    .main {
        width: 800upx;
        height: 80upx;
        display: flex;
        flex: column;
    }

    .obj {
        width: 600upx;
        height: 60upx;
        background-color: #D9D9D9;
    }

    .zt {
        width: 200upx;
        height: 60upx;
        background-color: #D4D4D4;
    }
</style>

排序后结果如下: