• 对象内数据遍历顺序出错


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

  • 相关阅读:
    Spring Boot Common application properties(转载)
    SVN中trunk,branches,tags用法详解(转载)
    约定优于配置
    JavaScript封装一个MyAlert弹出框
    JavaScript封装一个实用的select控件
    JavaScript的8行代码搞定js文件引入问题
    JavaScript处理数据完成左侧二级菜单的搭建
    SpringMVC+Mybatis实现的Mysql分页数据查询
    十步完全理解 SQL(转载)
    sql语句练习50题
  • 原文地址:https://www.cnblogs.com/codexlx/p/16392095.html
Copyright © 2020-2023  润新知