对象内数据遍历顺序出错

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对象中。

相关文章

咱们国内现在手机分为两类,Android手机与苹果手机,现在用的...
前言 上一篇做了php的微信登录,所以也总结一下Java的微信授...
前言 上一篇文章写到如何上架IOS应用到Appstore,其中漏掉了...
文件-新建-1.项目 ┌─uniCloud 云空间目录,阿里云为uniClo...
Flexbox #Flex 容器 Flex 是 Flexible Box 的缩写,意为&...
globalStyle 用于设置应用的状态栏、导航条、标题、窗口背景...