作为一名前端程序猿,相对于后端操作数据的机会较少。然而,有些时候因为一些特殊的原因(如:需要构造成对应插件需要的数据格式,需要返回特定的数据格式等)而不得不对数据进行筛选、重构。相对于后端语言,我们没有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;
  }
};

javascript通过字典思想操作数据的更多相关文章

  1. Javascript 解读与思想

    Javascript 解读与思想 解读:对底层类库功能的理解 思想:对程序架构的部署思维

  2. 前端 javascript 数据类型 字典

    定义字典 a = {"k1":"v1","k2":"v2",}; Object {k1: "v1", ...

  3. 聚焦JavaScript面向对象的思想

    面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...

  4. 第六章:javascript:字典

    字典是一种以键-值对应形式存储的数据结构,就像电话薄里的名字和电话号码一样.只要找一个电话,查找名字,名字找到后,电话号码也就找到了.这里的键值是你用来查找的东西,值就是要查的到的结果. javasc ...

  5. 浅谈javascript的面向对象思想

    面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...

  6. JavaScript数据结构——字典和散列表的实现

    在前一篇文章中,我们介绍了如何在JavaScript中实现集合.字典和集合的主要区别就在于,集合中数据是以[值,值]的形式保存的,我们只关心值本身:而在字典和散列表中数据是以[键,值]的形式保存的,键 ...

  7. JavaScript结构三层——思想快速介绍

    本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写JavaS ...

  8. JavaScript结构三层——思想快速入门

      本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...

  9. [Javascript] 面向对象编程思想

    1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1. ...

随机推荐

  1. 【HDOJ】1166 敌兵布阵

    线段树. #include <stdio.h> #define maxn 55555 ]; void PushUP(int rt) { sums[rt] = sums[rt<< ...

  2. DataSet用法详细

    转自:http://www.cnblogs.com/zeroone/archive/2012/06/08/2541299.html DataSet用法详细 一.特点介绍 1.处理脱机数据,在多层应用程 ...

  3. DevExpress中XtraGrid控件对GridView每行的颜色设置 zt

    改变行颜色 private void GridView1_RowStyle(object sender, DevExpress.XtraGrid.Views.Grid.RowStyleEventArg ...

  4. 畅通工程 HDOJ--1863

    畅通工程 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. JavaScript高级程序设计43.pdf

    事件类型 Web浏览器中有很多事件类型,“DOM3级事件”规定了以下几类事件 UI事件(用户界面),当用户与页面上的元素交互时触发: 焦点事件,当元素获得或失去焦点时触发 鼠标事件,当用户通过鼠标在页 ...

  6. (转载)WindowsXP上安装和运行神器SqlMap的步骤

    在Windows XP上安装和运行SqlMap的步骤…… 1.首先下载SqlMap 点击下载. https://codeload.github.com/sqlmapproject/sqlmap/leg ...

  7. Android图形系统之Surface、SurfaceView、SurfaceHolder及SurfaceHolder.Callback开发实例

    原文:Android图形系统之Surface.SurfaceView.SurfaceHolder及SurfaceHolder.Callback之间的联系 Surface是原始图像缓冲区(raw buf ...

  8. 使用alloctor模板来实现string类

    虽然以前做过更复杂的各种数据结构,不过那只是在看完c++prime7章后做的,没有考虑到类的拷贝体现出来是类值还是类指针,于是写了一些半成品类,不过那些主要是练数据结构,不想再改,于是就想办法模仿了下 ...

  9. Codeforces 294E Shaass the Great

    树形DP.由于n只有5000,可以直接枚举边. 枚举边,将树分成两个子树,然后从每个子树中选出一个点分别为u,v,那么答案就是: 子树1中任意两点距离总和+子树2中任意两点距离总和+子树1中任意一点到 ...

  10. openstack 集成显卡 对windroye 支持