前端在遍历对象时遍历出来的键的顺序不正确问题处理

在uniapp开发小程序的时候,后端有时候给的数据是这样的顺序给好的日期:数据这样的键值对:

    let o = {
    
    
      '2021-01-01 00:00:00': '1',
      '2021-02-01 00:00:00': '2',
      '2021-03-01 00:00:00': '3',
      '2021-04-01 00:00:00': '4',
      '2021-05-01 00:00:00': '5',
      '2021-06-01 00:00:00': '6',
      '2021-07-01 00:00:00': '7',
      '2021-08-01 00:00:00': '8',
      '2021-09-01 00:00:00': '9',
      '2021-10-01 00:00:00': '10',
      '2021-11-01 00:00:00': '11',
      '2021-12-01 00:00:00': '12',
      '2022-01-01 00:00:00': '1',
      '2022-02-01 00:00:00': '2',
      '2022-03-01 00:00:00': '3',
      '2022-04-01 00:00:00': '4',
      '2022-05-01 00:00:00': '5',
      '2022-06-01 00:00:00': '6',
      '2022-07-01 00:00:00': '7',
      '2022-08-01 00:00:00': '8',
      '2022-09-01 00:00:00': '9',
      '2022-10-01 00:00:00': '10',
      '2022-11-01 00:00:00': '11',
      '2022-12-01 00:00:00': '12',
    };
    
    for (let k in o) {
    
    
      console.log(k);
    }

但是使用for…in…循环遍历这个对象,并打印其key值,在uniapp开发小程序可能会出现最终访问的顺序和接口给的顺序不一致的情况,就像下面这样:

image.png

这个问题在web端并没有遇到过,只是在使用uniapp开发小程序时处理接口给的数据时出现过这个问题导致了bug。使用uniapp开发小程序坑太多,所以具体原因并不想深究,这里只说一下处理办法:

    function sortDateFn(obj) {
    
    
      if (obj.toString() !== '[object Object]') return;
      /* 排序后的map */
      const newObj = {
    
    };
      const sortedKeys = Object.keys(obj).sort(
        (a, b) => new Date(a) - new Date(b)
      );

      /* 将排好序的日期与原map的数据绑定起来 */
      sortedKeys.forEach((k) => {
    
    
        newObj[k] = obj[k];
      });

      return newObj;
    }

上面的方法,就是将map的key值重新拿出来排个序,再遍历排好序的key值,将原map对象对应的value放入新map对象中。

猜你喜欢

转载自blog.csdn.net/vet_then_what/article/details/125515888