zoukankan      html  css  js  c++  java
  • javascript通过字典思想操作数据

      作为一名前端程序猿,相对于后端操作数据的机会较少。然而,有些时候因为一些特殊的原因(如:需要构造成对应插件需要的数据格式,需要返回特定的数据格式等)而不得不对数据进行筛选、重构。相对于后端语言,我们没有Linq,Dictionary等利器。因此,特此介绍一种根据字典思想操作数据的方法。

    1.从一个简单的场景说起:我们分别传入0-6,页面上打印出对应的星期一到星期七,像我这样的菜鸟可能会这样写:  

    var getWeekDay = function (dayNum) {
    var strweekday = "";
    switch (dayNum) {
    case 0:
    strweekday = "今天是星期一";
    break;


    ......


    case 6:
    strweekday = "今天是星期天";
    break;
    }
    return strweekday;
    }

     

    看上去写的有点累赘,而通过字典方式可以这样:

      var dayNum = 3,
        arrweekDic = ["一", "二", "三", "四", "五", "六", "天"],
        strweekday = "今天是星期" + arrweekDic[dayNum];

      哈哈~是不是看上去要好一点了?

    2.前段时间碰到过这样一个场景:

      从页面上很容易便能搜集到这样一个数据(模拟数据):

      var list = [ { City: "北京", Province: "北京", KeyID: "1" },
             { City: "三亚", Province: "海南", KeyID: "2" },
             { City: "成都", Province: "四川", KeyID: "3" },
               { City: "绵阳", Province: "四川", KeyID: "4" },
               { City: "杭州", Province: "浙江", KeyID: "5" },
             { City: "绍兴", Province: "浙江", KeyID: "6" } ];

      然而真正需要的确是这样一个数据格式:

            {[{ City: "北京", Province: "北京", KeyID: "1" }],

              [{ City: "三亚", Province: "海南", KeyID: "2" }],

              [{ City: "成都", Province: "四川", KeyID: "3" },{ City: "绵阳", Province: "四川", KeyID: "4" },]

              [{ City: "杭州", Province: "浙江", KeyID: "5" },{ City: "绍兴", Province: "浙江", KeyID: "6" } ]}

        因此必须得将数据的格式重新弄一弄。如果按照我这个菜鸟的方法,估计就直接:

      for(var i = 0,len = list.length;i < len;i++){

       for(...){

        //噼里啪啦各种整的天昏地暗

        }

      }

     //然而通过字典方式却可以这样:

       首先构造一个字典类型的数据:

      var keyArr = {
        "1": "1",
        "2": "2",
        "3": "3-4",
        "4": "3-4",
        "5": "5-6-7",
        "6": "5-6-7",
        "7": "5-6-7"
      }

      再根据keyArr 操作:

    function getKeyIDGroups(list, keyArr) {

      var group = {};

      for (var index in list) {

        var per = list[index],

        key = keyArr[per.KeyID];

        if (typeof key === "undefined") { continue; };

        if (group[key] === undefined) {

        group[key] = [per];

            } else {

        group[key].push(per);

        }
      }
      return group;
     };

    这样看起来怎么着也感觉好一点吧,特别是以后有KeyID = 8, 9, 10再需要维护的时候,只需要改keyArr 的格式就行啦~

    3.还有这么一天,后端给了我这样一个数据:

    [{
     "puoductLineID": "0",
     "puoductLineName": "XXX",
       "productVoList": [
      {
       "productID": "00",
         "productName": "XXX",
         "productLineID": "0",
         "programList": [
        {
          "programID": "000",
          "productID": "00",
          "serviceSetList": [
            {
              "serviceSetID": "0000",
              "serviceSetName": "XXX",
              "programID": "000",
                "serviceList": [
                  {
                    "ServiceID": "00000",
                    "ServiceName": "XXX",
                    "ip": "127.0.0.1",
                    "port": "8080",
                    "serviceSetID": "0000"
                  }...
                ]
              }...
            ]
          }...
        ]
      }
      ...
       ]
     }
     ...
    ]

    天啦,一个嵌套了5层,每一层都可能有可能无,只第一层就有300多条数据啊~而我则需要拿出所有的ServiceSetID和ServiceName。于是我无奈地找到了后端同学,告诉他应该他把数据构造好再给我。而他却一脸不以为然地说,这么简单,随便写两个循环不就搞定了么~我还忙得很,于是就这样吃了闭门羹。算了,自己试着写写吧。于是用字典方式也算是较为轻松地完成吧:

    function filterData(data, pCode) {
      if (typeof data["serviceSetID"] !== "undefined") {
      return true;
     } else {
      var listColumnName = "",
      flag = false;
      for (var k = 0; k < listNames.length; k++) {
        if (typeof data[listNames[k]] !== "undefined") {
        listColumnName = listNames[k];
        break;
      }
     }
    for (var i = 0; i < data[listColumnName].length; i++) {
      var per = data[listColumnName][i],
      code = "",
      name = "",
      nextPCode = "";
      for (var key in per) {
      if (per.hasOwnProperty(key)) {
        if (typeof filed[key] !== "undefined") {
        nextPCode = code = per[key];
        name = per[filed[key]];
        break;
      }
     }
    }
    if (filterData(per, nextPCode)) {
      result_jian.push({
      code: code,
      name: name,
      pCode: pCode
      });
        flag = true;
        }
       }
       return flag;
      }
    };

  • 相关阅读:
    java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header.
    spring-session-data-redis依赖冲突问题
    centos7启动iptables时报Job for iptables.service failed because the control process exited with error cod
    图片上传后台服务报内存溢出 Out Of Memory Java heap space
    mysql 数据库密码忘记重置 进行远程连接
    打Jar包
    Type interface com.innovationV2.mapper.UserMapper is not known to the MapperRegistry
    关于java基础类型Integer String的clone()
    clion使用clang编译
    token & refresh token 机制总结
  • 原文地址:https://www.cnblogs.com/boanyi/p/5081885.html
Copyright © 2011-2022 走看看