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;
      }
    };

  • 相关阅读:
    August 4th, 2016, Week 32nd, Thursday
    August 3rd, 2016, Week 32nd, Wednesday
    Java的垃圾回收机制
    学java入门到精通,不得不看的15本书
    java中set和get方法的理解
    eclipse快捷键
    main方法无法编译
    Java构造器和方法的区别
    交换两个变量的值,不使用第三个变量
    计算圆周率 Pi (π)值, 精确到小数点后 10000 位 只需要 30 多句代码
  • 原文地址:https://www.cnblogs.com/boanyi/p/5081885.html
Copyright © 2011-2022 走看看